{
"$schema": "../../schemas/code-crispies-module-schema.json",
"id": "html-svg",
"title": "HTML SVG",
"description": "Zeichne skalierbare Vektorgrafiken direkt in HTML",
"mode": "html",
"difficulty": "beginner",
"lessons": [
{
"id": "svg-circle",
"title": "Kreise zeichnen",
"description": "SVG (Scalable Vector Graphics) ermöglicht es, Formen direkt in HTML zu zeichnen. Das <svg>-Element ist der Container mit width und height Attributen.
Verwende <circle> mit cx, cy (Mittelpunkt) und r (Radius) zum Zeichnen von Kreisen.",
"task": "Erstelle ein SVG mit einem Kreis: 1. Ein <svg> mit width=\"200\" und height=\"200\" 2. Ein <circle> zentriert bei (100,100) mit Radius 50 3. Füge eine fill-Farbe hinzu",
"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": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "svg",
"message": "Füge ein <svg>-Element hinzu"
},
{
"type": "element_exists",
"value": "circle",
"message": "Füge ein <circle>-Element in das SVG ein"
},
{
"type": "attribute_value",
"value": { "selector": "svg", "attr": "width", "value": "200" },
"message": "Setze width=\"200\" beim SVG"
},
{
"type": "attribute_value",
"value": { "selector": "svg", "attr": "height", "value": "200" },
"message": "Setze height=\"200\" beim SVG"
},
{
"type": "attribute_value",
"value": { "selector": "circle", "attr": "cx", "value": "100" },
"message": "Setze cx=\"100\" für das horizontale Zentrum"
},
{
"type": "attribute_value",
"value": { "selector": "circle", "attr": "cy", "value": "100" },
"message": "Setze cy=\"100\" für das vertikale Zentrum"
},
{
"type": "attribute_value",
"value": { "selector": "circle", "attr": "r", "value": "50" },
"message": "Setze r=\"50\" für den Radius"
}
]
},
{
"id": "svg-rect-line",
"title": "Rechtecke & Linien",
"description": "Zeichne Rechtecke mit <rect> mit x, y, width, height.
Zeichne Linien mit <line> mit x1, y1 (Start) und x2, y2 (Ende). Linien brauchen eine stroke-Farbe!",
"task": "Erstelle ein SVG mit: 1. Einem <svg> (200x150) 2. Einem <rect> an Position (20,20) mit Größe 80x60 3. Einer <line> von (120,30) nach (180,90) mit Strichfarbe",
"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": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "svg",
"message": "Füge ein <svg>-Element hinzu"
},
{
"type": "element_exists",
"value": "rect",
"message": "Füge ein <rect>-Element hinzu"
},
{
"type": "element_exists",
"value": "line",
"message": "Füge ein <line>-Element hinzu"
},
{
"type": "attribute_value",
"value": { "selector": "svg", "attr": "width", "value": "200" },
"message": "Setze width=\"200\" beim SVG"
},
{
"type": "attribute_value",
"value": { "selector": "svg", "attr": "height", "value": "150" },
"message": "Setze height=\"150\" beim SVG"
},
{
"type": "attribute_value",
"value": { "selector": "rect", "attr": "x", "value": "20" },
"message": "Setze x=\"20\" beim rect"
},
{
"type": "attribute_value",
"value": { "selector": "rect", "attr": "y", "value": "20" },
"message": "Setze y=\"20\" beim rect"
},
{
"type": "attribute_value",
"value": { "selector": "rect", "attr": "width", "value": "80" },
"message": "Setze width=\"80\" beim rect"
},
{
"type": "attribute_value",
"value": { "selector": "rect", "attr": "height", "value": "60" },
"message": "Setze height=\"60\" beim rect"
},
{
"type": "attribute_value",
"value": { "selector": "line", "attr": "x1", "value": "120" },
"message": "Setze x1=\"120\" bei der line"
},
{
"type": "attribute_value",
"value": { "selector": "line", "attr": "y1", "value": "30" },
"message": "Setze y1=\"30\" bei der line"
},
{
"type": "attribute_value",
"value": { "selector": "line", "attr": "x2", "value": "180" },
"message": "Setze x2=\"180\" bei der line"
},
{
"type": "attribute_value",
"value": { "selector": "line", "attr": "y2", "value": "90" },
"message": "Setze y2=\"90\" bei der line"
},
{
"type": "contains",
"value": "stroke",
"message": "Füge eine stroke-Farbe zur line hinzu"
}
]
},
{
"id": "svg-shapes",
"title": "Mehrere Formen",
"description": "Kombiniere Formen, um einfache Grafiken zu erstellen! Füge stroke für Umrisse und stroke-width für die Dicke hinzu.
Verwende fill=\"none\" für hohle Formen. Formen stapeln sich in Reihenfolge - spätere Elemente erscheinen oben.",
"task": "Erstelle ein einfaches Gesicht: 1. Ein <svg> (200x200) 2. Einen großen <circle> für das Gesicht 3. Zwei kleine <circle>-Elemente für Augen 4. Eine <line> für das Lächeln",
"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": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "svg",
"message": "Füge ein <svg>-Element hinzu"
},
{
"type": "element_count",
"value": { "selector": "circle", "min": 3 },
"message": "Füge mindestens 3 Kreise hinzu (1 Gesicht + 2 Augen)"
},
{
"type": "element_exists",
"value": "line",
"message": "Füge eine <line> für das Lächeln hinzu"
}
]
}
]
}