Vector Circle Packer

Vector Halftoner Open App

Image in.
Circles out.

A free tool that fills your image with tightly packed circles and exports clean SVG. Create bubble art, Ishihara-style colourblind effects, stippling, petri dish illustrations — anything that calls for circles.

Just take me to the tool
Large Medium Small
The gist

It does what it says

Upload an image. It gets divided into zones. Each zone fills up with circles, largest first, as tightly as they'll fit. You download a clean SVG. That's it.

Greedy packing

Circles are placed largest-first using a distance transform and max-heap. Every gap gets filled as tightly as possible. Sub-pixel refinement squeezes out a bit more.

Clean SVG output

Just circles. No nested groups, no raster cruft. Opens cleanly in Illustrator, Figma, Affinity, Inkscape — whatever you use. Recolour, resize, done.

Zone-based control

Split your image into up to 8 zones — by brightness or by hue. Configure circle sizes, colours and fill mode independently per zone. Different areas, different vibes.

How it works

Four steps.
No faff.

1
Drop in your image

JPEG or PNG. Adjust brightness, contrast, gamma and blur to prep the source. Hit Reset if you muck it up.

2
Pick your mode

Brightness mode splits by luminance — dark areas, mid-tones, highlights. Hue mode splits by colour — reds, blues, greens, whatever your image has.

3
Configure zones

Set zone boundaries. In brightness mode you get a live preview showing exactly which areas fall into each zone. Hue mode has a colour wheel with draggable handles.

4
Set sizes and generate

Set min and max circle radius per zone. Choose per-circle colour sampling, a flat zone colour, or pick your own. Hit Generate. Download SVG.

Zone modes

Two ways to slice your image

Brightness mode is the workhorse. Hue mode is for when your image has distinct colour areas you want to treat differently.

Brightness mode

Splits the image by luminance — dark, mid, light. Set a threshold to exclude the background. Good for portraits, logos, anything with clear tonal contrast. Works on pretty much everything.

Up to 8 zones Live preview Background zone
Hue mode

Splits by hue angle on the colour wheel. Drag the handles to carve out exactly which colour range each zone captures. Optional black and white neutral zones for greys. Good for colourful illustrations.

Hue wheel Black zone White zone
The fine print

No catch. Seriously.

Completely free

No AdWords rubbish. No fake Download buttons that are actually ads. No paywall after three uses. Just a free tool.

Stays in your browser

Your images are processed locally. They never leave your machine, never touch a server. I don't have them and I don't want them.

No account needed

No email address. No password. No profile. No newsletter you didn't ask for. Just the tool.

Runs off the main thread

Circle packing runs in a Web Worker so the UI stays responsive while it grinds away. Big images with lots of zones take a moment — the tab won't freeze on you.

FAQ

Common questions

Upload an image with clear tonal contrast — like a number or letter on a plain background. Use Brightness mode with 2 zones. Set both zones to similar circle sizes so the overall density looks uniform, then choose colours that are difficult to distinguish under colour-vision deficiency (e.g. reds and greens). The result mimics the Ishihara plate style closely.

Yes. Start with an abstract blob-shaped source image — a dark shape on a white background works well. Use Brightness mode with 2–3 zones and vary the circle sizes significantly between zones to suggest different colony sizes. Earthy or bacterial colour palettes (ochres, greens, off-whites) sell the effect. Export SVG and drop into Illustrator or Figma to add a circular mask.

Use Brightness mode with 3–4 zones. Set small max circle sizes (2–4px) and keep the min close to the max so circles stay uniform in size. Darker zones should get smaller, denser circles; lighter zones can have slightly larger ones with more space between. A high-contrast portrait or ink-style illustration gives the best stippling result.

Halftone uses a regular grid of dots that vary in size to simulate tone — the pattern is uniform and repeating. Circle packing fills space as tightly as possible with no fixed grid, so circles of different sizes nestle into whatever gaps are available. The result is organic and irregular rather than mechanical. If you want a traditional halftone, try Vector Halftoner.

Yes — the output is clean, flat SVG with no embedded rasters, no masks, no nested groups. Just circles. It opens without issue in Illustrator, Figma, Affinity Designer, and Inkscape. You can recolour, rescale, apply effects, or combine it with other artwork without any cleanup.

Both, though results vary. High-contrast photos — portraits, product shots, strong silhouettes — work well in Brightness mode. Colourful illustrations with distinct colour areas work well in Hue mode. Low-contrast or very busy photos can look muddy; bumping the contrast and gamma sliders in Step 1 usually helps. The blur slider is useful for smoothing out noisy areas that would otherwise produce tiny circles that don't pack well.

Right, that's enough reading.

Go make something. If you like it, share it with your designer mates.

Open Vector Circle Packer