30 · Plotter

An HP 7475A drawing it live, on manila, in one navy pen.

Manila paper with warm fiber grain, register marks in all four corners, a line-drawn portrait sitting next to a Major Mono hero name. Every SVG path/line/circle/rect animates in on load via `stroke-dashoffset`, sequenced top-to-bottom and timed by path length. A pen log streams per-stroke durations; finishes with a drawn signature.

Watch it happen; that's the whole point.

udaysinh

/p/plotter/—open ↗

/p/plotter/

open fullscreen — better on a phone

The page above is the prototype itself, unmodified. Open in a new tab to drive it full-size.

Make your own

Recreate Plotter with an AI agent.

Copies a structured brief — palette, fonts, techniques, the design notes — ready to paste into Cursor, Claude Code, or any agent that takes a markdown prompt. Originality on the bones is encouraged.

Techniques used

What this sheet demonstrates.

Pen-plotter draw with `stroke-dashoffset`
Animate any SVG path on like a pen is drawing it.
SVG filters for grain, dither, halftone
Inline `<filter>` definitions; reference with `filter: url(#id)`.

No design notes have been written for this sheet yet.