Draw My Canvas / studio

Fractal Dreams

A branching L-system tree swaying toward ever finer depth.

Plate 08L-system

Waiting for the animation above to load…

What lands in the file, and what the width does

One click writes whatever the animation is drawing at that moment to a PNG, with the drawmycanvas.com mark drawn into the picture rather than laid over it. Leave the width box empty and you get the stage exactly as your browser rasterised it — your window’s width times its device pixel ratio, which is about 1,600 px across from a 1280‑px window on a HiDPI laptop and about 353 px from a 390‑px phone.

Type a width instead, or take a preset, and the frame is redrawn into a canvas that wide: the height follows the stage’s own shape and the mark scales with it. The stage is 16:9 on a wide window and 4:3 below 560 px, so a width of 1200 saves 1200×675 on a laptop and 1200×900 on a phone. 1200 px is the width Open Graph and X link cards are cut from — the canonical card is 1200×630, and a card crops the extra height rather than letterboxing it.

Honest limits. Asking for more pixels than the stage was drawn at resamples pixels that were never drawn: a 1920‑px file exported from a 353‑px phone stage is bigger, not sharper. A very large width is a real memory allocation and a browser is allowed to refuse it; when that happens the line above says so plainly and nothing else on the page changes. PNG only — no JPEG, no WebP, no animated export. And nothing is uploaded: the picture is assembled in your own browser, so no frame of this plate ever reaches us.

Live on an HTML canvas · vanilla JavaScript · no dependencies Open fullscreen

About this piece

Fractal Dreams grows a recursive tree. Start with one trunk; at its tip, split into two branches angled left and right; shorten each by about a third; then do the same thing again at every new tip. Repeat eight levels deep and a single line becomes a full canopy — the essence of an L-system, the grammar botanists use to model plants.

The rule is only a few lines of code, but because it calls itself the detail multiplies with every level: 2 branches, then 4, then 8, all the way to hundreds of twigs. That is self-similarity — zoom into any branch and it looks like a small copy of the whole tree.

What to look for

A single global sway value, driven by a slow sine, bends every branch angle at once, so the whole tree breathes like it’s caught in a light wind.

Ink and line-width are keyed to depth — thick cobalt near the trunk fading to thin coral at the tips — which reads as distance and makes the canopy feel three-dimensional.

Curious how the loop and canvas fit together? Read how it works →

More from the gallery

All 22 animations in the gallery →