23 August 2026
One geometry, three renderers
The page, the social card and the animated canvas cannot disagree, because only one of them decides anything.
No byline: this is the site describing itself.
A plate is drawn three times in three different places: as inline SVG in the page, as a PNG social card for anyone who links to it, and as an animated canvas in your browser if you have scripting on and have not asked for reduced motion.
The obvious way to build that is three drawing routines, and the obvious consequence is that they fall out of step. Someone tunes the opacity on the page and the card keeps the old value for a year before anyone notices, because nobody looks at their own social cards.
So the geometry is generated once, into a flat list of primitives: background, polyline, filled path, rectangle. The three renderers only translate that list into their own output. The SVG renderer turns a polyline into a path element. The rasteriser, which is also written for this project and encodes its own PNGs, walks the same polyline and sets pixels. Neither of them decides anything about the drawing.
The rule that makes it hold: if a change belongs in the picture it goes in the geometry, and if it belongs in the output format it goes in a renderer. A renderer that starts making aesthetic decisions is a bug in waiting.