{ "$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": "\n \n", "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": "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" } ] }, { "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": "\n \n \n", "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" } ] }, { "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": "\n \n \n \n \n", "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" } ] } ] }