{ "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-svg", "title": "HTML SVG", "description": "Rysuj skalowalne grafiki wektorowe bezpośrednio w HTML", "mode": "html", "difficulty": "beginner", "lessons": [ { "id": "svg-circle", "title": "Rysowanie kół", "description": "SVG (Scalable Vector Graphics) pozwala rysować kształty bezpośrednio w HTML. Element <svg> jest kontenerem z atrybutami width i height.

Użyj <circle> z cx, cy (środek) i r (promień) do rysowania kół.", "task": "Utwórz SVG z kołem:
1. Element <svg> z width=\"200\" i height=\"200\"
2. Element <circle> wyśrodkowany w (100,100) z promieniem 50
3. Dodaj kolor 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": "\n \n", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "svg", "message": "Dodaj element <svg>" }, { "type": "element_exists", "value": "circle", "message": "Dodaj element <circle> wewnątrz SVG" }, { "type": "attribute_value", "value": { "selector": "svg", "attr": "width", "value": "200" }, "message": "Ustaw width=\"200\" w SVG" }, { "type": "attribute_value", "value": { "selector": "svg", "attr": "height", "value": "200" }, "message": "Ustaw height=\"200\" w SVG" }, { "type": "attribute_value", "value": { "selector": "circle", "attr": "cx", "value": "100" }, "message": "Ustaw cx=\"100\" dla poziomego środka koła" }, { "type": "attribute_value", "value": { "selector": "circle", "attr": "cy", "value": "100" }, "message": "Ustaw cy=\"100\" dla pionowego środka koła" }, { "type": "attribute_value", "value": { "selector": "circle", "attr": "r", "value": "50" }, "message": "Ustaw r=\"50\" dla promienia koła" } ] }, { "id": "svg-rect-line", "title": "Prostokąty i linie", "description": "Rysuj prostokąty za pomocą <rect> używając x, y, width, height.

Rysuj linie za pomocą <line> używając x1, y1 (start) i x2, y2 (koniec). Linie potrzebują koloru stroke!", "task": "Utwórz SVG z:
1. Elementem <svg> (200x150)
2. Elementem <rect> na pozycji (20,20) o rozmiarze 80x60
3. Elementem <line> od (120,30) do (180,90) z kolorem 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": "\n \n \n", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "svg", "message": "Dodaj element <svg>" }, { "type": "element_exists", "value": "rect", "message": "Dodaj element <rect>" }, { "type": "element_exists", "value": "line", "message": "Dodaj element <line>" }, { "type": "attribute_value", "value": { "selector": "svg", "attr": "width", "value": "200" }, "message": "Ustaw width=\"200\" w SVG" }, { "type": "attribute_value", "value": { "selector": "svg", "attr": "height", "value": "150" }, "message": "Ustaw height=\"150\" w SVG" }, { "type": "attribute_value", "value": { "selector": "rect", "attr": "x", "value": "20" }, "message": "Ustaw x=\"20\" w rect" }, { "type": "attribute_value", "value": { "selector": "rect", "attr": "y", "value": "20" }, "message": "Ustaw y=\"20\" w rect" }, { "type": "attribute_value", "value": { "selector": "rect", "attr": "width", "value": "80" }, "message": "Ustaw width=\"80\" w rect" }, { "type": "attribute_value", "value": { "selector": "rect", "attr": "height", "value": "60" }, "message": "Ustaw height=\"60\" w rect" }, { "type": "attribute_value", "value": { "selector": "line", "attr": "x1", "value": "120" }, "message": "Ustaw x1=\"120\" w line" }, { "type": "attribute_value", "value": { "selector": "line", "attr": "y1", "value": "30" }, "message": "Ustaw y1=\"30\" w line" }, { "type": "attribute_value", "value": { "selector": "line", "attr": "x2", "value": "180" }, "message": "Ustaw x2=\"180\" w line" }, { "type": "attribute_value", "value": { "selector": "line", "attr": "y2", "value": "90" }, "message": "Ustaw y2=\"90\" w line" }, { "type": "contains", "value": "stroke", "message": "Dodaj kolor stroke do line" } ] }, { "id": "svg-shapes", "title": "Wiele kształtów", "description": "Łącz kształty, aby tworzyć proste grafiki! Dodaj stroke dla konturów i stroke-width dla grubości.

Użyj fill=\"none\" dla pustych kształtów. Kształty nakładają się w kolejności - późniejsze elementy są na wierzchu.", "task": "Utwórz prostą twarz:
1. Element <svg> (200x200)
2. Duże <circle> dla twarzy
3. Dwa małe <circle> dla oczu
4. Element <line> dla uśmiechu", "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": "Dodaj element <svg>" }, { "type": "element_count", "value": { "selector": "circle", "min": 3 }, "message": "Dodaj co najmniej 3 koła (1 twarz + 2 oczy)" }, { "type": "element_exists", "value": "line", "message": "Dodaj <line> dla uśmiechu" } ] } ] }