| {"id": "visual/v01", "task": "visual", "cat": "svg", "kind": "svg", "animated": false, "prompt": "Draw a side view of a classic red bicycle: two wheels with spokes, frame, saddle, handlebar, pedals and chain ring, on a light background.\n\nDo not write the SVG by hand. Write a Python 3 program that draws it with the svgkit toolkit and prints it:\n from svgkit import *\n s = SVG(width, height, bg='#ffffff') # viewBox 0 0 width height; y grows downwards\nShapes (extra keyword arguments become SVG attributes, e.g. stroke='#333', stroke_width=3, opacity=0.8):\n s.rect(x, y, w, h, fill, rx=None), s.circle(cx, cy, r, fill), s.ellipse(cx, cy, rx, ry, fill, rotate=0),\n s.line(x1, y1, x2, y2, stroke, width), s.polyline(points, stroke, width), s.polygon(points, fill), s.path(d, fill),\n s.text(x, y, 'label', size=16, fill='#222', anchor='middle' | 'start' | 'end', weight='bold')\nGeometry (angles in degrees clockwise from 12 o'clock: 0 = up, 90 = right, 180 = down, 270 = left):\n polar(cx, cy, r, deg) -> (x, y); s.regular_polygon(cx, cy, r, n, rotate=0, fill=...);\n s.star(cx, cy, r_out, r_in, n=5, fill=...); s.slice(cx, cy, r, start_deg, end_deg, r_inner=0, fill=...)\n (pie slice, donut segment when r_inner > 0); s.arc(cx, cy, r, start_deg, end_deg, stroke, width) (open arc: gauges,\n rings, angle marks); s.radial_lines(cx, cy, r1, r2, n, start=0, stroke, width) (n evenly spaced ticks, rays,\n spokes); s.radial_text(cx, cy, r, ['A', 'B', 'C', 'D'], start=0, size=...) (labels evenly around a circle);\n s.smooth(points, closed=False, fill, stroke) (smooth curve through points); s.wave(x0, x1, y, amplitude,\n wavelength, bottom=None, fill) (bottom=y closes it into a filled band); s.arrow(x1, y1, x2, y2, stroke, width,\n head=10); s.connector(x1, y1, x2, y2) (arrow with right-angle bends).\nPaint: fill=s.linear_gradient([(0, '#87ceeb'), (1, '#ffffff')]) (top to bottom; x2=1, y2=0 for left to right),\n s.radial_gradient([...]), filter=s.shadow(), filter=s.glow(8).\nStructure: with s.group(translate=(x, y), rotate=(deg, cx, cy), scale=k): ...; with s.mirror(x): ... (everything\n drawn inside appears again mirrored around the vertical line x); with s.repeat_around(cx, cy, n): ... (what you draw\n pointing up from the centre is repeated n times around it). Later shapes are drawn on top of earlier ones.\nCharts: y = Scale((min_value, max_value), (bottom_px, top_px)); y(v) -> pixel; s.axis_y(y, x, values, x_end=...)\n (tick labels and grid lines), s.axis_x(y_px, x0, x1, labels, positions), s.legend(x, y, [(colour, label), ...]);\n mix(c1, c2, t) blends two colours.\n\nExample (a flower):\nfrom svgkit import *\ns = SVG(400, 400, bg='#eef6ee')\ns.line(200, 210, 200, 380, stroke='#3f7d3a', width=8)\nwith s.repeat_around(200, 170, 8):\n s.ellipse(200, 110, 26, 55, fill='#f472b6')\ns.circle(200, 170, 34, fill='#fbbf24')\nprint(s)\n\nAnswer with the program in a single ```python code block. It must print the finished SVG."} | |
| {"id": "visual/v02", "task": "visual", "cat": "svg", "kind": "svg", "animated": false, "prompt": "Design a modern app icon: a rounded square with a vertical blue-to-purple gradient, a white stylized mountain range and a yellow sun.\n\nDo not write the SVG by hand. Write a Python 3 program that draws it with the svgkit toolkit and prints it:\n from svgkit import *\n s = SVG(width, height, bg='#ffffff') # viewBox 0 0 width height; y grows downwards\nShapes (extra keyword arguments become SVG attributes, e.g. stroke='#333', stroke_width=3, opacity=0.8):\n s.rect(x, y, w, h, fill, rx=None), s.circle(cx, cy, r, fill), s.ellipse(cx, cy, rx, ry, fill, rotate=0),\n s.line(x1, y1, x2, y2, stroke, width), s.polyline(points, stroke, width), s.polygon(points, fill), s.path(d, fill),\n s.text(x, y, 'label', size=16, fill='#222', anchor='middle' | 'start' | 'end', weight='bold')\nGeometry (angles in degrees clockwise from 12 o'clock: 0 = up, 90 = right, 180 = down, 270 = left):\n polar(cx, cy, r, deg) -> (x, y); s.regular_polygon(cx, cy, r, n, rotate=0, fill=...);\n s.star(cx, cy, r_out, r_in, n=5, fill=...); s.slice(cx, cy, r, start_deg, end_deg, r_inner=0, fill=...)\n (pie slice, donut segment when r_inner > 0); s.arc(cx, cy, r, start_deg, end_deg, stroke, width) (open arc: gauges,\n rings, angle marks); s.radial_lines(cx, cy, r1, r2, n, start=0, stroke, width) (n evenly spaced ticks, rays,\n spokes); s.radial_text(cx, cy, r, ['A', 'B', 'C', 'D'], start=0, size=...) (labels evenly around a circle);\n s.smooth(points, closed=False, fill, stroke) (smooth curve through points); s.wave(x0, x1, y, amplitude,\n wavelength, bottom=None, fill) (bottom=y closes it into a filled band); s.arrow(x1, y1, x2, y2, stroke, width,\n head=10); s.connector(x1, y1, x2, y2) (arrow with right-angle bends).\nPaint: fill=s.linear_gradient([(0, '#87ceeb'), (1, '#ffffff')]) (top to bottom; x2=1, y2=0 for left to right),\n s.radial_gradient([...]), filter=s.shadow(), filter=s.glow(8).\nStructure: with s.group(translate=(x, y), rotate=(deg, cx, cy), scale=k): ...; with s.mirror(x): ... (everything\n drawn inside appears again mirrored around the vertical line x); with s.repeat_around(cx, cy, n): ... (what you draw\n pointing up from the centre is repeated n times around it). Later shapes are drawn on top of earlier ones.\nCharts: y = Scale((min_value, max_value), (bottom_px, top_px)); y(v) -> pixel; s.axis_y(y, x, values, x_end=...)\n (tick labels and grid lines), s.axis_x(y_px, x0, x1, labels, positions), s.legend(x, y, [(colour, label), ...]);\n mix(c1, c2, t) blends two colours.\n\nExample (a flower):\nfrom svgkit import *\ns = SVG(400, 400, bg='#eef6ee')\ns.line(200, 210, 200, 380, stroke='#3f7d3a', width=8)\nwith s.repeat_around(200, 170, 8):\n s.ellipse(200, 110, 26, 55, fill='#f472b6')\ns.circle(200, 170, 34, fill='#fbbf24')\nprint(s)\n\nAnswer with the program in a single ```python code block. It must print the finished SVG."} | |
| {"id": "visual/v03", "task": "visual", "cat": "svg", "kind": "svg", "animated": false, "prompt": "Draw a friendly cartoon cat face: ears, eyes with highlights, nose, mouth and whiskers; orange fur with darker stripes.\n\nDo not write the SVG by hand. Write a Python 3 program that draws it with the svgkit toolkit and prints it:\n from svgkit import *\n s = SVG(width, height, bg='#ffffff') # viewBox 0 0 width height; y grows downwards\nShapes (extra keyword arguments become SVG attributes, e.g. stroke='#333', stroke_width=3, opacity=0.8):\n s.rect(x, y, w, h, fill, rx=None), s.circle(cx, cy, r, fill), s.ellipse(cx, cy, rx, ry, fill, rotate=0),\n s.line(x1, y1, x2, y2, stroke, width), s.polyline(points, stroke, width), s.polygon(points, fill), s.path(d, fill),\n s.text(x, y, 'label', size=16, fill='#222', anchor='middle' | 'start' | 'end', weight='bold')\nGeometry (angles in degrees clockwise from 12 o'clock: 0 = up, 90 = right, 180 = down, 270 = left):\n polar(cx, cy, r, deg) -> (x, y); s.regular_polygon(cx, cy, r, n, rotate=0, fill=...);\n s.star(cx, cy, r_out, r_in, n=5, fill=...); s.slice(cx, cy, r, start_deg, end_deg, r_inner=0, fill=...)\n (pie slice, donut segment when r_inner > 0); s.arc(cx, cy, r, start_deg, end_deg, stroke, width) (open arc: gauges,\n rings, angle marks); s.radial_lines(cx, cy, r1, r2, n, start=0, stroke, width) (n evenly spaced ticks, rays,\n spokes); s.radial_text(cx, cy, r, ['A', 'B', 'C', 'D'], start=0, size=...) (labels evenly around a circle);\n s.smooth(points, closed=False, fill, stroke) (smooth curve through points); s.wave(x0, x1, y, amplitude,\n wavelength, bottom=None, fill) (bottom=y closes it into a filled band); s.arrow(x1, y1, x2, y2, stroke, width,\n head=10); s.connector(x1, y1, x2, y2) (arrow with right-angle bends).\nPaint: fill=s.linear_gradient([(0, '#87ceeb'), (1, '#ffffff')]) (top to bottom; x2=1, y2=0 for left to right),\n s.radial_gradient([...]), filter=s.shadow(), filter=s.glow(8).\nStructure: with s.group(translate=(x, y), rotate=(deg, cx, cy), scale=k): ...; with s.mirror(x): ... (everything\n drawn inside appears again mirrored around the vertical line x); with s.repeat_around(cx, cy, n): ... (what you draw\n pointing up from the centre is repeated n times around it). Later shapes are drawn on top of earlier ones.\nCharts: y = Scale((min_value, max_value), (bottom_px, top_px)); y(v) -> pixel; s.axis_y(y, x, values, x_end=...)\n (tick labels and grid lines), s.axis_x(y_px, x0, x1, labels, positions), s.legend(x, y, [(colour, label), ...]);\n mix(c1, c2, t) blends two colours.\n\nExample (a flower):\nfrom svgkit import *\ns = SVG(400, 400, bg='#eef6ee')\ns.line(200, 210, 200, 380, stroke='#3f7d3a', width=8)\nwith s.repeat_around(200, 170, 8):\n s.ellipse(200, 110, 26, 55, fill='#f472b6')\ns.circle(200, 170, 34, fill='#fbbf24')\nprint(s)\n\nAnswer with the program in a single ```python code block. It must print the finished SVG."} | |
| {"id": "visual/v04", "task": "visual", "cat": "svg", "kind": "svg", "animated": false, "prompt": "Draw a small house with a red roof, a door and two windows, a tree beside it, green grass and a blue sky with two clouds.\n\nDo not write the SVG by hand. Write a Python 3 program that draws it with the svgkit toolkit and prints it:\n from svgkit import *\n s = SVG(width, height, bg='#ffffff') # viewBox 0 0 width height; y grows downwards\nShapes (extra keyword arguments become SVG attributes, e.g. stroke='#333', stroke_width=3, opacity=0.8):\n s.rect(x, y, w, h, fill, rx=None), s.circle(cx, cy, r, fill), s.ellipse(cx, cy, rx, ry, fill, rotate=0),\n s.line(x1, y1, x2, y2, stroke, width), s.polyline(points, stroke, width), s.polygon(points, fill), s.path(d, fill),\n s.text(x, y, 'label', size=16, fill='#222', anchor='middle' | 'start' | 'end', weight='bold')\nGeometry (angles in degrees clockwise from 12 o'clock: 0 = up, 90 = right, 180 = down, 270 = left):\n polar(cx, cy, r, deg) -> (x, y); s.regular_polygon(cx, cy, r, n, rotate=0, fill=...);\n s.star(cx, cy, r_out, r_in, n=5, fill=...); s.slice(cx, cy, r, start_deg, end_deg, r_inner=0, fill=...)\n (pie slice, donut segment when r_inner > 0); s.arc(cx, cy, r, start_deg, end_deg, stroke, width) (open arc: gauges,\n rings, angle marks); s.radial_lines(cx, cy, r1, r2, n, start=0, stroke, width) (n evenly spaced ticks, rays,\n spokes); s.radial_text(cx, cy, r, ['A', 'B', 'C', 'D'], start=0, size=...) (labels evenly around a circle);\n s.smooth(points, closed=False, fill, stroke) (smooth curve through points); s.wave(x0, x1, y, amplitude,\n wavelength, bottom=None, fill) (bottom=y closes it into a filled band); s.arrow(x1, y1, x2, y2, stroke, width,\n head=10); s.connector(x1, y1, x2, y2) (arrow with right-angle bends).\nPaint: fill=s.linear_gradient([(0, '#87ceeb'), (1, '#ffffff')]) (top to bottom; x2=1, y2=0 for left to right),\n s.radial_gradient([...]), filter=s.shadow(), filter=s.glow(8).\nStructure: with s.group(translate=(x, y), rotate=(deg, cx, cy), scale=k): ...; with s.mirror(x): ... (everything\n drawn inside appears again mirrored around the vertical line x); with s.repeat_around(cx, cy, n): ... (what you draw\n pointing up from the centre is repeated n times around it). Later shapes are drawn on top of earlier ones.\nCharts: y = Scale((min_value, max_value), (bottom_px, top_px)); y(v) -> pixel; s.axis_y(y, x, values, x_end=...)\n (tick labels and grid lines), s.axis_x(y_px, x0, x1, labels, positions), s.legend(x, y, [(colour, label), ...]);\n mix(c1, c2, t) blends two colours.\n\nExample (a flower):\nfrom svgkit import *\ns = SVG(400, 400, bg='#eef6ee')\ns.line(200, 210, 200, 380, stroke='#3f7d3a', width=8)\nwith s.repeat_around(200, 170, 8):\n s.ellipse(200, 110, 26, 55, fill='#f472b6')\ns.circle(200, 170, 34, fill='#fbbf24')\nprint(s)\n\nAnswer with the program in a single ```python code block. It must print the finished SVG."} | |
| {"id": "visual/v05", "task": "visual", "cat": "svg", "kind": "svg", "animated": false, "prompt": "Design a logo for a coffee shop called 'Nova Coffee': a coffee cup whose steam forms a star, with the name in a clean font under it.\n\nDo not write the SVG by hand. Write a Python 3 program that draws it with the svgkit toolkit and prints it:\n from svgkit import *\n s = SVG(width, height, bg='#ffffff') # viewBox 0 0 width height; y grows downwards\nShapes (extra keyword arguments become SVG attributes, e.g. stroke='#333', stroke_width=3, opacity=0.8):\n s.rect(x, y, w, h, fill, rx=None), s.circle(cx, cy, r, fill), s.ellipse(cx, cy, rx, ry, fill, rotate=0),\n s.line(x1, y1, x2, y2, stroke, width), s.polyline(points, stroke, width), s.polygon(points, fill), s.path(d, fill),\n s.text(x, y, 'label', size=16, fill='#222', anchor='middle' | 'start' | 'end', weight='bold')\nGeometry (angles in degrees clockwise from 12 o'clock: 0 = up, 90 = right, 180 = down, 270 = left):\n polar(cx, cy, r, deg) -> (x, y); s.regular_polygon(cx, cy, r, n, rotate=0, fill=...);\n s.star(cx, cy, r_out, r_in, n=5, fill=...); s.slice(cx, cy, r, start_deg, end_deg, r_inner=0, fill=...)\n (pie slice, donut segment when r_inner > 0); s.arc(cx, cy, r, start_deg, end_deg, stroke, width) (open arc: gauges,\n rings, angle marks); s.radial_lines(cx, cy, r1, r2, n, start=0, stroke, width) (n evenly spaced ticks, rays,\n spokes); s.radial_text(cx, cy, r, ['A', 'B', 'C', 'D'], start=0, size=...) (labels evenly around a circle);\n s.smooth(points, closed=False, fill, stroke) (smooth curve through points); s.wave(x0, x1, y, amplitude,\n wavelength, bottom=None, fill) (bottom=y closes it into a filled band); s.arrow(x1, y1, x2, y2, stroke, width,\n head=10); s.connector(x1, y1, x2, y2) (arrow with right-angle bends).\nPaint: fill=s.linear_gradient([(0, '#87ceeb'), (1, '#ffffff')]) (top to bottom; x2=1, y2=0 for left to right),\n s.radial_gradient([...]), filter=s.shadow(), filter=s.glow(8).\nStructure: with s.group(translate=(x, y), rotate=(deg, cx, cy), scale=k): ...; with s.mirror(x): ... (everything\n drawn inside appears again mirrored around the vertical line x); with s.repeat_around(cx, cy, n): ... (what you draw\n pointing up from the centre is repeated n times around it). Later shapes are drawn on top of earlier ones.\nCharts: y = Scale((min_value, max_value), (bottom_px, top_px)); y(v) -> pixel; s.axis_y(y, x, values, x_end=...)\n (tick labels and grid lines), s.axis_x(y_px, x0, x1, labels, positions), s.legend(x, y, [(colour, label), ...]);\n mix(c1, c2, t) blends two colours.\n\nExample (a flower):\nfrom svgkit import *\ns = SVG(400, 400, bg='#eef6ee')\ns.line(200, 210, 200, 380, stroke='#3f7d3a', width=8)\nwith s.repeat_around(200, 170, 8):\n s.ellipse(200, 110, 26, 55, fill='#f472b6')\ns.circle(200, 170, 34, fill='#fbbf24')\nprint(s)\n\nAnswer with the program in a single ```python code block. It must print the finished SVG."} | |
| {"id": "visual/v06", "task": "visual", "cat": "svg", "kind": "svg", "animated": false, "prompt": "Draw an analog clock face showing exactly 10:10: 12 hour marks, the numbers 12, 3, 6 and 9, hour and minute hands, and a red second hand pointing at 30 seconds.\n\nDo not write the SVG by hand. Write a Python 3 program that draws it with the svgkit toolkit and prints it:\n from svgkit import *\n s = SVG(width, height, bg='#ffffff') # viewBox 0 0 width height; y grows downwards\nShapes (extra keyword arguments become SVG attributes, e.g. stroke='#333', stroke_width=3, opacity=0.8):\n s.rect(x, y, w, h, fill, rx=None), s.circle(cx, cy, r, fill), s.ellipse(cx, cy, rx, ry, fill, rotate=0),\n s.line(x1, y1, x2, y2, stroke, width), s.polyline(points, stroke, width), s.polygon(points, fill), s.path(d, fill),\n s.text(x, y, 'label', size=16, fill='#222', anchor='middle' | 'start' | 'end', weight='bold')\nGeometry (angles in degrees clockwise from 12 o'clock: 0 = up, 90 = right, 180 = down, 270 = left):\n polar(cx, cy, r, deg) -> (x, y); s.regular_polygon(cx, cy, r, n, rotate=0, fill=...);\n s.star(cx, cy, r_out, r_in, n=5, fill=...); s.slice(cx, cy, r, start_deg, end_deg, r_inner=0, fill=...)\n (pie slice, donut segment when r_inner > 0); s.arc(cx, cy, r, start_deg, end_deg, stroke, width) (open arc: gauges,\n rings, angle marks); s.radial_lines(cx, cy, r1, r2, n, start=0, stroke, width) (n evenly spaced ticks, rays,\n spokes); s.radial_text(cx, cy, r, ['A', 'B', 'C', 'D'], start=0, size=...) (labels evenly around a circle);\n s.smooth(points, closed=False, fill, stroke) (smooth curve through points); s.wave(x0, x1, y, amplitude,\n wavelength, bottom=None, fill) (bottom=y closes it into a filled band); s.arrow(x1, y1, x2, y2, stroke, width,\n head=10); s.connector(x1, y1, x2, y2) (arrow with right-angle bends).\nPaint: fill=s.linear_gradient([(0, '#87ceeb'), (1, '#ffffff')]) (top to bottom; x2=1, y2=0 for left to right),\n s.radial_gradient([...]), filter=s.shadow(), filter=s.glow(8).\nStructure: with s.group(translate=(x, y), rotate=(deg, cx, cy), scale=k): ...; with s.mirror(x): ... (everything\n drawn inside appears again mirrored around the vertical line x); with s.repeat_around(cx, cy, n): ... (what you draw\n pointing up from the centre is repeated n times around it). Later shapes are drawn on top of earlier ones.\nCharts: y = Scale((min_value, max_value), (bottom_px, top_px)); y(v) -> pixel; s.axis_y(y, x, values, x_end=...)\n (tick labels and grid lines), s.axis_x(y_px, x0, x1, labels, positions), s.legend(x, y, [(colour, label), ...]);\n mix(c1, c2, t) blends two colours.\n\nExample (a flower):\nfrom svgkit import *\ns = SVG(400, 400, bg='#eef6ee')\ns.line(200, 210, 200, 380, stroke='#3f7d3a', width=8)\nwith s.repeat_around(200, 170, 8):\n s.ellipse(200, 110, 26, 55, fill='#f472b6')\ns.circle(200, 170, 34, fill='#fbbf24')\nprint(s)\n\nAnswer with the program in a single ```python code block. It must print the finished SVG."} | |
| {"id": "visual/v07", "task": "visual", "cat": "svg", "kind": "svg", "animated": false, "prompt": "Draw a pie chart of browser market share: Chrome 65%, Safari 19%, Edge 5%, Firefox 3%, Other 8%, with distinct colors, a legend with labels and percentages, and a title.\n\nDo not write the SVG by hand. Write a Python 3 program that draws it with the svgkit toolkit and prints it:\n from svgkit import *\n s = SVG(width, height, bg='#ffffff') # viewBox 0 0 width height; y grows downwards\nShapes (extra keyword arguments become SVG attributes, e.g. stroke='#333', stroke_width=3, opacity=0.8):\n s.rect(x, y, w, h, fill, rx=None), s.circle(cx, cy, r, fill), s.ellipse(cx, cy, rx, ry, fill, rotate=0),\n s.line(x1, y1, x2, y2, stroke, width), s.polyline(points, stroke, width), s.polygon(points, fill), s.path(d, fill),\n s.text(x, y, 'label', size=16, fill='#222', anchor='middle' | 'start' | 'end', weight='bold')\nGeometry (angles in degrees clockwise from 12 o'clock: 0 = up, 90 = right, 180 = down, 270 = left):\n polar(cx, cy, r, deg) -> (x, y); s.regular_polygon(cx, cy, r, n, rotate=0, fill=...);\n s.star(cx, cy, r_out, r_in, n=5, fill=...); s.slice(cx, cy, r, start_deg, end_deg, r_inner=0, fill=...)\n (pie slice, donut segment when r_inner > 0); s.arc(cx, cy, r, start_deg, end_deg, stroke, width) (open arc: gauges,\n rings, angle marks); s.radial_lines(cx, cy, r1, r2, n, start=0, stroke, width) (n evenly spaced ticks, rays,\n spokes); s.radial_text(cx, cy, r, ['A', 'B', 'C', 'D'], start=0, size=...) (labels evenly around a circle);\n s.smooth(points, closed=False, fill, stroke) (smooth curve through points); s.wave(x0, x1, y, amplitude,\n wavelength, bottom=None, fill) (bottom=y closes it into a filled band); s.arrow(x1, y1, x2, y2, stroke, width,\n head=10); s.connector(x1, y1, x2, y2) (arrow with right-angle bends).\nPaint: fill=s.linear_gradient([(0, '#87ceeb'), (1, '#ffffff')]) (top to bottom; x2=1, y2=0 for left to right),\n s.radial_gradient([...]), filter=s.shadow(), filter=s.glow(8).\nStructure: with s.group(translate=(x, y), rotate=(deg, cx, cy), scale=k): ...; with s.mirror(x): ... (everything\n drawn inside appears again mirrored around the vertical line x); with s.repeat_around(cx, cy, n): ... (what you draw\n pointing up from the centre is repeated n times around it). Later shapes are drawn on top of earlier ones.\nCharts: y = Scale((min_value, max_value), (bottom_px, top_px)); y(v) -> pixel; s.axis_y(y, x, values, x_end=...)\n (tick labels and grid lines), s.axis_x(y_px, x0, x1, labels, positions), s.legend(x, y, [(colour, label), ...]);\n mix(c1, c2, t) blends two colours.\n\nExample (a flower):\nfrom svgkit import *\ns = SVG(400, 400, bg='#eef6ee')\ns.line(200, 210, 200, 380, stroke='#3f7d3a', width=8)\nwith s.repeat_around(200, 170, 8):\n s.ellipse(200, 110, 26, 55, fill='#f472b6')\ns.circle(200, 170, 34, fill='#fbbf24')\nprint(s)\n\nAnswer with the program in a single ```python code block. It must print the finished SVG."} | |
| {"id": "visual/v08", "task": "visual", "cat": "svg", "kind": "svg", "animated": false, "prompt": "Draw a flowchart of a login process: Start -> Enter credentials -> Valid? (a diamond) -> yes: Dashboard; no: Show error -> back to Enter credentials. Use rounded boxes and arrows with arrowheads.\n\nDo not write the SVG by hand. Write a Python 3 program that draws it with the svgkit toolkit and prints it:\n from svgkit import *\n s = SVG(width, height, bg='#ffffff') # viewBox 0 0 width height; y grows downwards\nShapes (extra keyword arguments become SVG attributes, e.g. stroke='#333', stroke_width=3, opacity=0.8):\n s.rect(x, y, w, h, fill, rx=None), s.circle(cx, cy, r, fill), s.ellipse(cx, cy, rx, ry, fill, rotate=0),\n s.line(x1, y1, x2, y2, stroke, width), s.polyline(points, stroke, width), s.polygon(points, fill), s.path(d, fill),\n s.text(x, y, 'label', size=16, fill='#222', anchor='middle' | 'start' | 'end', weight='bold')\nGeometry (angles in degrees clockwise from 12 o'clock: 0 = up, 90 = right, 180 = down, 270 = left):\n polar(cx, cy, r, deg) -> (x, y); s.regular_polygon(cx, cy, r, n, rotate=0, fill=...);\n s.star(cx, cy, r_out, r_in, n=5, fill=...); s.slice(cx, cy, r, start_deg, end_deg, r_inner=0, fill=...)\n (pie slice, donut segment when r_inner > 0); s.arc(cx, cy, r, start_deg, end_deg, stroke, width) (open arc: gauges,\n rings, angle marks); s.radial_lines(cx, cy, r1, r2, n, start=0, stroke, width) (n evenly spaced ticks, rays,\n spokes); s.radial_text(cx, cy, r, ['A', 'B', 'C', 'D'], start=0, size=...) (labels evenly around a circle);\n s.smooth(points, closed=False, fill, stroke) (smooth curve through points); s.wave(x0, x1, y, amplitude,\n wavelength, bottom=None, fill) (bottom=y closes it into a filled band); s.arrow(x1, y1, x2, y2, stroke, width,\n head=10); s.connector(x1, y1, x2, y2) (arrow with right-angle bends).\nPaint: fill=s.linear_gradient([(0, '#87ceeb'), (1, '#ffffff')]) (top to bottom; x2=1, y2=0 for left to right),\n s.radial_gradient([...]), filter=s.shadow(), filter=s.glow(8).\nStructure: with s.group(translate=(x, y), rotate=(deg, cx, cy), scale=k): ...; with s.mirror(x): ... (everything\n drawn inside appears again mirrored around the vertical line x); with s.repeat_around(cx, cy, n): ... (what you draw\n pointing up from the centre is repeated n times around it). Later shapes are drawn on top of earlier ones.\nCharts: y = Scale((min_value, max_value), (bottom_px, top_px)); y(v) -> pixel; s.axis_y(y, x, values, x_end=...)\n (tick labels and grid lines), s.axis_x(y_px, x0, x1, labels, positions), s.legend(x, y, [(colour, label), ...]);\n mix(c1, c2, t) blends two colours.\n\nExample (a flower):\nfrom svgkit import *\ns = SVG(400, 400, bg='#eef6ee')\ns.line(200, 210, 200, 380, stroke='#3f7d3a', width=8)\nwith s.repeat_around(200, 170, 8):\n s.ellipse(200, 110, 26, 55, fill='#f472b6')\ns.circle(200, 170, 34, fill='#fbbf24')\nprint(s)\n\nAnswer with the program in a single ```python code block. It must print the finished SVG."} | |
| {"id": "visual/h01", "task": "visual", "cat": "html", "kind": "html", "animated": false, "prompt": "Build a landing page for a bakery called 'Golden Crust': a navigation bar, a hero section with a headline and a call-to-action button, three product cards with prices, and a footer. Use a warm color palette.\n\nUse the ui.css design system: put <link rel=\"stylesheet\" href=\"ui.css\"> in <head> and <script src=\"ui.js\"></script> at the end of <body> (the system inlines both). Write semantic HTML with its classes and add your own <style> only for details the kit does not cover.\nThemes: <body data-theme=\"warm|forest|ocean|dark\"> (default: indigo on light grey).\nLayout: .container (centred, max 1120px), .narrow, .section (vertical padding), .section-alt (tinted band),\n .section-title, .grid (auto-fit columns; style=\"--min:200px\" changes the column width), .grid-2 .grid-3 .grid-4,\n .row (flex row with gap; .between .end .top), .grow, .stack (vertical spacing),\n .layout-sidebar > .sidebar + .main (app layout), .topbar.\nNavigation and hero: .navbar > .container > .brand + .nav-links > a (.active); .hero (centred; h1 + p.lead + buttons),\n .hero.hero-dark.\nContent: .card (.card-hover, .featured), .media + .ph or .ph-1 ... .ph-8 (gradient image placeholders),\n .btn (.btn-outline .btn-ghost .btn-accent .btn-light .btn-danger .btn-lg .btn-sm .btn-block),\n .badge (.badge-primary .badge-success .badge-warning .badge-danger), .tags > .tag, .avatar (initials inside;\n .avatar-sm .avatar-lg), .icon (tile with an emoji or symbol), .price (with <small>/month</small>), .stars,\n .list-check (check-mark list; li.no shows a cross), .kpi > .value + .label (.up .down), .progress > span\n (style=\"width:60%\"), .eyebrow, .lead, .muted, .small, .center.\nForms: .field > label + input / select / textarea + .error; .check (checkbox or radio with its text); toggle switch:\n <label class=\"switch\"><input type=\"checkbox\"><span></span></label>; <input type=\"range\" data-show=\"outId\"> writes\n its value into #outId.\nTables: <table class=\"table\">, .num for right-aligned numbers; <table class=\"table\" data-sortable> with <th data-sort>\n or <th data-sort=\"number\"> sorts on click; wrap in .table-wrap for a sticky header.\nInteractive: tabs <div data-tabs><div class=\"tab-list\"><button>One</button><button>Two</button></div>\n <div class=\"tab-panel\">...</div><div class=\"tab-panel\">...</div></div>;\n accordion <details class=\"accordion\"><summary>Question</summary><p>Answer</p></details>;\n modal <button class=\"btn\" data-open=\"m1\">Open</button> <div class=\"modal\" id=\"m1\"><div class=\"modal-box\">\n <button class=\"close\" data-close>×</button>...</div></div> (Escape also closes);\n UI.toast('Saved', 'success' | 'warning' | 'error').\nAlso: .timeline > .item (alternating sides), .steps > .step (.active .done), .bubble.me / .bubble.them (chat),\n .prose (article text), blockquote, pre / code, figure + figcaption, .footer, .divider.\n\nExample (a card with a badge and two buttons):\n<div class=\"container section\"><div class=\"card\" style=\"max-width:420px\">\n <span class=\"badge badge-primary\">New</span><h3>Trail Backpack</h3><p class=\"muted\">Light, waterproof, 28 litres.</p>\n <div class=\"row between\"><span class=\"price\">$89</span><button class=\"btn\">Buy now</button></div>\n</div></div>\n\nAnswer with one complete HTML file in a single ```html code block. Do not copy the toolkit itself."} | |
| {"id": "visual/h02", "task": "visual", "cat": "html", "kind": "html", "animated": false, "prompt": "Build a pricing section with three plans (Basic $9/month, Pro $29/month highlighted as most popular, Enterprise $99/month), each with a feature list with check marks and a button.\n\nUse the ui.css design system: put <link rel=\"stylesheet\" href=\"ui.css\"> in <head> and <script src=\"ui.js\"></script> at the end of <body> (the system inlines both). Write semantic HTML with its classes and add your own <style> only for details the kit does not cover.\nThemes: <body data-theme=\"warm|forest|ocean|dark\"> (default: indigo on light grey).\nLayout: .container (centred, max 1120px), .narrow, .section (vertical padding), .section-alt (tinted band),\n .section-title, .grid (auto-fit columns; style=\"--min:200px\" changes the column width), .grid-2 .grid-3 .grid-4,\n .row (flex row with gap; .between .end .top), .grow, .stack (vertical spacing),\n .layout-sidebar > .sidebar + .main (app layout), .topbar.\nNavigation and hero: .navbar > .container > .brand + .nav-links > a (.active); .hero (centred; h1 + p.lead + buttons),\n .hero.hero-dark.\nContent: .card (.card-hover, .featured), .media + .ph or .ph-1 ... .ph-8 (gradient image placeholders),\n .btn (.btn-outline .btn-ghost .btn-accent .btn-light .btn-danger .btn-lg .btn-sm .btn-block),\n .badge (.badge-primary .badge-success .badge-warning .badge-danger), .tags > .tag, .avatar (initials inside;\n .avatar-sm .avatar-lg), .icon (tile with an emoji or symbol), .price (with <small>/month</small>), .stars,\n .list-check (check-mark list; li.no shows a cross), .kpi > .value + .label (.up .down), .progress > span\n (style=\"width:60%\"), .eyebrow, .lead, .muted, .small, .center.\nForms: .field > label + input / select / textarea + .error; .check (checkbox or radio with its text); toggle switch:\n <label class=\"switch\"><input type=\"checkbox\"><span></span></label>; <input type=\"range\" data-show=\"outId\"> writes\n its value into #outId.\nTables: <table class=\"table\">, .num for right-aligned numbers; <table class=\"table\" data-sortable> with <th data-sort>\n or <th data-sort=\"number\"> sorts on click; wrap in .table-wrap for a sticky header.\nInteractive: tabs <div data-tabs><div class=\"tab-list\"><button>One</button><button>Two</button></div>\n <div class=\"tab-panel\">...</div><div class=\"tab-panel\">...</div></div>;\n accordion <details class=\"accordion\"><summary>Question</summary><p>Answer</p></details>;\n modal <button class=\"btn\" data-open=\"m1\">Open</button> <div class=\"modal\" id=\"m1\"><div class=\"modal-box\">\n <button class=\"close\" data-close>×</button>...</div></div> (Escape also closes);\n UI.toast('Saved', 'success' | 'warning' | 'error').\nAlso: .timeline > .item (alternating sides), .steps > .step (.active .done), .bubble.me / .bubble.them (chat),\n .prose (article text), blockquote, pre / code, figure + figcaption, .footer, .divider.\n\nExample (a card with a badge and two buttons):\n<div class=\"container section\"><div class=\"card\" style=\"max-width:420px\">\n <span class=\"badge badge-primary\">New</span><h3>Trail Backpack</h3><p class=\"muted\">Light, waterproof, 28 litres.</p>\n <div class=\"row between\"><span class=\"price\">$89</span><button class=\"btn\">Buy now</button></div>\n</div></div>\n\nAnswer with one complete HTML file in a single ```html code block. Do not copy the toolkit itself."} | |
| {"id": "visual/h03", "task": "visual", "cat": "html", "kind": "html", "animated": false, "prompt": "Build a centered login card on a gradient background: app title, email and password inputs with labels, a 'Remember me' checkbox, a primary sign-in button and a 'Forgot password?' link.\n\nUse the ui.css design system: put <link rel=\"stylesheet\" href=\"ui.css\"> in <head> and <script src=\"ui.js\"></script> at the end of <body> (the system inlines both). Write semantic HTML with its classes and add your own <style> only for details the kit does not cover.\nThemes: <body data-theme=\"warm|forest|ocean|dark\"> (default: indigo on light grey).\nLayout: .container (centred, max 1120px), .narrow, .section (vertical padding), .section-alt (tinted band),\n .section-title, .grid (auto-fit columns; style=\"--min:200px\" changes the column width), .grid-2 .grid-3 .grid-4,\n .row (flex row with gap; .between .end .top), .grow, .stack (vertical spacing),\n .layout-sidebar > .sidebar + .main (app layout), .topbar.\nNavigation and hero: .navbar > .container > .brand + .nav-links > a (.active); .hero (centred; h1 + p.lead + buttons),\n .hero.hero-dark.\nContent: .card (.card-hover, .featured), .media + .ph or .ph-1 ... .ph-8 (gradient image placeholders),\n .btn (.btn-outline .btn-ghost .btn-accent .btn-light .btn-danger .btn-lg .btn-sm .btn-block),\n .badge (.badge-primary .badge-success .badge-warning .badge-danger), .tags > .tag, .avatar (initials inside;\n .avatar-sm .avatar-lg), .icon (tile with an emoji or symbol), .price (with <small>/month</small>), .stars,\n .list-check (check-mark list; li.no shows a cross), .kpi > .value + .label (.up .down), .progress > span\n (style=\"width:60%\"), .eyebrow, .lead, .muted, .small, .center.\nForms: .field > label + input / select / textarea + .error; .check (checkbox or radio with its text); toggle switch:\n <label class=\"switch\"><input type=\"checkbox\"><span></span></label>; <input type=\"range\" data-show=\"outId\"> writes\n its value into #outId.\nTables: <table class=\"table\">, .num for right-aligned numbers; <table class=\"table\" data-sortable> with <th data-sort>\n or <th data-sort=\"number\"> sorts on click; wrap in .table-wrap for a sticky header.\nInteractive: tabs <div data-tabs><div class=\"tab-list\"><button>One</button><button>Two</button></div>\n <div class=\"tab-panel\">...</div><div class=\"tab-panel\">...</div></div>;\n accordion <details class=\"accordion\"><summary>Question</summary><p>Answer</p></details>;\n modal <button class=\"btn\" data-open=\"m1\">Open</button> <div class=\"modal\" id=\"m1\"><div class=\"modal-box\">\n <button class=\"close\" data-close>×</button>...</div></div> (Escape also closes);\n UI.toast('Saved', 'success' | 'warning' | 'error').\nAlso: .timeline > .item (alternating sides), .steps > .step (.active .done), .bubble.me / .bubble.them (chat),\n .prose (article text), blockquote, pre / code, figure + figcaption, .footer, .divider.\n\nExample (a card with a badge and two buttons):\n<div class=\"container section\"><div class=\"card\" style=\"max-width:420px\">\n <span class=\"badge badge-primary\">New</span><h3>Trail Backpack</h3><p class=\"muted\">Light, waterproof, 28 litres.</p>\n <div class=\"row between\"><span class=\"price\">$89</span><button class=\"btn\">Buy now</button></div>\n</div></div>\n\nAnswer with one complete HTML file in a single ```html code block. Do not copy the toolkit itself."} | |
| {"id": "visual/h04", "task": "visual", "cat": "html", "kind": "html", "animated": false, "prompt": "Build an admin dashboard layout: a left sidebar with 5 menu items (one active), a top bar with a search field and an avatar, four KPI cards (Revenue, Users, Orders, Conversion) and a table of 5 recent orders.\n\nUse the ui.css design system: put <link rel=\"stylesheet\" href=\"ui.css\"> in <head> and <script src=\"ui.js\"></script> at the end of <body> (the system inlines both). Write semantic HTML with its classes and add your own <style> only for details the kit does not cover.\nThemes: <body data-theme=\"warm|forest|ocean|dark\"> (default: indigo on light grey).\nLayout: .container (centred, max 1120px), .narrow, .section (vertical padding), .section-alt (tinted band),\n .section-title, .grid (auto-fit columns; style=\"--min:200px\" changes the column width), .grid-2 .grid-3 .grid-4,\n .row (flex row with gap; .between .end .top), .grow, .stack (vertical spacing),\n .layout-sidebar > .sidebar + .main (app layout), .topbar.\nNavigation and hero: .navbar > .container > .brand + .nav-links > a (.active); .hero (centred; h1 + p.lead + buttons),\n .hero.hero-dark.\nContent: .card (.card-hover, .featured), .media + .ph or .ph-1 ... .ph-8 (gradient image placeholders),\n .btn (.btn-outline .btn-ghost .btn-accent .btn-light .btn-danger .btn-lg .btn-sm .btn-block),\n .badge (.badge-primary .badge-success .badge-warning .badge-danger), .tags > .tag, .avatar (initials inside;\n .avatar-sm .avatar-lg), .icon (tile with an emoji or symbol), .price (with <small>/month</small>), .stars,\n .list-check (check-mark list; li.no shows a cross), .kpi > .value + .label (.up .down), .progress > span\n (style=\"width:60%\"), .eyebrow, .lead, .muted, .small, .center.\nForms: .field > label + input / select / textarea + .error; .check (checkbox or radio with its text); toggle switch:\n <label class=\"switch\"><input type=\"checkbox\"><span></span></label>; <input type=\"range\" data-show=\"outId\"> writes\n its value into #outId.\nTables: <table class=\"table\">, .num for right-aligned numbers; <table class=\"table\" data-sortable> with <th data-sort>\n or <th data-sort=\"number\"> sorts on click; wrap in .table-wrap for a sticky header.\nInteractive: tabs <div data-tabs><div class=\"tab-list\"><button>One</button><button>Two</button></div>\n <div class=\"tab-panel\">...</div><div class=\"tab-panel\">...</div></div>;\n accordion <details class=\"accordion\"><summary>Question</summary><p>Answer</p></details>;\n modal <button class=\"btn\" data-open=\"m1\">Open</button> <div class=\"modal\" id=\"m1\"><div class=\"modal-box\">\n <button class=\"close\" data-close>×</button>...</div></div> (Escape also closes);\n UI.toast('Saved', 'success' | 'warning' | 'error').\nAlso: .timeline > .item (alternating sides), .steps > .step (.active .done), .bubble.me / .bubble.them (chat),\n .prose (article text), blockquote, pre / code, figure + figcaption, .footer, .divider.\n\nExample (a card with a badge and two buttons):\n<div class=\"container section\"><div class=\"card\" style=\"max-width:420px\">\n <span class=\"badge badge-primary\">New</span><h3>Trail Backpack</h3><p class=\"muted\">Light, waterproof, 28 litres.</p>\n <div class=\"row between\"><span class=\"price\">$89</span><button class=\"btn\">Buy now</button></div>\n</div></div>\n\nAnswer with one complete HTML file in a single ```html code block. Do not copy the toolkit itself."} | |
| {"id": "visual/h05", "task": "visual", "cat": "html", "kind": "html", "animated": false, "prompt": "Build a responsive photo gallery grid of 12 tiles (use CSS gradients as placeholder images) with captions that appear on hover.\n\nUse the ui.css design system: put <link rel=\"stylesheet\" href=\"ui.css\"> in <head> and <script src=\"ui.js\"></script> at the end of <body> (the system inlines both). Write semantic HTML with its classes and add your own <style> only for details the kit does not cover.\nThemes: <body data-theme=\"warm|forest|ocean|dark\"> (default: indigo on light grey).\nLayout: .container (centred, max 1120px), .narrow, .section (vertical padding), .section-alt (tinted band),\n .section-title, .grid (auto-fit columns; style=\"--min:200px\" changes the column width), .grid-2 .grid-3 .grid-4,\n .row (flex row with gap; .between .end .top), .grow, .stack (vertical spacing),\n .layout-sidebar > .sidebar + .main (app layout), .topbar.\nNavigation and hero: .navbar > .container > .brand + .nav-links > a (.active); .hero (centred; h1 + p.lead + buttons),\n .hero.hero-dark.\nContent: .card (.card-hover, .featured), .media + .ph or .ph-1 ... .ph-8 (gradient image placeholders),\n .btn (.btn-outline .btn-ghost .btn-accent .btn-light .btn-danger .btn-lg .btn-sm .btn-block),\n .badge (.badge-primary .badge-success .badge-warning .badge-danger), .tags > .tag, .avatar (initials inside;\n .avatar-sm .avatar-lg), .icon (tile with an emoji or symbol), .price (with <small>/month</small>), .stars,\n .list-check (check-mark list; li.no shows a cross), .kpi > .value + .label (.up .down), .progress > span\n (style=\"width:60%\"), .eyebrow, .lead, .muted, .small, .center.\nForms: .field > label + input / select / textarea + .error; .check (checkbox or radio with its text); toggle switch:\n <label class=\"switch\"><input type=\"checkbox\"><span></span></label>; <input type=\"range\" data-show=\"outId\"> writes\n its value into #outId.\nTables: <table class=\"table\">, .num for right-aligned numbers; <table class=\"table\" data-sortable> with <th data-sort>\n or <th data-sort=\"number\"> sorts on click; wrap in .table-wrap for a sticky header.\nInteractive: tabs <div data-tabs><div class=\"tab-list\"><button>One</button><button>Two</button></div>\n <div class=\"tab-panel\">...</div><div class=\"tab-panel\">...</div></div>;\n accordion <details class=\"accordion\"><summary>Question</summary><p>Answer</p></details>;\n modal <button class=\"btn\" data-open=\"m1\">Open</button> <div class=\"modal\" id=\"m1\"><div class=\"modal-box\">\n <button class=\"close\" data-close>×</button>...</div></div> (Escape also closes);\n UI.toast('Saved', 'success' | 'warning' | 'error').\nAlso: .timeline > .item (alternating sides), .steps > .step (.active .done), .bubble.me / .bubble.them (chat),\n .prose (article text), blockquote, pre / code, figure + figcaption, .footer, .divider.\n\nExample (a card with a badge and two buttons):\n<div class=\"container section\"><div class=\"card\" style=\"max-width:420px\">\n <span class=\"badge badge-primary\">New</span><h3>Trail Backpack</h3><p class=\"muted\">Light, waterproof, 28 litres.</p>\n <div class=\"row between\"><span class=\"price\">$89</span><button class=\"btn\">Buy now</button></div>\n</div></div>\n\nAnswer with one complete HTML file in a single ```html code block. Do not copy the toolkit itself."} | |
| {"id": "visual/h06", "task": "visual", "cat": "html", "kind": "html", "animated": false, "prompt": "Build a blog article page with good typography: title, author and date, a lead paragraph, two subheadings, a blockquote, a code snippet block and an image placeholder with a caption.\n\nUse the ui.css design system: put <link rel=\"stylesheet\" href=\"ui.css\"> in <head> and <script src=\"ui.js\"></script> at the end of <body> (the system inlines both). Write semantic HTML with its classes and add your own <style> only for details the kit does not cover.\nThemes: <body data-theme=\"warm|forest|ocean|dark\"> (default: indigo on light grey).\nLayout: .container (centred, max 1120px), .narrow, .section (vertical padding), .section-alt (tinted band),\n .section-title, .grid (auto-fit columns; style=\"--min:200px\" changes the column width), .grid-2 .grid-3 .grid-4,\n .row (flex row with gap; .between .end .top), .grow, .stack (vertical spacing),\n .layout-sidebar > .sidebar + .main (app layout), .topbar.\nNavigation and hero: .navbar > .container > .brand + .nav-links > a (.active); .hero (centred; h1 + p.lead + buttons),\n .hero.hero-dark.\nContent: .card (.card-hover, .featured), .media + .ph or .ph-1 ... .ph-8 (gradient image placeholders),\n .btn (.btn-outline .btn-ghost .btn-accent .btn-light .btn-danger .btn-lg .btn-sm .btn-block),\n .badge (.badge-primary .badge-success .badge-warning .badge-danger), .tags > .tag, .avatar (initials inside;\n .avatar-sm .avatar-lg), .icon (tile with an emoji or symbol), .price (with <small>/month</small>), .stars,\n .list-check (check-mark list; li.no shows a cross), .kpi > .value + .label (.up .down), .progress > span\n (style=\"width:60%\"), .eyebrow, .lead, .muted, .small, .center.\nForms: .field > label + input / select / textarea + .error; .check (checkbox or radio with its text); toggle switch:\n <label class=\"switch\"><input type=\"checkbox\"><span></span></label>; <input type=\"range\" data-show=\"outId\"> writes\n its value into #outId.\nTables: <table class=\"table\">, .num for right-aligned numbers; <table class=\"table\" data-sortable> with <th data-sort>\n or <th data-sort=\"number\"> sorts on click; wrap in .table-wrap for a sticky header.\nInteractive: tabs <div data-tabs><div class=\"tab-list\"><button>One</button><button>Two</button></div>\n <div class=\"tab-panel\">...</div><div class=\"tab-panel\">...</div></div>;\n accordion <details class=\"accordion\"><summary>Question</summary><p>Answer</p></details>;\n modal <button class=\"btn\" data-open=\"m1\">Open</button> <div class=\"modal\" id=\"m1\"><div class=\"modal-box\">\n <button class=\"close\" data-close>×</button>...</div></div> (Escape also closes);\n UI.toast('Saved', 'success' | 'warning' | 'error').\nAlso: .timeline > .item (alternating sides), .steps > .step (.active .done), .bubble.me / .bubble.them (chat),\n .prose (article text), blockquote, pre / code, figure + figcaption, .footer, .divider.\n\nExample (a card with a badge and two buttons):\n<div class=\"container section\"><div class=\"card\" style=\"max-width:420px\">\n <span class=\"badge badge-primary\">New</span><h3>Trail Backpack</h3><p class=\"muted\">Light, waterproof, 28 litres.</p>\n <div class=\"row between\"><span class=\"price\">$89</span><button class=\"btn\">Buy now</button></div>\n</div></div>\n\nAnswer with one complete HTML file in a single ```html code block. Do not copy the toolkit itself."} | |
| {"id": "visual/h07", "task": "visual", "cat": "html", "kind": "html", "animated": true, "prompt": "Build a CSS-only animated loading indicator centered on the page: three bouncing dots and a circular spinner below them.\n\nUse the ui.css design system: put <link rel=\"stylesheet\" href=\"ui.css\"> in <head> and <script src=\"ui.js\"></script> at the end of <body> (the system inlines both). Write semantic HTML with its classes and add your own <style> only for details the kit does not cover.\nThemes: <body data-theme=\"warm|forest|ocean|dark\"> (default: indigo on light grey).\nLayout: .container (centred, max 1120px), .narrow, .section (vertical padding), .section-alt (tinted band),\n .section-title, .grid (auto-fit columns; style=\"--min:200px\" changes the column width), .grid-2 .grid-3 .grid-4,\n .row (flex row with gap; .between .end .top), .grow, .stack (vertical spacing),\n .layout-sidebar > .sidebar + .main (app layout), .topbar.\nNavigation and hero: .navbar > .container > .brand + .nav-links > a (.active); .hero (centred; h1 + p.lead + buttons),\n .hero.hero-dark.\nContent: .card (.card-hover, .featured), .media + .ph or .ph-1 ... .ph-8 (gradient image placeholders),\n .btn (.btn-outline .btn-ghost .btn-accent .btn-light .btn-danger .btn-lg .btn-sm .btn-block),\n .badge (.badge-primary .badge-success .badge-warning .badge-danger), .tags > .tag, .avatar (initials inside;\n .avatar-sm .avatar-lg), .icon (tile with an emoji or symbol), .price (with <small>/month</small>), .stars,\n .list-check (check-mark list; li.no shows a cross), .kpi > .value + .label (.up .down), .progress > span\n (style=\"width:60%\"), .eyebrow, .lead, .muted, .small, .center.\nForms: .field > label + input / select / textarea + .error; .check (checkbox or radio with its text); toggle switch:\n <label class=\"switch\"><input type=\"checkbox\"><span></span></label>; <input type=\"range\" data-show=\"outId\"> writes\n its value into #outId.\nTables: <table class=\"table\">, .num for right-aligned numbers; <table class=\"table\" data-sortable> with <th data-sort>\n or <th data-sort=\"number\"> sorts on click; wrap in .table-wrap for a sticky header.\nInteractive: tabs <div data-tabs><div class=\"tab-list\"><button>One</button><button>Two</button></div>\n <div class=\"tab-panel\">...</div><div class=\"tab-panel\">...</div></div>;\n accordion <details class=\"accordion\"><summary>Question</summary><p>Answer</p></details>;\n modal <button class=\"btn\" data-open=\"m1\">Open</button> <div class=\"modal\" id=\"m1\"><div class=\"modal-box\">\n <button class=\"close\" data-close>×</button>...</div></div> (Escape also closes);\n UI.toast('Saved', 'success' | 'warning' | 'error').\nAlso: .timeline > .item (alternating sides), .steps > .step (.active .done), .bubble.me / .bubble.them (chat),\n .prose (article text), blockquote, pre / code, figure + figcaption, .footer, .divider.\n\nExample (a card with a badge and two buttons):\n<div class=\"container section\"><div class=\"card\" style=\"max-width:420px\">\n <span class=\"badge badge-primary\">New</span><h3>Trail Backpack</h3><p class=\"muted\">Light, waterproof, 28 litres.</p>\n <div class=\"row between\"><span class=\"price\">$89</span><button class=\"btn\">Buy now</button></div>\n</div></div>\n\nAnswer with one complete HTML file in a single ```html code block. Do not copy the toolkit itself."} | |
| {"id": "visual/h08", "task": "visual", "cat": "html", "kind": "html", "animated": false, "prompt": "Build a restaurant menu page with three sections (Starters, Mains, Desserts), each with 3-4 dishes with short descriptions and right-aligned prices joined by dotted leaders.\n\nUse the ui.css design system: put <link rel=\"stylesheet\" href=\"ui.css\"> in <head> and <script src=\"ui.js\"></script> at the end of <body> (the system inlines both). Write semantic HTML with its classes and add your own <style> only for details the kit does not cover.\nThemes: <body data-theme=\"warm|forest|ocean|dark\"> (default: indigo on light grey).\nLayout: .container (centred, max 1120px), .narrow, .section (vertical padding), .section-alt (tinted band),\n .section-title, .grid (auto-fit columns; style=\"--min:200px\" changes the column width), .grid-2 .grid-3 .grid-4,\n .row (flex row with gap; .between .end .top), .grow, .stack (vertical spacing),\n .layout-sidebar > .sidebar + .main (app layout), .topbar.\nNavigation and hero: .navbar > .container > .brand + .nav-links > a (.active); .hero (centred; h1 + p.lead + buttons),\n .hero.hero-dark.\nContent: .card (.card-hover, .featured), .media + .ph or .ph-1 ... .ph-8 (gradient image placeholders),\n .btn (.btn-outline .btn-ghost .btn-accent .btn-light .btn-danger .btn-lg .btn-sm .btn-block),\n .badge (.badge-primary .badge-success .badge-warning .badge-danger), .tags > .tag, .avatar (initials inside;\n .avatar-sm .avatar-lg), .icon (tile with an emoji or symbol), .price (with <small>/month</small>), .stars,\n .list-check (check-mark list; li.no shows a cross), .kpi > .value + .label (.up .down), .progress > span\n (style=\"width:60%\"), .eyebrow, .lead, .muted, .small, .center.\nForms: .field > label + input / select / textarea + .error; .check (checkbox or radio with its text); toggle switch:\n <label class=\"switch\"><input type=\"checkbox\"><span></span></label>; <input type=\"range\" data-show=\"outId\"> writes\n its value into #outId.\nTables: <table class=\"table\">, .num for right-aligned numbers; <table class=\"table\" data-sortable> with <th data-sort>\n or <th data-sort=\"number\"> sorts on click; wrap in .table-wrap for a sticky header.\nInteractive: tabs <div data-tabs><div class=\"tab-list\"><button>One</button><button>Two</button></div>\n <div class=\"tab-panel\">...</div><div class=\"tab-panel\">...</div></div>;\n accordion <details class=\"accordion\"><summary>Question</summary><p>Answer</p></details>;\n modal <button class=\"btn\" data-open=\"m1\">Open</button> <div class=\"modal\" id=\"m1\"><div class=\"modal-box\">\n <button class=\"close\" data-close>×</button>...</div></div> (Escape also closes);\n UI.toast('Saved', 'success' | 'warning' | 'error').\nAlso: .timeline > .item (alternating sides), .steps > .step (.active .done), .bubble.me / .bubble.them (chat),\n .prose (article text), blockquote, pre / code, figure + figcaption, .footer, .divider.\n\nExample (a card with a badge and two buttons):\n<div class=\"container section\"><div class=\"card\" style=\"max-width:420px\">\n <span class=\"badge badge-primary\">New</span><h3>Trail Backpack</h3><p class=\"muted\">Light, waterproof, 28 litres.</p>\n <div class=\"row between\"><span class=\"price\">$89</span><button class=\"btn\">Buy now</button></div>\n</div></div>\n\nAnswer with one complete HTML file in a single ```html code block. Do not copy the toolkit itself."} | |
| {"id": "visual/c01", "task": "visual", "cat": "canvas", "kind": "html", "animated": true, "prompt": "Make a canvas animation of 20 colorful balls bouncing off the walls with gravity and slight energy loss.\n\nUse the kit2d toolkit. The page already contains it as the global Kit: it creates a full-window canvas and runs the animation loop, so you only write what to draw and how things move.\n const app = Kit.canvas({ background: '#101820', trail: 0 });\n app.ctx (2D context), app.w, app.h (size), app.mouse {x, y, down}, app.keys (Set of pressed key names), app.t\n app.frame((dt, t) => { ...update, then draw... }) every frame (dt, t in seconds); the screen is cleared first\n (trail between 0 and 1 fades the previous frame instead, for motion trails).\n app.onClick((x, y) => ...), app.onKey((key) => ...)\nDrawing (ctx = app.ctx): Kit.circle(ctx, x, y, r, fill, stroke, lineWidth), Kit.ellipse(ctx, x, y, rx, ry, rotation,\n fill), Kit.rect(ctx, x, y, w, h, fill, stroke, lineWidth, radius), Kit.line(ctx, x1, y1, x2, y2, stroke, width),\n Kit.poly(ctx, [[x,y],...], fill, stroke), Kit.arc(ctx, x, y, r, fromDeg, toDeg, stroke, width),\n Kit.text(ctx, 'text', x, y, { size, color, align, baseline, weight }), Kit.glow(ctx, blur, color), Kit.noGlow(ctx).\nMath: Kit.polar(cx, cy, r, deg) -> [x, y] with 0 deg = up, clockwise; Kit.rand(a, b), Kit.randInt(a, b),\n Kit.choice(array), Kit.clamp(v, a, b), Kit.lerp(a, b, t), Kit.dist(x1, y1, x2, y2), Kit.hsl(h, s, l, a),\n Kit.ease.inOut(t) / Kit.ease.out(t).\nCollisions: Kit.circlesHit(a, b) for {x, y, r}; Kit.rectsHit(a, b) for {x, y, w, h}; Kit.circleRectHit(circle, rect).\nParticles: const ps = Kit.particles(); ps.add({ x, y, vx, vy, life, size, color }); ps.update(dt, { gravity, drag,\n wind }); ps.draw(ctx, { additive: true, shrink: true }) (velocities in pixels per second, life in seconds).\nGrid: const g = Kit.grid(cols, rows); g.get(c, r), g.set(c, r, v); g.layout(app) -> { size, x0, y0 } (square cells\n that fit the screen and the top-left corner of the grid).\nOverlays: Kit.hud('Score: 3') (top-left text), Kit.message('Game over', true) / Kit.message('', false),\n Kit.button('Restart', onClick, { top: '20px', right: '20px' }).\n\nExample (a square moving along a curve with a trail; clicks add dots):\n<script>\nconst app = Kit.canvas({ background: '#0f172a', trail: 0.15 });\nconst dots = [];\napp.onClick((x, y) => dots.push({ x, y, r: Kit.rand(6, 14) }));\napp.frame((dt, t) => {\n const x = app.w / 2 + Math.sin(t) * 200, y = app.h / 2 + Math.cos(t * 2) * 80;\n Kit.rect(app.ctx, x - 20, y - 20, 40, 40, Kit.hsl((t * 60) % 360), null, 0, 8);\n for (const d of dots) Kit.circle(app.ctx, d.x, d.y, d.r, '#f8fafc');\n Kit.hud('Dots: ' + dots.length);\n});\n</script>\n\nAnswer with one complete HTML file in a single ```html code block with your code in a <script> at the end of <body>. Do not copy the toolkit itself and do not use other libraries."} | |
| {"id": "visual/c02", "task": "visual", "cat": "canvas", "kind": "html", "animated": true, "prompt": "Make a live analog clock drawn on a canvas that shows the current time with smoothly moving hands.\n\nUse the kit2d toolkit. The page already contains it as the global Kit: it creates a full-window canvas and runs the animation loop, so you only write what to draw and how things move.\n const app = Kit.canvas({ background: '#101820', trail: 0 });\n app.ctx (2D context), app.w, app.h (size), app.mouse {x, y, down}, app.keys (Set of pressed key names), app.t\n app.frame((dt, t) => { ...update, then draw... }) every frame (dt, t in seconds); the screen is cleared first\n (trail between 0 and 1 fades the previous frame instead, for motion trails).\n app.onClick((x, y) => ...), app.onKey((key) => ...)\nDrawing (ctx = app.ctx): Kit.circle(ctx, x, y, r, fill, stroke, lineWidth), Kit.ellipse(ctx, x, y, rx, ry, rotation,\n fill), Kit.rect(ctx, x, y, w, h, fill, stroke, lineWidth, radius), Kit.line(ctx, x1, y1, x2, y2, stroke, width),\n Kit.poly(ctx, [[x,y],...], fill, stroke), Kit.arc(ctx, x, y, r, fromDeg, toDeg, stroke, width),\n Kit.text(ctx, 'text', x, y, { size, color, align, baseline, weight }), Kit.glow(ctx, blur, color), Kit.noGlow(ctx).\nMath: Kit.polar(cx, cy, r, deg) -> [x, y] with 0 deg = up, clockwise; Kit.rand(a, b), Kit.randInt(a, b),\n Kit.choice(array), Kit.clamp(v, a, b), Kit.lerp(a, b, t), Kit.dist(x1, y1, x2, y2), Kit.hsl(h, s, l, a),\n Kit.ease.inOut(t) / Kit.ease.out(t).\nCollisions: Kit.circlesHit(a, b) for {x, y, r}; Kit.rectsHit(a, b) for {x, y, w, h}; Kit.circleRectHit(circle, rect).\nParticles: const ps = Kit.particles(); ps.add({ x, y, vx, vy, life, size, color }); ps.update(dt, { gravity, drag,\n wind }); ps.draw(ctx, { additive: true, shrink: true }) (velocities in pixels per second, life in seconds).\nGrid: const g = Kit.grid(cols, rows); g.get(c, r), g.set(c, r, v); g.layout(app) -> { size, x0, y0 } (square cells\n that fit the screen and the top-left corner of the grid).\nOverlays: Kit.hud('Score: 3') (top-left text), Kit.message('Game over', true) / Kit.message('', false),\n Kit.button('Restart', onClick, { top: '20px', right: '20px' }).\n\nExample (a square moving along a curve with a trail; clicks add dots):\n<script>\nconst app = Kit.canvas({ background: '#0f172a', trail: 0.15 });\nconst dots = [];\napp.onClick((x, y) => dots.push({ x, y, r: Kit.rand(6, 14) }));\napp.frame((dt, t) => {\n const x = app.w / 2 + Math.sin(t) * 200, y = app.h / 2 + Math.cos(t * 2) * 80;\n Kit.rect(app.ctx, x - 20, y - 20, 40, 40, Kit.hsl((t * 60) % 360), null, 0, 8);\n for (const d of dots) Kit.circle(app.ctx, d.x, d.y, d.r, '#f8fafc');\n Kit.hud('Dots: ' + dots.length);\n});\n</script>\n\nAnswer with one complete HTML file in a single ```html code block with your code in a <script> at the end of <body>. Do not copy the toolkit itself and do not use other libraries."} | |
| {"id": "visual/c03", "task": "visual", "cat": "canvas", "kind": "html", "animated": true, "prompt": "Make a particle fountain on a canvas: particles emitted from the bottom center rise and fall with gravity, fade out, and glow (additive blending).\n\nUse the kit2d toolkit. The page already contains it as the global Kit: it creates a full-window canvas and runs the animation loop, so you only write what to draw and how things move.\n const app = Kit.canvas({ background: '#101820', trail: 0 });\n app.ctx (2D context), app.w, app.h (size), app.mouse {x, y, down}, app.keys (Set of pressed key names), app.t\n app.frame((dt, t) => { ...update, then draw... }) every frame (dt, t in seconds); the screen is cleared first\n (trail between 0 and 1 fades the previous frame instead, for motion trails).\n app.onClick((x, y) => ...), app.onKey((key) => ...)\nDrawing (ctx = app.ctx): Kit.circle(ctx, x, y, r, fill, stroke, lineWidth), Kit.ellipse(ctx, x, y, rx, ry, rotation,\n fill), Kit.rect(ctx, x, y, w, h, fill, stroke, lineWidth, radius), Kit.line(ctx, x1, y1, x2, y2, stroke, width),\n Kit.poly(ctx, [[x,y],...], fill, stroke), Kit.arc(ctx, x, y, r, fromDeg, toDeg, stroke, width),\n Kit.text(ctx, 'text', x, y, { size, color, align, baseline, weight }), Kit.glow(ctx, blur, color), Kit.noGlow(ctx).\nMath: Kit.polar(cx, cy, r, deg) -> [x, y] with 0 deg = up, clockwise; Kit.rand(a, b), Kit.randInt(a, b),\n Kit.choice(array), Kit.clamp(v, a, b), Kit.lerp(a, b, t), Kit.dist(x1, y1, x2, y2), Kit.hsl(h, s, l, a),\n Kit.ease.inOut(t) / Kit.ease.out(t).\nCollisions: Kit.circlesHit(a, b) for {x, y, r}; Kit.rectsHit(a, b) for {x, y, w, h}; Kit.circleRectHit(circle, rect).\nParticles: const ps = Kit.particles(); ps.add({ x, y, vx, vy, life, size, color }); ps.update(dt, { gravity, drag,\n wind }); ps.draw(ctx, { additive: true, shrink: true }) (velocities in pixels per second, life in seconds).\nGrid: const g = Kit.grid(cols, rows); g.get(c, r), g.set(c, r, v); g.layout(app) -> { size, x0, y0 } (square cells\n that fit the screen and the top-left corner of the grid).\nOverlays: Kit.hud('Score: 3') (top-left text), Kit.message('Game over', true) / Kit.message('', false),\n Kit.button('Restart', onClick, { top: '20px', right: '20px' }).\n\nExample (a square moving along a curve with a trail; clicks add dots):\n<script>\nconst app = Kit.canvas({ background: '#0f172a', trail: 0.15 });\nconst dots = [];\napp.onClick((x, y) => dots.push({ x, y, r: Kit.rand(6, 14) }));\napp.frame((dt, t) => {\n const x = app.w / 2 + Math.sin(t) * 200, y = app.h / 2 + Math.cos(t * 2) * 80;\n Kit.rect(app.ctx, x - 20, y - 20, 40, 40, Kit.hsl((t * 60) % 360), null, 0, 8);\n for (const d of dots) Kit.circle(app.ctx, d.x, d.y, d.r, '#f8fafc');\n Kit.hud('Dots: ' + dots.length);\n});\n</script>\n\nAnswer with one complete HTML file in a single ```html code block with your code in a <script> at the end of <body>. Do not copy the toolkit itself and do not use other libraries."} | |
| {"id": "visual/c04", "task": "visual", "cat": "canvas", "kind": "html", "animated": true, "prompt": "Make Conway's Game of Life on a 60x40 grid on a canvas: random start, several updates per second, and a generation counter.\n\nUse the kit2d toolkit. The page already contains it as the global Kit: it creates a full-window canvas and runs the animation loop, so you only write what to draw and how things move.\n const app = Kit.canvas({ background: '#101820', trail: 0 });\n app.ctx (2D context), app.w, app.h (size), app.mouse {x, y, down}, app.keys (Set of pressed key names), app.t\n app.frame((dt, t) => { ...update, then draw... }) every frame (dt, t in seconds); the screen is cleared first\n (trail between 0 and 1 fades the previous frame instead, for motion trails).\n app.onClick((x, y) => ...), app.onKey((key) => ...)\nDrawing (ctx = app.ctx): Kit.circle(ctx, x, y, r, fill, stroke, lineWidth), Kit.ellipse(ctx, x, y, rx, ry, rotation,\n fill), Kit.rect(ctx, x, y, w, h, fill, stroke, lineWidth, radius), Kit.line(ctx, x1, y1, x2, y2, stroke, width),\n Kit.poly(ctx, [[x,y],...], fill, stroke), Kit.arc(ctx, x, y, r, fromDeg, toDeg, stroke, width),\n Kit.text(ctx, 'text', x, y, { size, color, align, baseline, weight }), Kit.glow(ctx, blur, color), Kit.noGlow(ctx).\nMath: Kit.polar(cx, cy, r, deg) -> [x, y] with 0 deg = up, clockwise; Kit.rand(a, b), Kit.randInt(a, b),\n Kit.choice(array), Kit.clamp(v, a, b), Kit.lerp(a, b, t), Kit.dist(x1, y1, x2, y2), Kit.hsl(h, s, l, a),\n Kit.ease.inOut(t) / Kit.ease.out(t).\nCollisions: Kit.circlesHit(a, b) for {x, y, r}; Kit.rectsHit(a, b) for {x, y, w, h}; Kit.circleRectHit(circle, rect).\nParticles: const ps = Kit.particles(); ps.add({ x, y, vx, vy, life, size, color }); ps.update(dt, { gravity, drag,\n wind }); ps.draw(ctx, { additive: true, shrink: true }) (velocities in pixels per second, life in seconds).\nGrid: const g = Kit.grid(cols, rows); g.get(c, r), g.set(c, r, v); g.layout(app) -> { size, x0, y0 } (square cells\n that fit the screen and the top-left corner of the grid).\nOverlays: Kit.hud('Score: 3') (top-left text), Kit.message('Game over', true) / Kit.message('', false),\n Kit.button('Restart', onClick, { top: '20px', right: '20px' }).\n\nExample (a square moving along a curve with a trail; clicks add dots):\n<script>\nconst app = Kit.canvas({ background: '#0f172a', trail: 0.15 });\nconst dots = [];\napp.onClick((x, y) => dots.push({ x, y, r: Kit.rand(6, 14) }));\napp.frame((dt, t) => {\n const x = app.w / 2 + Math.sin(t) * 200, y = app.h / 2 + Math.cos(t * 2) * 80;\n Kit.rect(app.ctx, x - 20, y - 20, 40, 40, Kit.hsl((t * 60) % 360), null, 0, 8);\n for (const d of dots) Kit.circle(app.ctx, d.x, d.y, d.r, '#f8fafc');\n Kit.hud('Dots: ' + dots.length);\n});\n</script>\n\nAnswer with one complete HTML file in a single ```html code block with your code in a <script> at the end of <body>. Do not copy the toolkit itself and do not use other libraries."} | |
| {"id": "visual/c05", "task": "visual", "cat": "canvas", "kind": "html", "animated": false, "prompt": "Draw an animated bar chart on a canvas of monthly sales (Jan 120, Feb 150, Mar 90, Apr 180, May 210, Jun 160) with axes, labels and values; the bars grow from zero when the page loads.\n\nUse the kit2d toolkit. The page already contains it as the global Kit: it creates a full-window canvas and runs the animation loop, so you only write what to draw and how things move.\n const app = Kit.canvas({ background: '#101820', trail: 0 });\n app.ctx (2D context), app.w, app.h (size), app.mouse {x, y, down}, app.keys (Set of pressed key names), app.t\n app.frame((dt, t) => { ...update, then draw... }) every frame (dt, t in seconds); the screen is cleared first\n (trail between 0 and 1 fades the previous frame instead, for motion trails).\n app.onClick((x, y) => ...), app.onKey((key) => ...)\nDrawing (ctx = app.ctx): Kit.circle(ctx, x, y, r, fill, stroke, lineWidth), Kit.ellipse(ctx, x, y, rx, ry, rotation,\n fill), Kit.rect(ctx, x, y, w, h, fill, stroke, lineWidth, radius), Kit.line(ctx, x1, y1, x2, y2, stroke, width),\n Kit.poly(ctx, [[x,y],...], fill, stroke), Kit.arc(ctx, x, y, r, fromDeg, toDeg, stroke, width),\n Kit.text(ctx, 'text', x, y, { size, color, align, baseline, weight }), Kit.glow(ctx, blur, color), Kit.noGlow(ctx).\nMath: Kit.polar(cx, cy, r, deg) -> [x, y] with 0 deg = up, clockwise; Kit.rand(a, b), Kit.randInt(a, b),\n Kit.choice(array), Kit.clamp(v, a, b), Kit.lerp(a, b, t), Kit.dist(x1, y1, x2, y2), Kit.hsl(h, s, l, a),\n Kit.ease.inOut(t) / Kit.ease.out(t).\nCollisions: Kit.circlesHit(a, b) for {x, y, r}; Kit.rectsHit(a, b) for {x, y, w, h}; Kit.circleRectHit(circle, rect).\nParticles: const ps = Kit.particles(); ps.add({ x, y, vx, vy, life, size, color }); ps.update(dt, { gravity, drag,\n wind }); ps.draw(ctx, { additive: true, shrink: true }) (velocities in pixels per second, life in seconds).\nGrid: const g = Kit.grid(cols, rows); g.get(c, r), g.set(c, r, v); g.layout(app) -> { size, x0, y0 } (square cells\n that fit the screen and the top-left corner of the grid).\nOverlays: Kit.hud('Score: 3') (top-left text), Kit.message('Game over', true) / Kit.message('', false),\n Kit.button('Restart', onClick, { top: '20px', right: '20px' }).\n\nExample (a square moving along a curve with a trail; clicks add dots):\n<script>\nconst app = Kit.canvas({ background: '#0f172a', trail: 0.15 });\nconst dots = [];\napp.onClick((x, y) => dots.push({ x, y, r: Kit.rand(6, 14) }));\napp.frame((dt, t) => {\n const x = app.w / 2 + Math.sin(t) * 200, y = app.h / 2 + Math.cos(t * 2) * 80;\n Kit.rect(app.ctx, x - 20, y - 20, 40, 40, Kit.hsl((t * 60) % 360), null, 0, 8);\n for (const d of dots) Kit.circle(app.ctx, d.x, d.y, d.r, '#f8fafc');\n Kit.hud('Dots: ' + dots.length);\n});\n</script>\n\nAnswer with one complete HTML file in a single ```html code block with your code in a <script> at the end of <body>. Do not copy the toolkit itself and do not use other libraries."} | |
| {"id": "visual/c06", "task": "visual", "cat": "canvas", "kind": "html", "animated": false, "prompt": "Draw a recursive fractal tree on a canvas, with branches getting thinner and greener towards the tips.\n\nUse the kit2d toolkit. The page already contains it as the global Kit: it creates a full-window canvas and runs the animation loop, so you only write what to draw and how things move.\n const app = Kit.canvas({ background: '#101820', trail: 0 });\n app.ctx (2D context), app.w, app.h (size), app.mouse {x, y, down}, app.keys (Set of pressed key names), app.t\n app.frame((dt, t) => { ...update, then draw... }) every frame (dt, t in seconds); the screen is cleared first\n (trail between 0 and 1 fades the previous frame instead, for motion trails).\n app.onClick((x, y) => ...), app.onKey((key) => ...)\nDrawing (ctx = app.ctx): Kit.circle(ctx, x, y, r, fill, stroke, lineWidth), Kit.ellipse(ctx, x, y, rx, ry, rotation,\n fill), Kit.rect(ctx, x, y, w, h, fill, stroke, lineWidth, radius), Kit.line(ctx, x1, y1, x2, y2, stroke, width),\n Kit.poly(ctx, [[x,y],...], fill, stroke), Kit.arc(ctx, x, y, r, fromDeg, toDeg, stroke, width),\n Kit.text(ctx, 'text', x, y, { size, color, align, baseline, weight }), Kit.glow(ctx, blur, color), Kit.noGlow(ctx).\nMath: Kit.polar(cx, cy, r, deg) -> [x, y] with 0 deg = up, clockwise; Kit.rand(a, b), Kit.randInt(a, b),\n Kit.choice(array), Kit.clamp(v, a, b), Kit.lerp(a, b, t), Kit.dist(x1, y1, x2, y2), Kit.hsl(h, s, l, a),\n Kit.ease.inOut(t) / Kit.ease.out(t).\nCollisions: Kit.circlesHit(a, b) for {x, y, r}; Kit.rectsHit(a, b) for {x, y, w, h}; Kit.circleRectHit(circle, rect).\nParticles: const ps = Kit.particles(); ps.add({ x, y, vx, vy, life, size, color }); ps.update(dt, { gravity, drag,\n wind }); ps.draw(ctx, { additive: true, shrink: true }) (velocities in pixels per second, life in seconds).\nGrid: const g = Kit.grid(cols, rows); g.get(c, r), g.set(c, r, v); g.layout(app) -> { size, x0, y0 } (square cells\n that fit the screen and the top-left corner of the grid).\nOverlays: Kit.hud('Score: 3') (top-left text), Kit.message('Game over', true) / Kit.message('', false),\n Kit.button('Restart', onClick, { top: '20px', right: '20px' }).\n\nExample (a square moving along a curve with a trail; clicks add dots):\n<script>\nconst app = Kit.canvas({ background: '#0f172a', trail: 0.15 });\nconst dots = [];\napp.onClick((x, y) => dots.push({ x, y, r: Kit.rand(6, 14) }));\napp.frame((dt, t) => {\n const x = app.w / 2 + Math.sin(t) * 200, y = app.h / 2 + Math.cos(t * 2) * 80;\n Kit.rect(app.ctx, x - 20, y - 20, 40, 40, Kit.hsl((t * 60) % 360), null, 0, 8);\n for (const d of dots) Kit.circle(app.ctx, d.x, d.y, d.r, '#f8fafc');\n Kit.hud('Dots: ' + dots.length);\n});\n</script>\n\nAnswer with one complete HTML file in a single ```html code block with your code in a <script> at the end of <body>. Do not copy the toolkit itself and do not use other libraries."} | |
| {"id": "visual/c07", "task": "visual", "cat": "canvas", "kind": "html", "animated": true, "prompt": "Make a playable Snake game on a canvas (arrow keys) with food, a score display and a game-over message; the snake moves automatically.\n\nUse the kit2d toolkit. The page already contains it as the global Kit: it creates a full-window canvas and runs the animation loop, so you only write what to draw and how things move.\n const app = Kit.canvas({ background: '#101820', trail: 0 });\n app.ctx (2D context), app.w, app.h (size), app.mouse {x, y, down}, app.keys (Set of pressed key names), app.t\n app.frame((dt, t) => { ...update, then draw... }) every frame (dt, t in seconds); the screen is cleared first\n (trail between 0 and 1 fades the previous frame instead, for motion trails).\n app.onClick((x, y) => ...), app.onKey((key) => ...)\nDrawing (ctx = app.ctx): Kit.circle(ctx, x, y, r, fill, stroke, lineWidth), Kit.ellipse(ctx, x, y, rx, ry, rotation,\n fill), Kit.rect(ctx, x, y, w, h, fill, stroke, lineWidth, radius), Kit.line(ctx, x1, y1, x2, y2, stroke, width),\n Kit.poly(ctx, [[x,y],...], fill, stroke), Kit.arc(ctx, x, y, r, fromDeg, toDeg, stroke, width),\n Kit.text(ctx, 'text', x, y, { size, color, align, baseline, weight }), Kit.glow(ctx, blur, color), Kit.noGlow(ctx).\nMath: Kit.polar(cx, cy, r, deg) -> [x, y] with 0 deg = up, clockwise; Kit.rand(a, b), Kit.randInt(a, b),\n Kit.choice(array), Kit.clamp(v, a, b), Kit.lerp(a, b, t), Kit.dist(x1, y1, x2, y2), Kit.hsl(h, s, l, a),\n Kit.ease.inOut(t) / Kit.ease.out(t).\nCollisions: Kit.circlesHit(a, b) for {x, y, r}; Kit.rectsHit(a, b) for {x, y, w, h}; Kit.circleRectHit(circle, rect).\nParticles: const ps = Kit.particles(); ps.add({ x, y, vx, vy, life, size, color }); ps.update(dt, { gravity, drag,\n wind }); ps.draw(ctx, { additive: true, shrink: true }) (velocities in pixels per second, life in seconds).\nGrid: const g = Kit.grid(cols, rows); g.get(c, r), g.set(c, r, v); g.layout(app) -> { size, x0, y0 } (square cells\n that fit the screen and the top-left corner of the grid).\nOverlays: Kit.hud('Score: 3') (top-left text), Kit.message('Game over', true) / Kit.message('', false),\n Kit.button('Restart', onClick, { top: '20px', right: '20px' }).\n\nExample (a square moving along a curve with a trail; clicks add dots):\n<script>\nconst app = Kit.canvas({ background: '#0f172a', trail: 0.15 });\nconst dots = [];\napp.onClick((x, y) => dots.push({ x, y, r: Kit.rand(6, 14) }));\napp.frame((dt, t) => {\n const x = app.w / 2 + Math.sin(t) * 200, y = app.h / 2 + Math.cos(t * 2) * 80;\n Kit.rect(app.ctx, x - 20, y - 20, 40, 40, Kit.hsl((t * 60) % 360), null, 0, 8);\n for (const d of dots) Kit.circle(app.ctx, d.x, d.y, d.r, '#f8fafc');\n Kit.hud('Dots: ' + dots.length);\n});\n</script>\n\nAnswer with one complete HTML file in a single ```html code block with your code in a <script> at the end of <body>. Do not copy the toolkit itself and do not use other libraries."} | |
| {"id": "visual/c08", "task": "visual", "cat": "canvas", "kind": "html", "animated": true, "prompt": "Make a 3D starfield animation on a canvas: flying through space, stars move out from the center and grow.\n\nUse the kit2d toolkit. The page already contains it as the global Kit: it creates a full-window canvas and runs the animation loop, so you only write what to draw and how things move.\n const app = Kit.canvas({ background: '#101820', trail: 0 });\n app.ctx (2D context), app.w, app.h (size), app.mouse {x, y, down}, app.keys (Set of pressed key names), app.t\n app.frame((dt, t) => { ...update, then draw... }) every frame (dt, t in seconds); the screen is cleared first\n (trail between 0 and 1 fades the previous frame instead, for motion trails).\n app.onClick((x, y) => ...), app.onKey((key) => ...)\nDrawing (ctx = app.ctx): Kit.circle(ctx, x, y, r, fill, stroke, lineWidth), Kit.ellipse(ctx, x, y, rx, ry, rotation,\n fill), Kit.rect(ctx, x, y, w, h, fill, stroke, lineWidth, radius), Kit.line(ctx, x1, y1, x2, y2, stroke, width),\n Kit.poly(ctx, [[x,y],...], fill, stroke), Kit.arc(ctx, x, y, r, fromDeg, toDeg, stroke, width),\n Kit.text(ctx, 'text', x, y, { size, color, align, baseline, weight }), Kit.glow(ctx, blur, color), Kit.noGlow(ctx).\nMath: Kit.polar(cx, cy, r, deg) -> [x, y] with 0 deg = up, clockwise; Kit.rand(a, b), Kit.randInt(a, b),\n Kit.choice(array), Kit.clamp(v, a, b), Kit.lerp(a, b, t), Kit.dist(x1, y1, x2, y2), Kit.hsl(h, s, l, a),\n Kit.ease.inOut(t) / Kit.ease.out(t).\nCollisions: Kit.circlesHit(a, b) for {x, y, r}; Kit.rectsHit(a, b) for {x, y, w, h}; Kit.circleRectHit(circle, rect).\nParticles: const ps = Kit.particles(); ps.add({ x, y, vx, vy, life, size, color }); ps.update(dt, { gravity, drag,\n wind }); ps.draw(ctx, { additive: true, shrink: true }) (velocities in pixels per second, life in seconds).\nGrid: const g = Kit.grid(cols, rows); g.get(c, r), g.set(c, r, v); g.layout(app) -> { size, x0, y0 } (square cells\n that fit the screen and the top-left corner of the grid).\nOverlays: Kit.hud('Score: 3') (top-left text), Kit.message('Game over', true) / Kit.message('', false),\n Kit.button('Restart', onClick, { top: '20px', right: '20px' }).\n\nExample (a square moving along a curve with a trail; clicks add dots):\n<script>\nconst app = Kit.canvas({ background: '#0f172a', trail: 0.15 });\nconst dots = [];\napp.onClick((x, y) => dots.push({ x, y, r: Kit.rand(6, 14) }));\napp.frame((dt, t) => {\n const x = app.w / 2 + Math.sin(t) * 200, y = app.h / 2 + Math.cos(t * 2) * 80;\n Kit.rect(app.ctx, x - 20, y - 20, 40, 40, Kit.hsl((t * 60) % 360), null, 0, 8);\n for (const d of dots) Kit.circle(app.ctx, d.x, d.y, d.r, '#f8fafc');\n Kit.hud('Dots: ' + dots.length);\n});\n</script>\n\nAnswer with one complete HTML file in a single ```html code block with your code in a <script> at the end of <body>. Do not copy the toolkit itself and do not use other libraries."} | |
| {"id": "visual/t01", "task": "visual", "cat": "three", "kind": "html", "animated": true, "prompt": "Make a three.js scene: a rotating cube with a standard material, lit by a directional light and an ambient light, casting a soft shadow on a ground plane.\n\nUse three.js through this import map: <script type=\"importmap\">{\"imports\": {\"three\": \"https://unpkg.com/three@0.160.0/build/three.module.js\", \"three/addons/\": \"https://unpkg.com/three@0.160.0/examples/jsm/\"}}</script>\n\nUse the kit3d toolkit. The page already contains it: it creates the renderer, camera, lights, shadows, orbit controls and the animation loop, so you only build the scene. Import it in your module script:\n import { setup, box, sphere, cylinder, cone, torus, plane, group, onFrame } from 'kit3d';\n\nAPI (sizes in world units, angles in degrees, colours like 0xff8800 or '#ff8800'; the y axis points up, the ground is the plane y = 0, so an object of height h stands on it at y = h/2):\n setup({ background, camera: [x,y,z], target: [x,y,z], ground: colour|true, groundSize, shadows, fog, autoRotate })\n -> { scene, camera, renderer, controls, THREE }. Call it first. The camera looks at target (default [0,0,0]);\n autoRotate: true makes the camera circle slowly around the target.\n Every shape is added to the scene (or to `parent`) and returned as a three.js mesh:\n box({ size: [w,h,d], color, at: [x,y,z], rot: [rx,ry,rz], parent }), sphere({ r, color, at }),\n cylinder({ r, h, rTop, rBottom, color, at, rot }), cone({ r, h, color, at, rot }), torus({ r, tube, color, at, rot }),\n capsule({ r, h }), ring({ inner, outer }), plane({ size: [w,d], color, at }) (horizontal),\n poly({ kind: 'tetra'|'octa'|'dodeca'|'icosa', r }), extrude({ points: [[x,y],...], depth }) (a flat outline made 3D),\n lathe({ points: [[radius,y],...] }) (a profile turned around the vertical axis), tube({ points: [[x,y,z],...], r }).\n Material options on every shape: metal (0..1), rough (0..1), glow (emissive strength), opacity (0..1), flat, wire.\n group({ at, rot, parent }) -> an empty object for compound things: create parts with parent: g, then move/rotate g.\n points({ positions: [[x,y,z],...], colors: [...], size, glow }) and movePoints(pts, flatArray) for particles;\n stars({ count, radius }); line({ points: [[x,y,z],...], color }); label({ text, at, size, color }) (faces the camera).\n light.point({ color, intensity, at }), light.spot({ color, intensity, at, target, angle }).\n onFrame((t, dt) => { ... }) runs every frame (t = seconds since start): animate by changing mesh.position,\n mesh.rotation (radians), mesh.scale or material properties here.\n\nExample (a red ball bouncing next to a blue box):\n<script type=\"module\">\nimport { setup, box, sphere, onFrame } from 'kit3d';\nsetup({ background: 0xdfe8f5, camera: [5, 4, 8], ground: 0xb8c4a8 });\nbox({ size: [1.5, 1.5, 1.5], color: 0x3b6fd8, at: [-1.5, 0.75, 0], rot: [0, 30, 0] });\nconst ball = sphere({ r: 0.6, color: 0xe0453a, at: [1.2, 0.6, 0] });\nonFrame((t) => { ball.position.y = 0.6 + Math.abs(Math.sin(t * 3)) * 1.5; });\n</script>\n\nAnswer with one complete HTML file in a single ```html code block: the import map from the task in <head>, then <script type=\"module\"> with your scene code that imports from 'kit3d'. Do not copy the toolkit itself."} | |
| {"id": "visual/t02", "task": "visual", "cat": "three", "kind": "html", "animated": true, "prompt": "Make a three.js solar system: a glowing sun and three planets of different sizes and colors orbiting at different speeds, one of them with a moon.\n\nUse three.js through this import map: <script type=\"importmap\">{\"imports\": {\"three\": \"https://unpkg.com/three@0.160.0/build/three.module.js\", \"three/addons/\": \"https://unpkg.com/three@0.160.0/examples/jsm/\"}}</script>\n\nUse the kit3d toolkit. The page already contains it: it creates the renderer, camera, lights, shadows, orbit controls and the animation loop, so you only build the scene. Import it in your module script:\n import { setup, box, sphere, cylinder, cone, torus, plane, group, onFrame } from 'kit3d';\n\nAPI (sizes in world units, angles in degrees, colours like 0xff8800 or '#ff8800'; the y axis points up, the ground is the plane y = 0, so an object of height h stands on it at y = h/2):\n setup({ background, camera: [x,y,z], target: [x,y,z], ground: colour|true, groundSize, shadows, fog, autoRotate })\n -> { scene, camera, renderer, controls, THREE }. Call it first. The camera looks at target (default [0,0,0]);\n autoRotate: true makes the camera circle slowly around the target.\n Every shape is added to the scene (or to `parent`) and returned as a three.js mesh:\n box({ size: [w,h,d], color, at: [x,y,z], rot: [rx,ry,rz], parent }), sphere({ r, color, at }),\n cylinder({ r, h, rTop, rBottom, color, at, rot }), cone({ r, h, color, at, rot }), torus({ r, tube, color, at, rot }),\n capsule({ r, h }), ring({ inner, outer }), plane({ size: [w,d], color, at }) (horizontal),\n poly({ kind: 'tetra'|'octa'|'dodeca'|'icosa', r }), extrude({ points: [[x,y],...], depth }) (a flat outline made 3D),\n lathe({ points: [[radius,y],...] }) (a profile turned around the vertical axis), tube({ points: [[x,y,z],...], r }).\n Material options on every shape: metal (0..1), rough (0..1), glow (emissive strength), opacity (0..1), flat, wire.\n group({ at, rot, parent }) -> an empty object for compound things: create parts with parent: g, then move/rotate g.\n points({ positions: [[x,y,z],...], colors: [...], size, glow }) and movePoints(pts, flatArray) for particles;\n stars({ count, radius }); line({ points: [[x,y,z],...], color }); label({ text, at, size, color }) (faces the camera).\n light.point({ color, intensity, at }), light.spot({ color, intensity, at, target, angle }).\n onFrame((t, dt) => { ... }) runs every frame (t = seconds since start): animate by changing mesh.position,\n mesh.rotation (radians), mesh.scale or material properties here.\n\nExample (a red ball bouncing next to a blue box):\n<script type=\"module\">\nimport { setup, box, sphere, onFrame } from 'kit3d';\nsetup({ background: 0xdfe8f5, camera: [5, 4, 8], ground: 0xb8c4a8 });\nbox({ size: [1.5, 1.5, 1.5], color: 0x3b6fd8, at: [-1.5, 0.75, 0], rot: [0, 30, 0] });\nconst ball = sphere({ r: 0.6, color: 0xe0453a, at: [1.2, 0.6, 0] });\nonFrame((t) => { ball.position.y = 0.6 + Math.abs(Math.sin(t * 3)) * 1.5; });\n</script>\n\nAnswer with one complete HTML file in a single ```html code block: the import map from the task in <head>, then <script type=\"module\"> with your scene code that imports from 'kit3d'. Do not copy the toolkit itself."} | |
| {"id": "visual/t03", "task": "visual", "cat": "three", "kind": "html", "animated": false, "prompt": "Make a three.js low-poly terrain landscape: hills from sine functions or noise, flat shading, colors by height (water, grass, rock, snow) and a sky background color.\n\nUse three.js through this import map: <script type=\"importmap\">{\"imports\": {\"three\": \"https://unpkg.com/three@0.160.0/build/three.module.js\", \"three/addons/\": \"https://unpkg.com/three@0.160.0/examples/jsm/\"}}</script>\n\nUse the kit3d toolkit. The page already contains it: it creates the renderer, camera, lights, shadows, orbit controls and the animation loop, so you only build the scene. Import it in your module script:\n import { setup, box, sphere, cylinder, cone, torus, plane, group, onFrame } from 'kit3d';\n\nAPI (sizes in world units, angles in degrees, colours like 0xff8800 or '#ff8800'; the y axis points up, the ground is the plane y = 0, so an object of height h stands on it at y = h/2):\n setup({ background, camera: [x,y,z], target: [x,y,z], ground: colour|true, groundSize, shadows, fog, autoRotate })\n -> { scene, camera, renderer, controls, THREE }. Call it first. The camera looks at target (default [0,0,0]);\n autoRotate: true makes the camera circle slowly around the target.\n Every shape is added to the scene (or to `parent`) and returned as a three.js mesh:\n box({ size: [w,h,d], color, at: [x,y,z], rot: [rx,ry,rz], parent }), sphere({ r, color, at }),\n cylinder({ r, h, rTop, rBottom, color, at, rot }), cone({ r, h, color, at, rot }), torus({ r, tube, color, at, rot }),\n capsule({ r, h }), ring({ inner, outer }), plane({ size: [w,d], color, at }) (horizontal),\n poly({ kind: 'tetra'|'octa'|'dodeca'|'icosa', r }), extrude({ points: [[x,y],...], depth }) (a flat outline made 3D),\n lathe({ points: [[radius,y],...] }) (a profile turned around the vertical axis), tube({ points: [[x,y,z],...], r }).\n Material options on every shape: metal (0..1), rough (0..1), glow (emissive strength), opacity (0..1), flat, wire.\n group({ at, rot, parent }) -> an empty object for compound things: create parts with parent: g, then move/rotate g.\n points({ positions: [[x,y,z],...], colors: [...], size, glow }) and movePoints(pts, flatArray) for particles;\n stars({ count, radius }); line({ points: [[x,y,z],...], color }); label({ text, at, size, color }) (faces the camera).\n light.point({ color, intensity, at }), light.spot({ color, intensity, at, target, angle }).\n onFrame((t, dt) => { ... }) runs every frame (t = seconds since start): animate by changing mesh.position,\n mesh.rotation (radians), mesh.scale or material properties here.\n\nExample (a red ball bouncing next to a blue box):\n<script type=\"module\">\nimport { setup, box, sphere, onFrame } from 'kit3d';\nsetup({ background: 0xdfe8f5, camera: [5, 4, 8], ground: 0xb8c4a8 });\nbox({ size: [1.5, 1.5, 1.5], color: 0x3b6fd8, at: [-1.5, 0.75, 0], rot: [0, 30, 0] });\nconst ball = sphere({ r: 0.6, color: 0xe0453a, at: [1.2, 0.6, 0] });\nonFrame((t) => { ball.position.y = 0.6 + Math.abs(Math.sin(t * 3)) * 1.5; });\n</script>\n\nAnswer with one complete HTML file in a single ```html code block: the import map from the task in <head>, then <script type=\"module\"> with your scene code that imports from 'kit3d'. Do not copy the toolkit itself."} | |
| {"id": "visual/t04", "task": "visual", "cat": "three", "kind": "html", "animated": true, "prompt": "Make a three.js scene with a spinning torus knot with a shiny metallic material and two colored point lights orbiting it.\n\nUse three.js through this import map: <script type=\"importmap\">{\"imports\": {\"three\": \"https://unpkg.com/three@0.160.0/build/three.module.js\", \"three/addons/\": \"https://unpkg.com/three@0.160.0/examples/jsm/\"}}</script>\n\nUse the kit3d toolkit. The page already contains it: it creates the renderer, camera, lights, shadows, orbit controls and the animation loop, so you only build the scene. Import it in your module script:\n import { setup, box, sphere, cylinder, cone, torus, plane, group, onFrame } from 'kit3d';\n\nAPI (sizes in world units, angles in degrees, colours like 0xff8800 or '#ff8800'; the y axis points up, the ground is the plane y = 0, so an object of height h stands on it at y = h/2):\n setup({ background, camera: [x,y,z], target: [x,y,z], ground: colour|true, groundSize, shadows, fog, autoRotate })\n -> { scene, camera, renderer, controls, THREE }. Call it first. The camera looks at target (default [0,0,0]);\n autoRotate: true makes the camera circle slowly around the target.\n Every shape is added to the scene (or to `parent`) and returned as a three.js mesh:\n box({ size: [w,h,d], color, at: [x,y,z], rot: [rx,ry,rz], parent }), sphere({ r, color, at }),\n cylinder({ r, h, rTop, rBottom, color, at, rot }), cone({ r, h, color, at, rot }), torus({ r, tube, color, at, rot }),\n capsule({ r, h }), ring({ inner, outer }), plane({ size: [w,d], color, at }) (horizontal),\n poly({ kind: 'tetra'|'octa'|'dodeca'|'icosa', r }), extrude({ points: [[x,y],...], depth }) (a flat outline made 3D),\n lathe({ points: [[radius,y],...] }) (a profile turned around the vertical axis), tube({ points: [[x,y,z],...], r }).\n Material options on every shape: metal (0..1), rough (0..1), glow (emissive strength), opacity (0..1), flat, wire.\n group({ at, rot, parent }) -> an empty object for compound things: create parts with parent: g, then move/rotate g.\n points({ positions: [[x,y,z],...], colors: [...], size, glow }) and movePoints(pts, flatArray) for particles;\n stars({ count, radius }); line({ points: [[x,y,z],...], color }); label({ text, at, size, color }) (faces the camera).\n light.point({ color, intensity, at }), light.spot({ color, intensity, at, target, angle }).\n onFrame((t, dt) => { ... }) runs every frame (t = seconds since start): animate by changing mesh.position,\n mesh.rotation (radians), mesh.scale or material properties here.\n\nExample (a red ball bouncing next to a blue box):\n<script type=\"module\">\nimport { setup, box, sphere, onFrame } from 'kit3d';\nsetup({ background: 0xdfe8f5, camera: [5, 4, 8], ground: 0xb8c4a8 });\nbox({ size: [1.5, 1.5, 1.5], color: 0x3b6fd8, at: [-1.5, 0.75, 0], rot: [0, 30, 0] });\nconst ball = sphere({ r: 0.6, color: 0xe0453a, at: [1.2, 0.6, 0] });\nonFrame((t) => { ball.position.y = 0.6 + Math.abs(Math.sin(t * 3)) * 1.5; });\n</script>\n\nAnswer with one complete HTML file in a single ```html code block: the import map from the task in <head>, then <script type=\"module\"> with your scene code that imports from 'kit3d'. Do not copy the toolkit itself."} | |
| {"id": "visual/t05", "task": "visual", "cat": "three", "kind": "html", "animated": false, "prompt": "Make a three.js 3D room seen from a corner: a floor, two walls, a table with four legs, a chair and a lamp.\n\nUse three.js through this import map: <script type=\"importmap\">{\"imports\": {\"three\": \"https://unpkg.com/three@0.160.0/build/three.module.js\", \"three/addons/\": \"https://unpkg.com/three@0.160.0/examples/jsm/\"}}</script>\n\nUse the kit3d toolkit. The page already contains it: it creates the renderer, camera, lights, shadows, orbit controls and the animation loop, so you only build the scene. Import it in your module script:\n import { setup, box, sphere, cylinder, cone, torus, plane, group, onFrame } from 'kit3d';\n\nAPI (sizes in world units, angles in degrees, colours like 0xff8800 or '#ff8800'; the y axis points up, the ground is the plane y = 0, so an object of height h stands on it at y = h/2):\n setup({ background, camera: [x,y,z], target: [x,y,z], ground: colour|true, groundSize, shadows, fog, autoRotate })\n -> { scene, camera, renderer, controls, THREE }. Call it first. The camera looks at target (default [0,0,0]);\n autoRotate: true makes the camera circle slowly around the target.\n Every shape is added to the scene (or to `parent`) and returned as a three.js mesh:\n box({ size: [w,h,d], color, at: [x,y,z], rot: [rx,ry,rz], parent }), sphere({ r, color, at }),\n cylinder({ r, h, rTop, rBottom, color, at, rot }), cone({ r, h, color, at, rot }), torus({ r, tube, color, at, rot }),\n capsule({ r, h }), ring({ inner, outer }), plane({ size: [w,d], color, at }) (horizontal),\n poly({ kind: 'tetra'|'octa'|'dodeca'|'icosa', r }), extrude({ points: [[x,y],...], depth }) (a flat outline made 3D),\n lathe({ points: [[radius,y],...] }) (a profile turned around the vertical axis), tube({ points: [[x,y,z],...], r }).\n Material options on every shape: metal (0..1), rough (0..1), glow (emissive strength), opacity (0..1), flat, wire.\n group({ at, rot, parent }) -> an empty object for compound things: create parts with parent: g, then move/rotate g.\n points({ positions: [[x,y,z],...], colors: [...], size, glow }) and movePoints(pts, flatArray) for particles;\n stars({ count, radius }); line({ points: [[x,y,z],...], color }); label({ text, at, size, color }) (faces the camera).\n light.point({ color, intensity, at }), light.spot({ color, intensity, at, target, angle }).\n onFrame((t, dt) => { ... }) runs every frame (t = seconds since start): animate by changing mesh.position,\n mesh.rotation (radians), mesh.scale or material properties here.\n\nExample (a red ball bouncing next to a blue box):\n<script type=\"module\">\nimport { setup, box, sphere, onFrame } from 'kit3d';\nsetup({ background: 0xdfe8f5, camera: [5, 4, 8], ground: 0xb8c4a8 });\nbox({ size: [1.5, 1.5, 1.5], color: 0x3b6fd8, at: [-1.5, 0.75, 0], rot: [0, 30, 0] });\nconst ball = sphere({ r: 0.6, color: 0xe0453a, at: [1.2, 0.6, 0] });\nonFrame((t) => { ball.position.y = 0.6 + Math.abs(Math.sin(t * 3)) * 1.5; });\n</script>\n\nAnswer with one complete HTML file in a single ```html code block: the import map from the task in <head>, then <script type=\"module\"> with your scene code that imports from 'kit3d'. Do not copy the toolkit itself."} | |
| {"id": "visual/t06", "task": "visual", "cat": "three", "kind": "html", "animated": true, "prompt": "Make a three.js spiral galaxy made of thousands of points, colored from a warm center to blue arms, slowly rotating.\n\nUse three.js through this import map: <script type=\"importmap\">{\"imports\": {\"three\": \"https://unpkg.com/three@0.160.0/build/three.module.js\", \"three/addons/\": \"https://unpkg.com/three@0.160.0/examples/jsm/\"}}</script>\n\nUse the kit3d toolkit. The page already contains it: it creates the renderer, camera, lights, shadows, orbit controls and the animation loop, so you only build the scene. Import it in your module script:\n import { setup, box, sphere, cylinder, cone, torus, plane, group, onFrame } from 'kit3d';\n\nAPI (sizes in world units, angles in degrees, colours like 0xff8800 or '#ff8800'; the y axis points up, the ground is the plane y = 0, so an object of height h stands on it at y = h/2):\n setup({ background, camera: [x,y,z], target: [x,y,z], ground: colour|true, groundSize, shadows, fog, autoRotate })\n -> { scene, camera, renderer, controls, THREE }. Call it first. The camera looks at target (default [0,0,0]);\n autoRotate: true makes the camera circle slowly around the target.\n Every shape is added to the scene (or to `parent`) and returned as a three.js mesh:\n box({ size: [w,h,d], color, at: [x,y,z], rot: [rx,ry,rz], parent }), sphere({ r, color, at }),\n cylinder({ r, h, rTop, rBottom, color, at, rot }), cone({ r, h, color, at, rot }), torus({ r, tube, color, at, rot }),\n capsule({ r, h }), ring({ inner, outer }), plane({ size: [w,d], color, at }) (horizontal),\n poly({ kind: 'tetra'|'octa'|'dodeca'|'icosa', r }), extrude({ points: [[x,y],...], depth }) (a flat outline made 3D),\n lathe({ points: [[radius,y],...] }) (a profile turned around the vertical axis), tube({ points: [[x,y,z],...], r }).\n Material options on every shape: metal (0..1), rough (0..1), glow (emissive strength), opacity (0..1), flat, wire.\n group({ at, rot, parent }) -> an empty object for compound things: create parts with parent: g, then move/rotate g.\n points({ positions: [[x,y,z],...], colors: [...], size, glow }) and movePoints(pts, flatArray) for particles;\n stars({ count, radius }); line({ points: [[x,y,z],...], color }); label({ text, at, size, color }) (faces the camera).\n light.point({ color, intensity, at }), light.spot({ color, intensity, at, target, angle }).\n onFrame((t, dt) => { ... }) runs every frame (t = seconds since start): animate by changing mesh.position,\n mesh.rotation (radians), mesh.scale or material properties here.\n\nExample (a red ball bouncing next to a blue box):\n<script type=\"module\">\nimport { setup, box, sphere, onFrame } from 'kit3d';\nsetup({ background: 0xdfe8f5, camera: [5, 4, 8], ground: 0xb8c4a8 });\nbox({ size: [1.5, 1.5, 1.5], color: 0x3b6fd8, at: [-1.5, 0.75, 0], rot: [0, 30, 0] });\nconst ball = sphere({ r: 0.6, color: 0xe0453a, at: [1.2, 0.6, 0] });\nonFrame((t) => { ball.position.y = 0.6 + Math.abs(Math.sin(t * 3)) * 1.5; });\n</script>\n\nAnswer with one complete HTML file in a single ```html code block: the import map from the task in <head>, then <script type=\"module\"> with your scene code that imports from 'kit3d'. Do not copy the toolkit itself."} | |
| {"id": "visual/t07", "task": "visual", "cat": "three", "kind": "html", "animated": false, "prompt": "Make a three.js snowman: three snow spheres, a carrot nose, coal eyes and buttons, stick arms and a hat, standing on snowy ground.\n\nUse three.js through this import map: <script type=\"importmap\">{\"imports\": {\"three\": \"https://unpkg.com/three@0.160.0/build/three.module.js\", \"three/addons/\": \"https://unpkg.com/three@0.160.0/examples/jsm/\"}}</script>\n\nUse the kit3d toolkit. The page already contains it: it creates the renderer, camera, lights, shadows, orbit controls and the animation loop, so you only build the scene. Import it in your module script:\n import { setup, box, sphere, cylinder, cone, torus, plane, group, onFrame } from 'kit3d';\n\nAPI (sizes in world units, angles in degrees, colours like 0xff8800 or '#ff8800'; the y axis points up, the ground is the plane y = 0, so an object of height h stands on it at y = h/2):\n setup({ background, camera: [x,y,z], target: [x,y,z], ground: colour|true, groundSize, shadows, fog, autoRotate })\n -> { scene, camera, renderer, controls, THREE }. Call it first. The camera looks at target (default [0,0,0]);\n autoRotate: true makes the camera circle slowly around the target.\n Every shape is added to the scene (or to `parent`) and returned as a three.js mesh:\n box({ size: [w,h,d], color, at: [x,y,z], rot: [rx,ry,rz], parent }), sphere({ r, color, at }),\n cylinder({ r, h, rTop, rBottom, color, at, rot }), cone({ r, h, color, at, rot }), torus({ r, tube, color, at, rot }),\n capsule({ r, h }), ring({ inner, outer }), plane({ size: [w,d], color, at }) (horizontal),\n poly({ kind: 'tetra'|'octa'|'dodeca'|'icosa', r }), extrude({ points: [[x,y],...], depth }) (a flat outline made 3D),\n lathe({ points: [[radius,y],...] }) (a profile turned around the vertical axis), tube({ points: [[x,y,z],...], r }).\n Material options on every shape: metal (0..1), rough (0..1), glow (emissive strength), opacity (0..1), flat, wire.\n group({ at, rot, parent }) -> an empty object for compound things: create parts with parent: g, then move/rotate g.\n points({ positions: [[x,y,z],...], colors: [...], size, glow }) and movePoints(pts, flatArray) for particles;\n stars({ count, radius }); line({ points: [[x,y,z],...], color }); label({ text, at, size, color }) (faces the camera).\n light.point({ color, intensity, at }), light.spot({ color, intensity, at, target, angle }).\n onFrame((t, dt) => { ... }) runs every frame (t = seconds since start): animate by changing mesh.position,\n mesh.rotation (radians), mesh.scale or material properties here.\n\nExample (a red ball bouncing next to a blue box):\n<script type=\"module\">\nimport { setup, box, sphere, onFrame } from 'kit3d';\nsetup({ background: 0xdfe8f5, camera: [5, 4, 8], ground: 0xb8c4a8 });\nbox({ size: [1.5, 1.5, 1.5], color: 0x3b6fd8, at: [-1.5, 0.75, 0], rot: [0, 30, 0] });\nconst ball = sphere({ r: 0.6, color: 0xe0453a, at: [1.2, 0.6, 0] });\nonFrame((t) => { ball.position.y = 0.6 + Math.abs(Math.sin(t * 3)) * 1.5; });\n</script>\n\nAnswer with one complete HTML file in a single ```html code block: the import map from the task in <head>, then <script type=\"module\"> with your scene code that imports from 'kit3d'. Do not copy the toolkit itself."} | |
| {"id": "visual/t08", "task": "visual", "cat": "three", "kind": "html", "animated": true, "prompt": "Make a three.js 3D bar chart of the values 3, 7, 5, 9, 4 as colored boxes on a grid, with the camera slowly orbiting around it.\n\nUse three.js through this import map: <script type=\"importmap\">{\"imports\": {\"three\": \"https://unpkg.com/three@0.160.0/build/three.module.js\", \"three/addons/\": \"https://unpkg.com/three@0.160.0/examples/jsm/\"}}</script>\n\nUse the kit3d toolkit. The page already contains it: it creates the renderer, camera, lights, shadows, orbit controls and the animation loop, so you only build the scene. Import it in your module script:\n import { setup, box, sphere, cylinder, cone, torus, plane, group, onFrame } from 'kit3d';\n\nAPI (sizes in world units, angles in degrees, colours like 0xff8800 or '#ff8800'; the y axis points up, the ground is the plane y = 0, so an object of height h stands on it at y = h/2):\n setup({ background, camera: [x,y,z], target: [x,y,z], ground: colour|true, groundSize, shadows, fog, autoRotate })\n -> { scene, camera, renderer, controls, THREE }. Call it first. The camera looks at target (default [0,0,0]);\n autoRotate: true makes the camera circle slowly around the target.\n Every shape is added to the scene (or to `parent`) and returned as a three.js mesh:\n box({ size: [w,h,d], color, at: [x,y,z], rot: [rx,ry,rz], parent }), sphere({ r, color, at }),\n cylinder({ r, h, rTop, rBottom, color, at, rot }), cone({ r, h, color, at, rot }), torus({ r, tube, color, at, rot }),\n capsule({ r, h }), ring({ inner, outer }), plane({ size: [w,d], color, at }) (horizontal),\n poly({ kind: 'tetra'|'octa'|'dodeca'|'icosa', r }), extrude({ points: [[x,y],...], depth }) (a flat outline made 3D),\n lathe({ points: [[radius,y],...] }) (a profile turned around the vertical axis), tube({ points: [[x,y,z],...], r }).\n Material options on every shape: metal (0..1), rough (0..1), glow (emissive strength), opacity (0..1), flat, wire.\n group({ at, rot, parent }) -> an empty object for compound things: create parts with parent: g, then move/rotate g.\n points({ positions: [[x,y,z],...], colors: [...], size, glow }) and movePoints(pts, flatArray) for particles;\n stars({ count, radius }); line({ points: [[x,y,z],...], color }); label({ text, at, size, color }) (faces the camera).\n light.point({ color, intensity, at }), light.spot({ color, intensity, at, target, angle }).\n onFrame((t, dt) => { ... }) runs every frame (t = seconds since start): animate by changing mesh.position,\n mesh.rotation (radians), mesh.scale or material properties here.\n\nExample (a red ball bouncing next to a blue box):\n<script type=\"module\">\nimport { setup, box, sphere, onFrame } from 'kit3d';\nsetup({ background: 0xdfe8f5, camera: [5, 4, 8], ground: 0xb8c4a8 });\nbox({ size: [1.5, 1.5, 1.5], color: 0x3b6fd8, at: [-1.5, 0.75, 0], rot: [0, 30, 0] });\nconst ball = sphere({ r: 0.6, color: 0xe0453a, at: [1.2, 0.6, 0] });\nonFrame((t) => { ball.position.y = 0.6 + Math.abs(Math.sin(t * 3)) * 1.5; });\n</script>\n\nAnswer with one complete HTML file in a single ```html code block: the import map from the task in <head>, then <script type=\"module\"> with your scene code that imports from 'kit3d'. Do not copy the toolkit itself."} | |