{ "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-svg", "title": "SVG Basics", "description": "Draw scalable vector graphics directly in HTML", "mode": "html", "difficulty": "beginner", "lessons": [ { "id": "svg-circle", "title": "Drawing Circles", "description": "SVG (Scalable Vector Graphics) lets you draw shapes directly in HTML. The <svg> element is the container, with width and height attributes.

Use <circle> with cx, cy (center) and r (radius) to draw circles.", "task": "Create an SVG with a circle:
1. An <svg> with width=\"200\" and height=\"200\"
2. A <circle> centered at (100,100) with radius 50
3. Add a fill color", "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": "Add an element" }, { "type": "element_exists", "value": "circle", "message": "Add a element inside the SVG" }, { "type": "attribute_value", "value": { "selector": "circle", "attr": "cx", "value": "100" }, "message": "Set cx=\"100\" for the circle's horizontal center" }, { "type": "attribute_value", "value": { "selector": "circle", "attr": "cy", "value": "100" }, "message": "Set cy=\"100\" for the circle's vertical center" } ] }, { "id": "svg-rect-line", "title": "Rectangles & Lines", "description": "Draw rectangles with <rect> using x, y, width, height.

Draw lines with <line> using x1, y1 (start) and x2, y2 (end). Lines need a stroke color!", "task": "Create an SVG with:
1. An <svg> (200x150)
2. A <rect> at position (20,20) with size 80x60
3. A <line> from (120,30) to (180,90) with a stroke color", "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": "Add an element" }, { "type": "element_exists", "value": "rect", "message": "Add a element" }, { "type": "element_exists", "value": "line", "message": "Add a element" } ] }, { "id": "svg-shapes", "title": "Multiple Shapes", "description": "Combine shapes to create simple graphics! Add stroke for outlines and stroke-width for thickness.

Use fill=\"none\" for hollow shapes. Shapes stack in order - later elements appear on top.", "task": "Create a simple face:
1. An <svg> (200x200)
2. A large <circle> for the face
3. Two small <circle> elements for eyes
4. A <line> for the smile", "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": "Add an element" }, { "type": "element_count", "value": { "selector": "circle", "min": 3 }, "message": "Add at least 3 circles (1 face + 2 eyes)" }, { "type": "element_exists", "value": "line", "message": "Add a for the smile" } ] } ] }