Herbarium syntheticum · maker's notes
Superformula is a botanical plate for an equation: Johan Gielis' 2003 generalisation of the circle, mounted like flora. Twelve exact silhouettes carry herbarium tags recording the parameters that grew them, and one living cell tours parameter space, settling now and then on a named form. Its single job: make a viewer feel that one formula quietly owns half of nature's outlines.
Crimson Pro (300, with true italics) is the botanist's hand — the display face for the headline, the Latin binomials and all reading copy. Its light weight at 124px gives the hero the feel of an engraved plate title rather than a tech landing page. Martian Mono (300–500) is the instrument: parameter tags, the live readout and every eyebrow, letter-spaced wide and set small, exactly like the typewritten labels glued to real herbarium sheets. The one moment of bravery is the equation itself — mono at display size with serif italic variables breathing inside it.
Everything is inline SVG driven by ~230 lines of vanilla JavaScript; no libraries, no canvas, no raster. Each specimen path is sampled straight from the superformula r(φ) = (|cos(mφ/4)/a|^n₂ + |sin(mφ/4)/b|^n₃)^(−1/n₁) at 480 steps, normalised to its cell. The printed tags are not captions — they are the inputs: the drawing code reads each cell's data-m/n1/n2/n3 attributes, so the tag is by construction the exact parameter set that drew the outline above it.
The signature element is the living cell, and its real problem is that the superformula only closes when m is an integer — naively tweening m tears a visible seam in the curve. The trick: when n₁ = n₂ = n₃ = 2 and a = b = 1, the formula is a perfect circle for every value of m. So every tour is routed through that circle — ease the n-exponents down to 2, swap m silently while the shape is m-invariant, then ease out to the next form. The morph is mathematically exact at every frame, the curve never opens, and the detour becomes the site's quiet thesis: every silhouette returns through the circle (SF-01 flashes each time the tour passes through it). n₁ is clamped at 0.35 inside the evaluator so no eased path can approach the n₁ → 0 blow-up.
Motion is a three-phase clock (hold 1.6s → to-circle 3.6s → from-circle 3.6s) with a cubic in-out ease, a dial dot orbiting the live cell once per cycle, and the readout printing the true interpolated parameters. Tapping any pressed specimen queues it as the next destination — honoured at the next circle pass, announced in the state line, and confirmed with a coral "= vivum" tick when the cell settles on it. The loop pauses on document.hidden with a clamped delta clock, and prefers-reduced-motion (CSS media query and a matchMedia gate) renders the cell settled on the starfish with its tags printed — summoning still works, it just cuts straight to the settled form.
Every parameter set was numerically audited before layout — sampled at 1,440 angles for boundedness and silhouette strength; a flat first-draft flower (max/min radius 1.17) was replaced with the unequal-pair corolla (2.08) and the 16-lobe diatom valve (2.41). The spec's chartreuse was confirmed as line/mark only and two inks were derived from it: ivory #EDE9DA for reading copy and pressed-sage #B9C2AE for 10.5px tags (9.6:1 measured). Synthetic bolding was killed on the mono readout (Martian Mono 500, not faux 700), a stray negative word-spacing that squashed the tags was removed, and the first hold was shortened so the seven-second resting frame catches the cell mid-morph with its numbers spinning. A 1440px screenshot then caught the hero equation clipped mid-formula by its own column — the site's whole thesis half-hidden — so it was re-set as a proper two-line display equation, broken before the + with the continuation indented, sized to fit its box at every width.
Added the summon interaction: every pressed cell becomes a keyboard-focusable button that queues its parameters as the living cell's next destination, so the sheet stops being a poster and becomes an instrument. Added the two second-read details — the circle specimen SF-01 flashes on every m-swap ("every tour passes through it", as its own label claims), and whichever specimen the live cell settles on earns a coral "= vivum" tick while their outlines briefly agree. Waypoints were unified with the DOM so a summoned form and its printed tag can never drift apart.
Headless-driven at 1440 and 375: the sheet reflows 4 → 3 → 2 columns with the living cell going full-width, scrollWidth stays at 375 with the header nav fully inside the viewport. The signature was driven, not just loaded — a scripted click on SF-10 asserted the readout reached m 19 and the state line settled on Rota dentata with the matched tick applied; two frames 1.3s apart hashed differently for liveness; reduced-motion emulation asserted a settled starfish with a static readout. The settle screenshots exposed one real bug the load probes missed: every pressed outline kept a permanent notch at twelve o'clock, because vector-effect:non-scaling-stroke renders dashes in screen units while the draw-on intro measured them with user-unit getTotalLength(), and its cleanup hinged on a transitionend that never fired. Fixed by reserving twice the path length of dash — the settled frame is complete no matter what — and clearing the dash styles on a guaranteed timer. Chanel rule: the axis crosshair planned for every static cell was cut — it survives only in the living cell, where the coordinates actually mean something.
The form family is real mathematics: Johan Gielis, "A generic geometric transformation that unifies a wide range of natural and abstract shapes", American Journal of Botany, 2003. The specimen names are our own Latin — the parameters are the botany.