Circle Packing Screensaver
Circle Packing is a free, in-browser generative art screensaver. Circles are seeded at random points that are not already covered and grow until they touch a neighbour or the edge, at which point they freeze. New seeds keep arriving in whatever gaps remain, so the circles get progressively smaller until nothing more fits. Then the packed sheet fades and a new one begins. Nothing to download, and ESC exits at any time.
Live preview
Press ESC to leave fullscreen. Settings are saved in your browser only.
How the Circle Packing screensaver works
Each frame the saver tries a dozen random positions. A position is accepted only if it lies inside the packing region and outside every existing circle; an accepted one becomes a new circle of radius one. This rejection sampling is what makes later circles small: the free space shrinks, so only tiny gaps are left to land in.
Every growing circle expands at a steady rate. Before each step it is checked against the boundary and against every other circle; the moment expanding would overlap something, it is clamped to exactly touching and marked as finished. Larger circles are also capped at the Largest circle setting.
When hundreds of consecutive placement attempts fail, the region is treated as full. The finished sheet is held, then faded, and the process restarts with a fresh random seed. The region can be the whole screen or a large disc.
Colour comes from the palette and each circle’s birth order, with lightness rising for larger circles, so the giants read as warm and the gap-fillers as cool.
Circle packing, tangency and the Apollonian gasket
Packing circles is a classical problem with two quite different flavours. In one, you want to fit as many equal circles into a region as possible; the best-known result is that a hexagonal arrangement is the densest packing of equal circles in the plane. In the other, circles are allowed to differ in size, and the question becomes how they can fill a space by touching one another, the setting of generative art and of several branches of pure mathematics.
The Apollonian gasket is the classical limiting case. Start with three mutually tangent circles and fill each curved gap with the largest circle that fits; repeat forever, and you get a fractal whose gaps shrink toward zero area. It is named for Apollonius of Perga, who studied the problem of finding a circle tangent to three given circles. Descartes’ circle theorem links the curvatures of four mutually tangent circles, and the gasket’s fractal dimension is about 1.3057.
A random growth process like the one used here is different. Each circle starts tiny at a random spot and expands until it hits something, so sizes depend on arrival order rather than on a strict rule. The result is a looser texture with no guaranteed gasket structure.
A worked example
At the defaults — Whole screen, Speed 4, Largest circle 90 px, Sunset palette — a few dozen large rings inflate in the first seconds and lock against each other, then the spaces between them fill with medium rings, then with hundreds of tiny ones, until the screen is a mosaic of tangent circles. After a short pause it fades and packs again in a new arrangement.
Settings & tips
- Pack inside a circle for the classic “circle of circles” poster look.
- A small Largest circle gives a uniform, foam-like texture; a large one gives a few giants and lots of dust.
- Mono with a light accent on black looks like a bubble raft photographed from above.
Frequently asked questions
- Is this the same as Apollonian gasket packing?
- Related but not the same. An Apollonian gasket places each new circle exactly tangent to three existing ones and is a strict fractal; this saver grows circles from random seeds until they touch, which gives a looser, more organic packing that changes every run.
- Why do the later circles get so small?
- Because a new circle can only start in uncovered space, and as the sheet fills, the only uncovered space left is the small gaps between existing circles. Each generation fills gaps left by the last.
- Will this slow my computer down?
- It is tuned to run smoothly on an ordinary laptop. If it feels heavy, raise the Pixel size or lower the speed in the settings; every control takes effect immediately.
- Is the Circle Packing screensaver free?
- Yes. It runs free in your browser with nothing to download or install, and it keeps working offline once the page has loaded.
- How do I exit the Circle Packing screensaver?
- Press the ESC key at any time to leave fullscreen and return to the page.
- What is Descartes’ circle theorem?
- It relates the curvatures of four circles that all touch one another, giving a formula that lets you find the fourth circle from the other three.
- Can circles ever fill a region completely?
- Not exactly. Circles always leave gaps, so even an infinite Apollonian packing leaves a set of zero area but fractal dimension greater than one, about 1.3057.
- Why do circles often show up in nature?
- Bubbles, cells and droplets favour round shapes because a circle minimises boundary length for a given area.