Generative Geometry

L-System Plant

An L-system fractal plant grows branch by branch from the canvas bottom, swaying gently; clicking triggers a wobble and regrows a randomized plant.

canvasmedium complexitymoderate motionclick

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →

Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Nature or generative art backgrounds, procedural demo showcases, ambient desktop wallpaper loops.

When not to

Layouts requiring legible text overlays — the incremental draw loop repaints constantly. Low-end devices with very small viewports may stutter during grow phase.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change hue base to 200 for a blue-teal palette, increase L-system iterations from 4 to 5, and slow growth speed by changing grow+=0.006 to grow+=0.003. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

hue base (hue=90+Math.random()*60)
branch angle range (baseAngle=20+Math.random()*12)
growth speed (grow+=0.006)
segment length (len=s*0.018)
L-system iteration count (i<4)
leaf dot radius (arc radius 1.6)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

IIFE wrapper
prefers-reduced-motion guard (reduce branch)
visibilitychange pause/resume
DPR-aware canvas sizing in resize()
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

L-system string for 4 iterations is long — bumping to 5+ iterations may cause jank during the grow phase
No aria role on canvas; purely decorative with no keyboard interaction
sway wobble resets on every pointerdown but does not animate smoothly back to zero on slow devices

l-systemfractalplantgenerativecanvasproceduralnature

More Generative Geometry components

Voronoi Shatter14 drifting sites partition the canvas into cool-blue Voronoi mosaic cells; moving the pointer nudges the nearest site toward the cursor.
Auto-MazeDepth-first maze carves itself wall by wall on a dark grid with shifting hue; a bright dot marks the active cell. Resets with a new color on completion.
Truchet Tiles8x8 grid of rainbow quarter-arc Truchet tiles that flip orientation in slow sine waves, weaving shifting interlocked curves across a dark background.
SpirographA hypotrochoid spirograph traced progressively on canvas with a shifting hue; each cycle completes then resets with new random radii and color.
Rotating Mandala12-fold mandala of 5 nested polygon rings that counter-spin, breathe in scale, and cycle through lilac-gold hues. Tap adds a spin impulse.
Moiré InterferenceThree drifting concentric ring sets in cyan, pink, and green blend additively to create shifting moiré patterns. Pointer steers one ring center.