Draw My Canvas / studio

Cosmic Circles

Soft luminous orbs drifting through slow, breathing orbital rounds.

Plate 03orbital

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 soft orbs trace circular orbits around the centre of the frame. Each orb is not a hard disc but a radial gradient — bright in the middle, transparent at the edge — so it reads as a pool of light rather than a shape.

The orbs are drawn with the canvas set to “lighter” (additive) blending, which means overlapping light adds instead of covering up. Where two orbs cross you get a brighter, warmer core, the way overlapping stage lights pool on a floor.

What to look for

The orbit radius is itself driven by a sine wave, so the whole constellation slowly breathes — expanding outward and drawing back in — rather than spinning at a fixed distance.

Every third orb is coral; the rest are cobalt, so the warm and cool lights chase each other around the ring.

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

More from the gallery

All 22 animations in the gallery →