|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + |
| 4 | +<head> |
| 5 | + <meta charset="UTF-8"> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 7 | + <title>SVG from scratch</title> |
| 8 | + <style> |
| 9 | + .page { |
| 10 | + display: flex; |
| 11 | + column-gap: 30px; |
| 12 | + } |
| 13 | + </style> |
| 14 | +</head> |
| 15 | + |
| 16 | +<body class="page"> |
| 17 | + <!-- реализация нескольких фигур в одном SVG теге --> |
| 18 | + <svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> |
| 19 | + <!-- группировка элементов, тег "g" (допустим для указания единой заливки/fill, или чего то другого) --> |
| 20 | + <g fill=""> |
| 21 | + <!-- квадрата\rect с обводкой --> |
| 22 | + <rect width="180" height="180" x="10" y="10" fill="#B1BED1" stroke="#AC58F5" stroke-width="10" /> |
| 23 | + <!-- "по меньше" квадрата\rect с обводкой --> |
| 24 | + <rect width="100" height="100" x="50" y="50" fill="#B1BED1" stroke="#AC58F5" stroke-width="10" /> |
| 25 | + <!-- "прозрачный" треугольник, смещённый вправо --> |
| 26 | + <polygon points="15, 100 185, 15 185, 185" fill="rgba(255, 255, 255, 0.25)" /> |
| 27 | + <!-- круг/circle в центре --> |
| 28 | + <circle r="40" cx="100" cy="100" fill="#F8FBFE" /> |
| 29 | + </g> |
| 30 | + </svg> |
| 31 | + |
| 32 | + <!-- реализация головы мики-мауса --> |
| 33 | + <svg viewBox="0 0 250 210" width="250" height="210" xmlns="http://www.w3.org/2000/svg"> |
| 34 | + <g fill="#AC58F5"> |
| 35 | + <ellipse rx="45" ry="37" cx="55" cy="60" transform="rotate(-45, 55, 55)" /> |
| 36 | + <ellipse rx="45" ry="37" cx="190" cy="60" transform="rotate(45, 190, 55)" /> |
| 37 | + <circle r="67" cx="122" cy="125" /> |
| 38 | + </g> |
| 39 | + </svg> |
| 40 | + |
| 41 | + <!-- реализация квадрата с внутренним градиентом (в defs), увязка через id/fill-url --> |
| 42 | + <svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> |
| 43 | + <defs> |
| 44 | + <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%"> |
| 45 | + <stop offset="0%" stop-color="#AC58F5" /> |
| 46 | + <stop offset="100%" stop-color="#64748B" /> |
| 47 | + </linearGradient> |
| 48 | + </defs> |
| 49 | + <rect x="10" y="10" width="180" height="180" fill="url(#myGradient)" /> |
| 50 | + </svg> |
| 51 | + |
| 52 | + <!-- реализация квадрата через path --> |
| 53 | + <svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> |
| 54 | + <path d="M10 10 H 190 V 190 H 10 L 10 10" fill="#B1BED1" /> |
| 55 | + <g fill="#AC58F5"> |
| 56 | + <circle cx="10" cy="10" r="4" /> |
| 57 | + <circle cx="190" cy="190" r="4" /> |
| 58 | + <circle cx="190" cy="10" r="4" /> |
| 59 | + <circle cx="10" cy="190" r="4" /> |
| 60 | + </g> |
| 61 | + </svg> |
| 62 | +</body> |
| 63 | + |
| 64 | +</html> |
0 commit comments