{
"$schema": "../../schemas/code-crispies-module-schema.json",
"id": "html-svg",
"title": "HTML SVG",
"description": "Dibuja gráficos vectoriales escalables directamente en HTML",
"mode": "html",
"difficulty": "beginner",
"lessons": [
{
"id": "svg-circle",
"title": "Dibujando círculos",
"description": "SVG (Scalable Vector Graphics) permite dibujar formas directamente en HTML. El elemento <svg> es el contenedor con atributos width y height.
Usa <circle> con cx, cy (centro) y r (radio) para dibujar círculos.",
"task": "Crea un SVG con un círculo: 1. Un <svg> con width=\"200\" y height=\"200\" 2. Un <circle> centrado en (100,100) con radio 50 3. Añade un color 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": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "svg",
"message": "Añade un elemento <svg>"
},
{
"type": "element_exists",
"value": "circle",
"message": "Añade un elemento <circle> dentro del SVG"
},
{
"type": "attribute_value",
"value": { "selector": "svg", "attr": "width", "value": "200" },
"message": "Establece width=\"200\" en el SVG"
},
{
"type": "attribute_value",
"value": { "selector": "svg", "attr": "height", "value": "200" },
"message": "Establece height=\"200\" en el SVG"
},
{
"type": "attribute_value",
"value": { "selector": "circle", "attr": "cx", "value": "100" },
"message": "Establece cx=\"100\" para el centro horizontal del círculo"
},
{
"type": "attribute_value",
"value": { "selector": "circle", "attr": "cy", "value": "100" },
"message": "Establece cy=\"100\" para el centro vertical del círculo"
},
{
"type": "attribute_value",
"value": { "selector": "circle", "attr": "r", "value": "50" },
"message": "Establece r=\"50\" para el radio del círculo"
}
]
},
{
"id": "svg-rect-line",
"title": "Rectángulos y líneas",
"description": "Dibuja rectángulos con <rect> usando x, y, width, height.
Dibuja líneas con <line> usando x1, y1 (inicio) y x2, y2 (fin). ¡Las líneas necesitan un color stroke!",
"task": "Crea un SVG con: 1. Un <svg> (200x150) 2. Un <rect> en posición (20,20) con tamaño 80x60 3. Una <line> de (120,30) a (180,90) con color 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": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "element_exists",
"value": "svg",
"message": "Añade un elemento <svg>"
},
{
"type": "element_exists",
"value": "rect",
"message": "Añade un elemento <rect>"
},
{
"type": "element_exists",
"value": "line",
"message": "Añade un elemento <line>"
},
{
"type": "attribute_value",
"value": { "selector": "svg", "attr": "width", "value": "200" },
"message": "Establece width=\"200\" en el SVG"
},
{
"type": "attribute_value",
"value": { "selector": "svg", "attr": "height", "value": "150" },
"message": "Establece height=\"150\" en el SVG"
},
{
"type": "attribute_value",
"value": { "selector": "rect", "attr": "x", "value": "20" },
"message": "Establece x=\"20\" en el rect"
},
{
"type": "attribute_value",
"value": { "selector": "rect", "attr": "y", "value": "20" },
"message": "Establece y=\"20\" en el rect"
},
{
"type": "attribute_value",
"value": { "selector": "rect", "attr": "width", "value": "80" },
"message": "Establece width=\"80\" en el rect"
},
{
"type": "attribute_value",
"value": { "selector": "rect", "attr": "height", "value": "60" },
"message": "Establece height=\"60\" en el rect"
},
{
"type": "attribute_value",
"value": { "selector": "line", "attr": "x1", "value": "120" },
"message": "Establece x1=\"120\" en la line"
},
{
"type": "attribute_value",
"value": { "selector": "line", "attr": "y1", "value": "30" },
"message": "Establece y1=\"30\" en la line"
},
{
"type": "attribute_value",
"value": { "selector": "line", "attr": "x2", "value": "180" },
"message": "Establece x2=\"180\" en la line"
},
{
"type": "attribute_value",
"value": { "selector": "line", "attr": "y2", "value": "90" },
"message": "Establece y2=\"90\" en la line"
},
{
"type": "contains",
"value": "stroke",
"message": "Añade un color stroke a la line"
}
]
},
{
"id": "svg-shapes",
"title": "Múltiples formas",
"description": "¡Combina formas para crear gráficos simples! Añade stroke para contornos y stroke-width para el grosor.
Usa fill=\"none\" para formas huecas. Las formas se apilan en orden - los elementos posteriores aparecen encima.",
"task": "Crea una cara simple: 1. Un <svg> (200x200) 2. Un <circle> grande para la cara 3. Dos <circle> pequeños para los ojos 4. Una <line> para la sonrisa",
"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": "Añade un elemento <svg>"
},
{
"type": "element_count",
"value": { "selector": "circle", "min": 3 },
"message": "Añade al menos 3 círculos (1 cara + 2 ojos)"
},
{
"type": "element_exists",
"value": "line",
"message": "Añade una <line> para la sonrisa"
}
]
}
]
}