Draw My Canvas / studio

Color Symphony

Stacked sine layers scrolling in and out of phase like a waveform.

Plate 07waveform

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

Seven horizontal wave layers stack across the frame. Each layer is a single line whose height at any point is the sum of two sine waves of different frequency — one long, slow swell and one shorter ripple — offset a little from the layer above it.

Time scrolls the whole stack, so the waves slide continuously left and right. Where a fast ripple in one layer lines up with a slow swell in another, the lines bunch and separate, producing the shimmering moiré you’d see through two overlaid nets.

What to look for

The layers shade from cobalt at the edges to coral in the middle, with the peak layer picking up a bone highlight, so the band has depth instead of reading flat.

No layer is ever cleared to a hard line — the redraw each frame is what animates the phase, giving the calm, endless scroll.

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

More from the gallery

All 22 animations in the gallery →