Stipple in Motion!

Two hundred and fifty-one things drawn in dots, from a black hole to a kelp forest, each one a single script and a canvas tag. Free, MIT, nothing behind a paywall. If one saved you an afternoon, shout me a beer.

40 of 251
Ephemeris

Gargantua

A black hole, its disc lensed over the top

Ephemeris

Andromeda

The nearest big galaxy, tilted, slowly turning

Ephemeris

Orion

The nebula, its dust and the Trapezium

Ephemeris

Saturn

Rings edge-lit, the gap, a moon going round

Coriolis

Yasi

Cyclone Yasi, spinning the southern way

Coriolis

Fork lightning

The strike, the branches, the afterglow

Coriolis

El Reno

The widest tornado, rope to wedge

Coriolis

Morning Glory

The roll cloud coming in over the Gulf

Swarm

Starlings

A murmuration wheeling and folding

Swarm

Gretna

The roost coming in at dusk

Swarm

Bait ball

Spins, then opens when a predator passes

Swarm

Fireflies

Blinking over a meadow on their own clocks

Ignis

Bushfire

A front crossing the canvas, embers on the wind

Ignis

Campfire

Logs, flames and smoke carrying on up

Ignis

Fireworks

Shells on a schedule, sparks falling

Ignis

Lava lake

Lava cracking through its crust

Swell

Nazaré

The big wave standing up and breaking

Swell

Waterfall

Tearing into mist at the bottom

Swell

Whirlpool

Spiralling down to a dark eye

Swell

Fountain

Jets that dance to their own clock

Escapement

Clockwork

Gears meshing at the ratio of their teeth

Escapement

Anchor

An escapement letting one tooth slip per swing

Escapement

Lissajous

A harmonograph drawing its figure

Escapement

Radar

A sweep going round, blips fading

Dendrite

Cortex

Neurons wired in a ring, firing

Dendrite

Snowflake

Throwing branches as it grows

Dendrite

Mitosis

A cell pinching itself in two

Dendrite

DNA

A strand winding past

Chladni

Ripple tank

Rings crossing and interfering

Chladni

Chladni plate

Sand settling on the still lines of a ringing plate

Chladni

Cymatics

Water on a speaker locking into a lattice

Chladni

Speaker

A cone pumping the air in front of it

Tendril

Wheat

A field rippling as the gust runs through

Tendril

Sunflower

Turning with the day

Tendril

Oak

Bending in the wind, leaves going

Tendril

Kelp forest

Swaying in the swell

Lumen

Lighthouse

A beam sweeping the mist

Lumen

Pool

Sunlight webbing the floor

Lumen

Mirror ball

Spots wheeling round the room

Lumen

Rainbow

Over a shower, rain still falling through

Four from each library. All two hundred and fifty-one are on the export page, as a PNG, GIF or WebM at any size. Want one that isn't here? Open an issue with a photo of the thing.

Ten libraries

Each one is a single script with the same shape: a class on the canvas and data attributes for every option. The dots match, so they all sit together on a page.

Ephemeris 0.12.1

Things in the sky.

50 named bodies

Coriolis 0.8.0

Weather, as the satellite sees it.

65 named events

Swarm 0.3.0

Living things, every one a function of time.

23 named swarms

Ignis 0.2.0

Fire: flames, embers, smoke.

21 named fires

Swell 0.1.0

Water: every dot a fixed place on it.

20 named waters

Escapement 0.1.0

Machines: the tick lands on time.

17 named machines

Dendrite 0.1.0

The very small.

12 named things

Chladni 0.1.0

Sound, made visible.

14 named sounds

Tendril 0.1.0

Plants, leaning on one gust field.

15 named plants

Lumen 0.1.0

Light: caustics, beams, rainbows.

14 named lights

How to use

Paste two lines. The copy button on any card above gives you both. Your coding agent can do it from the README if you'd rather not.

1

Add the script

From the repo or a CDN. One file, nothing to install.

<script src="https://cdn.jsdelivr.net/gh/TonkaTuff/ephemeris@v0.12.1/dist/ephemeris.min.js"></script>
2

Drop in a canvas

Height is the preset. Width lets wide ones stretch. Every option is a data attribute.

<canvas class="orb" width="64" height="64"
        data-orb-body="andromeda"></canvas>
3

Make it yours

Six CSS variables, read every frame, so a theme switch applies live.

canvas.orb {
  --orb-cold: #0a7a5a;
  --orb-hot:  #e8fff6;
}

Say thanks

I'm not going to charge a monthly fee for a loading spinner. Everything here stays free and MIT, commercial use included. If something saved you time and you feel like it, shout me a beer or a coffee. If not, no hard feelings.

Beer goes through GitHub Sponsors. Coffee goes through Ko-fi, which doesn't need an account.

FAQ

The things people ask.

Is it really free?

Yes. MIT licence, use it in anything, commercial included. Nothing here will move behind a paywall later.

What's the catch?

There isn't one. People saying thanks with a beer or a coffee is the whole business model.

What do I need?

A browser with Canvas 2D, which is all of them. No framework, no bundler, no npm install. It works inside React, Vue, Svelte or plain HTML the same way: put a canvas on the page.

Does it work with coding agents?

Yes. Point Claude Code, Cursor or Codex at the README and it'll wire the script and a canvas in. Every option is a data attribute or a CSS variable, so there's nothing to configure in JavaScript unless you want to.

Can I ask for something?

Open an issue on the repo. The roadmap's in the README and I pick from it in whatever order looks fun.