Draw My Canvas / studio

Color Symphony

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

Plate 07waveform
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 →