Plate Nº VIII · Field guide · Honest edition

How this garden was built

§ 01The concept

Verdant is a fictional "generative botanical atelier": a Victorian herbarium whose pressed flowers happen to be algorithms. The brief demanded one committed idea: plants that grow as you scroll, drawn live, never as images. Everything else (specimen plates, bad Latin, ruled paper) exists to make that one idea feel collected rather than demoed.

§ 02The actual techniques

There are no frameworks and no build step: plain HTML, CSS, and two vanilla JavaScript files. The engine (js/plant.js) expands classic Lindenmayer systems: each species is an axiom plus rewrite rules (the fern is the textbook X → F−[[X]+X]+F[+FX]−X with leaf symbols grafted in), run 3–6 generations, then interpreted by a turtle with a bracket stack. A seeded mulberry32 PRNG jitters every angle and segment length, so each seed number is a reproducible individual, not a random doodle.

Growth is the signature trick: during the turtle walk every segment records its distance from the root. Rendering at time t draws only geometry below the "sap line" t, lerping the one segment it bisects, so plants genuinely grow tip-ward. The hero fern maps that t to scroll progress inside a 340vh sticky section (smoothed with a lerp in one shared requestAnimationFrame loop); specimen plates germinate via IntersectionObserver; the playground rebuilds the whole genome on every slider input. Stems batch into Path2D buckets by line width for performance. Leaves are six bezier shapes (frond, ovate, linear, fan, round, needle); wind is a cheap shear, offsetting each point by sin(time + dist) scaled by its distance from the root. The paper grain is an inline SVG feTurbulence data URI; fonts are Fraunces and IBM Plex Mono from fonts.bunny.net. prefers-reduced-motion renders every plant fully grown and stills the wind.

§ 03Three passes, honestly

The site was screenshot-verified with a Playwright harness after each pass: desktop and 390px mobile, console errors included. Pass one grew the skeleton and caught fit-scaling bugs (plants clipped their leaf tips). Pass two was composition: richer specimen density, the herbarium readout, dotted-leader cultivation notes, contrast fixes. Pass three was polish: type rhythm, mobile layout, the guide you are reading.

§ 04Prompting an agent to grow one

Ask for exactly this: "Build a static site where L-system plants grow on a canvas, scrubbed by scroll. Write the L-system engine yourself: axiom, stochastic rewrite rules, turtle with a stack, seeded PRNG. Record per-segment distance-from-root and render growth as a moving threshold. Give me six distinct species as herbarium plates with Latin names, a slider playground that rebuilds the plant live, and a strict palette: cream, deep fern, terracotta, pollen. Then screenshot it, criticise it, and iterate three times." The last sentence matters most.