Colophon · how it was made
SHUMI-EN is a fictional hillside bonsai nursery, built for anyone who has ever wanted to feel how a single cut echoes down decades of growth. The page has one job: hand you the shears and let a branching engine answer honestly — every snip redirects the vigour, every wire bends the future, and twenty simulated years arrive in a few seconds.
Four colours, all pulled from the plant and its pot
A vermillion seal #A8433A appears once, on a tree trained past sixty years — the nursery's exhibition stamp, earned rather than decorative.
Zen Old Mincho + Karla
A Japanese Mincho with true kanji coverage, so the section labels (作業台, 手入れ, 台帳) and the vertical watermark are set in the same hand as the headlines. Its high-contrast strokes give the numbers on the bench — age, seed, cuts — the weight of an engraved plate.
A grotesque with a slightly humanist warmth for controls, labels and running text. It stays legible at 12px in the tool panel and never competes with the Mincho above it — the split keeps the serif reserved for moments that matter.
L-system · pipe-model widths · SVG · vanilla JS, no libraries
The tree is a seeded L-system grown one year at a time. A tiny deterministic PRNG means a seed number always yields the same tree under the same weather, which is what lets the ledger raise the same specimen every time. Each year, tips branch with a probability shaped by apical vigour, distance from the trunk, height and age; lateral buds fork off the strong ones. Trunk and branch widths use a pipe model — a parent is thick enough to carry the sum of its children — and, crucially, width never shrinks: old wood lignifies and keeps its girth, so the tree carries a visible memory of how big it once needed to be.
The signature element — shears that alter twenty years. Pruning is not a visual trick. A cut deletes an entire subtree from the growth graph and flags the parent with spare buds (the scar). From that year on, the vigour that fed the removed branch floods the survivors, so a pruned tree genuinely grows fewer, stronger lines. Because growth is re-simulated from the changed graph, fast-forwarding twenty years shows the real consequence of the snip — not a canned animation. The whole scene is a single inline SVG, so the same document you prune is the one you export: Export SVG serialises the live tree, strips the interaction layer, and stamps its seed, age and history into the file's description.
Copper wire clamps a branch's rest angle; every shoot it sends out afterwards inherits the new line. Seasons re-tint a wash rectangle and swap foliage for blossom, green, ochre, then bare wood — with drifting petals in spring and a few shed leaves settling on the soil in autumn. No canvas, no WebGL, no external library: just SVG paths recomputed each frame.
Three passes, re-reading the rendered result each time