{
"$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": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "svg",
"message": "Add an <svg> element"
},
{
"type": "element_exists",
"value": "circle",
"message": "Add a <circle> 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": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "svg",
"message": "Add an <svg> element"
},
{
"type": "element_exists",
"value": "rect",
"message": "Add a <rect> element"
},
{
"type": "element_exists",
"value": "line",
"message": "Add a <line> 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": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "svg",
"message": "Add an <svg> 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 <line> for the smile"
}
]
}
]
}