{ "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-svg", "title": "HTML SVG", "description": "Малюйте масштабовану векторну графіку безпосередньо в HTML", "mode": "html", "difficulty": "beginner", "lessons": [ { "id": "svg-circle", "title": "Малювання кіл", "description": "SVG (Scalable Vector Graphics) дозволяє малювати фігури безпосередньо в HTML. Елемент <svg> є контейнером з атрибутами width та height.

Використовуйте <circle> з cx, cy (центр) та r (радіус) для малювання кіл.", "task": "Створіть SVG з колом:
1. Елемент <svg> з width=\"200\" та height=\"200\"
2. Елемент <circle> з центром у (100,100) та радіусом 50
3. Додайте колір fill", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; display: flex; justify-content: center; } svg { background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }", "sandboxCSS": "", "initialCode": "", "solution": "\n \n", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "svg", "message": "Додайте елемент <svg>" }, { "type": "element_exists", "value": "circle", "message": "Додайте елемент <circle> всередину SVG" }, { "type": "attribute_value", "value": { "selector": "svg", "attr": "width", "value": "200" }, "message": "Встановіть width=\"200\" в SVG" }, { "type": "attribute_value", "value": { "selector": "svg", "attr": "height", "value": "200" }, "message": "Встановіть height=\"200\" в SVG" }, { "type": "attribute_value", "value": { "selector": "circle", "attr": "cx", "value": "100" }, "message": "Встановіть cx=\"100\" для горизонтального центру кола" }, { "type": "attribute_value", "value": { "selector": "circle", "attr": "cy", "value": "100" }, "message": "Встановіть cy=\"100\" для вертикального центру кола" }, { "type": "attribute_value", "value": { "selector": "circle", "attr": "r", "value": "50" }, "message": "Встановіть r=\"50\" для радіуса кола" } ] }, { "id": "svg-rect-line", "title": "Прямокутники та лінії", "description": "Малюйте прямокутники за допомогою <rect> використовуючи x, y, width, height.

Малюйте лінії за допомогою <line> використовуючи x1, y1 (початок) та x2, y2 (кінець). Лінії потребують колір stroke!", "task": "Створіть SVG з:
1. Елементом <svg> (200x150)
2. Елементом <rect> на позиції (20,20) розміром 80x60
3. Елементом <line> від (120,30) до (180,90) з кольором stroke", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 200px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }", "sandboxCSS": "", "initialCode": "", "solution": "\n \n \n", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "svg", "message": "Додайте елемент <svg>" }, { "type": "element_exists", "value": "rect", "message": "Додайте елемент <rect>" }, { "type": "element_exists", "value": "line", "message": "Додайте елемент <line>" }, { "type": "attribute_value", "value": { "selector": "svg", "attr": "width", "value": "200" }, "message": "Встановіть width=\"200\" в SVG" }, { "type": "attribute_value", "value": { "selector": "svg", "attr": "height", "value": "150" }, "message": "Встановіть height=\"150\" в SVG" }, { "type": "attribute_value", "value": { "selector": "rect", "attr": "x", "value": "20" }, "message": "Встановіть x=\"20\" в rect" }, { "type": "attribute_value", "value": { "selector": "rect", "attr": "y", "value": "20" }, "message": "Встановіть y=\"20\" в rect" }, { "type": "attribute_value", "value": { "selector": "rect", "attr": "width", "value": "80" }, "message": "Встановіть width=\"80\" в rect" }, { "type": "attribute_value", "value": { "selector": "rect", "attr": "height", "value": "60" }, "message": "Встановіть height=\"60\" в rect" }, { "type": "attribute_value", "value": { "selector": "line", "attr": "x1", "value": "120" }, "message": "Встановіть x1=\"120\" в line" }, { "type": "attribute_value", "value": { "selector": "line", "attr": "y1", "value": "30" }, "message": "Встановіть y1=\"30\" в line" }, { "type": "attribute_value", "value": { "selector": "line", "attr": "x2", "value": "180" }, "message": "Встановіть x2=\"180\" в line" }, { "type": "attribute_value", "value": { "selector": "line", "attr": "y2", "value": "90" }, "message": "Встановіть y2=\"90\" в line" }, { "type": "contains", "value": "stroke", "message": "Додайте колір stroke до line" } ] }, { "id": "svg-shapes", "title": "Кілька фігур", "description": "Комбінуйте фігури для створення простої графіки! Додайте stroke для контурів та stroke-width для товщини.

Використовуйте fill=\"none\" для порожніх фігур. Фігури накладаються в порядку - пізніші елементи з'являються зверху.", "task": "Створіть просте обличчя:
1. Елемент <svg> (200x200)
2. Велике <circle> для обличчя
3. Два маленьких <circle> для очей
4. Елемент <line> для посмішки", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 250px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }", "sandboxCSS": "", "initialCode": "", "solution": "\n \n \n \n \n", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "svg", "message": "Додайте елемент <svg>" }, { "type": "element_count", "value": { "selector": "circle", "min": 3 }, "message": "Додайте принаймні 3 кола (1 обличчя + 2 ока)" }, { "type": "element_exists", "value": "line", "message": "Додайте <line> для посмішки" } ] } ] }