Every plant in Verdant starts as a few symbols and a handful of rules that rewrite those symbols over and over — an L-system, Aristid Lindenmayer's 1968 idea for describing how plants grow. The garden is the whole page: a full-viewport canvas from sky to soil, with the headline floating in the sky and the controls hovering over the scene. Click the ground and a plant is drawn, live. No two are the same, and none is an image.
What it demonstrates
That organic-looking form can come from a tiny, exact rule rather than a drawing — and that a generative toy reads very differently when it is a place instead of a widget. You arrive at an established garden (grown fresh for you, every seed unique) rather than an empty bed; the explainer lives in a slide-in panel so the scene never gives way to a document. It also shows how to keep a generative, animated canvas honest about accessibility: a keyboard path, a reduced-motion path that draws the finished garden instantly, and controls that are real HTML, not canvas paint.
The techniques, honestly named
Bracketed L-system — an axiom and production rules are rewritten in parallel for a few steps, then a "turtle" walks the resulting string, drawing on canvas. [ and ] save and restore the turtle's position, which is exactly how a single line learns to branch.
Deterministic variation — a small seeded PRNG (mulberry32) sets each plant's rule, angle jitter, height and left/right mirror, so the same seed always regrows the same plant. That is what makes saving the garden possible.
The garden is the page — one full-viewport canvas layers sky, haze, two seeded ridgelines of hills, the soil, grass tufts and the plants; the UI floats over it in a few translucent chips and one console. On first arrival a starter border of layered bushes and taller whips grows in, staggered, over about two seconds — so the scene is lush before you touch anything.
Grown, not popped in — a new plant's segments are revealed over about 1.3 seconds, leaves fading in last; several plants can grow at once. Under prefers-reduced-motion the finished plant is drawn instantly instead.
Seasons by interpolation — one slider spans the year; sky, soil, hills, branch and leaf colours, foliage density and blossom or snow are all interpolated between winter, spring, summer and autumn anchors. A light, capped particle layer adds petals, falling leaves or snow.
A resident bee — a small procedural inhabitant that wanders the canopy and flies over to hover above whatever is currently growing; it sits deep winter out. Drawn from ellipses, no sprite, and skipped entirely under reduced motion.
Saved between visits — each plant is stored as a compact descriptor (position, seed, rule, height, mirror) plus the season in localStorage, and rebuilt on return. Clearing the bed is remembered too.
Quiet performance — requestAnimationFrame only, device pixel ratio capped at 2, the static scene cached on an offscreen canvas and blitted each frame, and the whole loop paused whenever the tab is hidden (under reduced motion no loop runs at all).
Recreate it
The full recreation prompt — the exact Google Fonts, palette hexes, the L-system rule sets, the section map, the seasons and persistence, and the quality bar — is in the Showroom vault.