Explainers / SVG
Line chart draw
A data line draws across a stable axis and ends with a labeled value.
Line chart drawPrompt recipe · preview pending
Prompt recipe; no reproduced preview yet. You can use the prompt now; this recipe has not yet been reproduced for the gallery.
Make it fit your project.
Build a six-second line chart using supplied dated observations. Render axes and units first, then reveal the data path with a left-to-right clip over two seconds. Add the final value and source caption after the reveal; hold the final chart for three seconds.
Build and check.
- Confirm the supplied content, target environment, and required assets before implementing.
- Build a six-second line chart using supplied dated observations. Render axes and units first, then reveal the data path with a left-to-right clip over two seconds. Add the final value and source caption after the reveal; hold the final chart for three seconds.
- Expose seek(t) so frames can be inspected deterministically; add play, pause, replay, and a reduced-motion still.
- Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.
Know the limits.
- Preserve chronological spacing and label any missing observations.
- The prompt guides a coding agent; output quality depends on its implementation and review.
Want us to build it?
Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.
Catalog 2026-10-22.a82e12098f76 · Source revision sha256:dfbe6519cbc4fc84acc4cbf926d8a01c7f2e248dd46cedd67a9112b0e928c2ba