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. For a big file that is sharp, use Save as wallpaper: it draws the plate again from scratch at exactly 1179×2556 or 1290×2796 (phones), 1920×1080, 2560×1440 or 3840×2160 (4K), so every line is rasterised at that size and the shape is the screen’s, never stretched. Because the plate restarts, a wallpaper is a fresh run of it rather than the exact frame on screen; it is given as long as the stage has been running, up to 20 seconds, to develop. 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. Stills are PNG only — no JPEG, no WebP. On browsers that can record video, Record a clip saves 5, 10 or 20 seconds of the running animation as MP4 or WebM (whichever this browser can encode) at the same width, with the mark in every frame. A clip is not a seamless loop, it has no audio, and a width bigger than the stage is resampled rather than sharper — only the wallpaper is redrawn at its size. Where a browser cannot record video the button never appears and a PNG is the only export. And nothing is uploaded: the frame or clip 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 32 animations in the gallery →