AI CSS Animations

Cyanotype Blueprint Drafting

White ruling-pen linework on Prussian-blue cyanotype: compass-true circles, chain lines, 45° section lining, gothic lettering, and motion that only draws. The nib travels each stroke; nothing fades.

By Alex Greenshpun @alexgreensh Sep 22, 2026

Type
skill
Made with
Claude Code
Built in
Canvas
Topics
Line art · Diagrams

The skill

**Medium, physically.** A ruling pen and a spring-bow compass loaded with white ink on
Prussian-blue cyanotype stock. The stock never exposed evenly: brighter where the arc lamp
stood, mottled (`blueMottle`), two old fold lines, dust. The ink breaks up on the tooth of the
sheet (`draftTooth`) and white on blue blooms, so every line gets a faint halo (`inkGroup`).

**The marks.** Ruled lines that are never dead straight (a 0.6 px bow, seeded). Compass circles
that ARE true round (`circle`: the compass does not wobble, the freehand does). Chain lines,
long dash then short dash, for centres and pitch circles (`chain`, `chainRing`). Section lining
at 45 degrees that starts and stops just inside each part (`hatch`), adjacent parts lined in
opposing directions, thin sections filled solid, shafts and pinions never sectioned. Filled
arrowheads. Single-stroke inclined gothic capitals from `drafting.ts`; dimension figures read
from the bottom of the sheet (unidirectional).

**Edge.** A thin, even pen line with a slight taper where the nib lifts. No tone except section
lining. No light and no cast shadow: an orthographic drawing has none, and faking one breaks the
medium.

[…]

**Palette.** Ground `#123a63`, white ink `#f1f7fb`, cyan `#a7d8ec`, dim `#7fbcd8`.

[…]

**Motion grammar.** A drafting office has no camera moves and nothing ever fades: the nib travels
along each stroke (`progress`), compass circles swing from where the needle-leg starts, section
lines run on one stroke at a time, lettering is written stroke by stroke. Long ruled strokes are
fast, lettering is slow. Finished parts are flattened onto one cached surface keyed by how many
parts are finished, so only the stroke being drawn costs anything.

From Alex Greenshpun's repo, under the Apache-2.0 license.

Similar prompts