Colophon
Every figure here is a single unbroken line. Not a stylistic conceit — a constraint, chosen because the work this company does is the same kind: one continuous argument, admitting no gaps.
i. The constraint
A pen plotter holds a real pen against real paper. Its cost is time and its discipline is continuity: lifting the pen is an operation, so a figure drawn in one stroke is cheaper, faster and truer than the same figure assembled from fragments. Each engraving on this site obeys that rule literally. Every one is a single <path> — a polyline of a few thousand points, beginning once and ending once.
That rule did most of the design work. The convergence braid weaves as one serpentine because nine separate strands would have meant nine lifts. The lemniscate nests five passes because each pass returns to the origin, where the next can begin. The constraint is not decoration applied afterwards; it is the reason the figures look the way they do.
ii. The plates
Each product is given the curve that argues for it. The mathematics is not ornamental — a scheduling engine gets a dial, a double-entry ledger gets a figure symmetric about its origin, a state machine gets a curve that provably closes.
Deterministic project scheduling
r(θ) = 22 + 9.1θ, θ ∈ [0, 6π]A schedule is a line through time. Coiled on itself it becomes a dial, and the seventy-two graduations are excursions of the same stroke rather than marks laid on top of it — the instrument and its scale drawn without lifting the pen.
ESG data management
r(φ) = (|cos(mφ/4)|⁴ + |sin(mφ/4)|⁴)^(−1/0.8) · e^(−0.038φ)Five revolutions, each one drawn slightly inside the last. Sustainability reporting is the same shape of work: the same disclosure returned to annually, each pass tighter than the one before.
Multi-company consolidation
yₖ(x) = y_c + A·sin(πx/W)^0.85 · sin(2πcx/W + 2πk/9)Nine strands share one frequency at evenly spaced phases, so they weave rather than tangle. The amplitude envelope pinches to nothing at both margins — nine entities, reconciled to a single figure at each edge.
Accounting and invoicing
x = a·cos θ / (1 + sin²θ), y = a·sin θ·cos θ / (1 + sin²θ)The only figure here chosen for its symmetry rather than its motion. Every pass crosses the origin, so the passes chain into one stroke, and each lobe is the exact mirror of the other. Double entry, drawn.
Document text extraction
alternating scanlines, 11px leading, ±2.5px displacement within spansBoustrophedon — "as the ox turns in ploughing" — is how the earliest writing ran, and how a plotter fills a field. Inside each measured span the pen carries a small square displacement; in the margins it runs clean. Read at arm's length it resolves into paragraphs.
Finite state machine modelling
x = (R+r)cos t − h·cos(((R+r)/r)t), y = (R+r)sin t − h·sin(((R+r)/r)t)A rational ratio closes. After exactly three revolutions the pen arrives where it began and would trace the same five-lobed path forever. A state machine is the same promise: the same inputs, the same trajectory, every time.
iii. The mechanism
Every curve is computed on the server at build time and shipped as a finished path. The animation is a reveal, not a construction: the stroke is hidden with a dash pattern exactly as long as the path itself, then the offset is walked to zero while a small mark rides the line at the current distance. Because the geometry is already in the document, a visitor with no JavaScript, or one who has asked their system for reduced motion, receives every engraving complete rather than blank.
The path length is measured from the same rounded coordinates the browser will parse, so the declared dash length and the real one agree to within a pixel and the figure never finishes with a visible seam. Drawing is deferred until a plate scrolls into view, and the six product plates rewind and redraw when they return — but only after leaving the viewport completely, so a finished engraving is never wiped while it is being looked at.
Nothing is random. The curves are generated by a small deterministic sequence with a fixed starting value, so every build produces byte-identical paths. The site you are reading draws the same figures as the one built a year from now.
iv. Materials
Newsreader sets the headings and the body both — a serif reading text is the catalogue move, not the website one. DM Mono carries every caption, label and plate number, so the apparatus around a figure is visibly a different register from the prose.
An ivory ground and a warm near-black, with one oxide red used only for rubrication: figure numbers, ordinals, the pen itself. No dark mode. The page commits to being paper.
Astro, with no drawing library and no client framework. The curve mathematics is a few hundred lines of plain functions; the animation is one small script shared by every page.