2026-09 · Card
An artwork plate and a caption plate with their facing corners cut, over a crop-marked dot grid. The line drawing inks itself on load in pure CSS — every path declares a length of 1, so one keyframe pair draws all of them without measuring any.
Default, and the --graphite surface beside it
Hover to re-ink it — or press, on touch
Rammesætning 001 Fastlægger sagens rammer: omfang, frister og parter.The other two drawings, each on its own interval — and --acid
Longer note — the caption plate has a floor, not a fixed height
Overblik over sagen 004 Samler frister, parter og seneste handlinger på én flade, så sagsbehandleren kan se status uden at åbne hver enkelt sag.Extraction, not a copy. What is taken is the construction — two plates with cut facing corners, a crop-marked drawing field on a dot grid, and a line drawing that inks itself on load. What is left behind is everything that identifies the original: the orange and cream, the three shapes (nested circles with ± glyphs, a ruled triangle, a hatched Venn), the product copy, and the ◇ FEATURES section header — a row of three cards is page layout, and this is one card.
Colours are lime on graphite instead of orange on warm grey, and the drawings are three of my own: concentric squares rotating into a vortex, a waterfall of drifting ridgelines, and a nephroid drawn as 47 straight chords across a circle.
Not one box with a rule across it: an artwork plate and a caption plate, 6px apart, and the two corners facing that gap are cut at 45° while the outer four stay at a 14px radius — each plate reads as a piece of cut sheet rather than half of a rounded box. The cut is mask-image with two linear-gradients and mask-composite: intersect; intersect is load-bearing, because mask layers union by default and the union of two corner cuts removes nothing at all. Hover widens the seam to 13px and pushes the crop marks 3px outward, so the two plates separate a little rather than the card lifting.
pathLength="1" is the whole reason the draw needs no JavaScript.Every path declares its length as 1, so stroke-dasharray: 1 and a single keyframe pair from stroke-dashoffset: 1 to 0 draw a 16-unit crosshair and a 500-unit ridgeline at exactly the same rate. Nothing has to measure a path, which is the only thing that would have forced a component.js. The drawing order is --i inline on each path — the one thing the markup carries that is not geometry — multiplied by the stagger to get the delay.
34ms across the vortex's 13 squares, 44ms across the waterfall's 9 ridgelines, 12ms across the envelope's 48 paths — so all three finish within about the same second. One shared interval cannot do that: at 34ms the envelope runs past a second and a half, and at 12ms the waterfall is finished before the eye catches it starting.
inked-plate-card-redraw is a byte-for-byte copy of inked-plate-card-draw, and it exists only because changing animation-name is the one thing that restarts a running CSS animation. Crossing back out swaps the name back and the card re-inks on the way out too — kept deliberately, because the alternative is snapping to the finished state, and a drawing that re-inks on both crossings reads as a plotter that answers the pointer.
stroke-width: 1.15 is in the drawing's own coordinates, so the weight shrinks with the card instead of getting heavier as the card gets smaller — a card at 320px is the same drawing, only smaller. The type does not scale: 18px/500 title, 13px note, and a 10px mono number at 0.14em tracking, three sizes with nothing in between. The crop marks and the dot grid stay in px for the same reason a hairline does.
notes.md — the full record, including what was tried and dropped