SVG Figures

Overview

Use this skill to draw figures that explain something and move with intent: a stopwatch that races frameworks, a build output that assembles plate by plate, a computer that types farm dev, a nav glyph that wakes on hover. The figures are plain SVG, a projection, and a handful of springs. No figure library, no canvas, no video.

The work is mostly restraint. Draw fewer lines, round every corner, give the one thing that matters the bright edge, and write the words beside the drawing on a wire, not over it.

Quick Start

1. Read Inspirations before choosing a direction. When the user links one, open it and study its states (rest, hover, mid-motion) before drawing anything.
2. Pick a grammar below. Do not mix them inside one page.
3. Read Build and Verify before writing code: the projection, rounded solids, painter's order, springs, clocks, pointer mapping, callouts, and the screenshot harness.
4. Draw the rest pose first. It is what most people see, what reduced motion shows, and what server rendering emits.
5. Add motion that tells the figure's story, then the pointer, then the labels.
6. Verify frame by frame in a real browser before showing anyone.

Pick a Grammar