The basic flow
Upload an image, choose how to divide it into zones, configure each zone's circle sizes and colours, then hit Generate. Download the SVG when you're happy with it. That's the whole thing.
Step 1 — Image
Upload a JPEG, PNG, WebP, AVIF or GIF. You can also drag an image directly onto the preview area. The image is scaled down internally for performance — the SVG output is vector so it'll scale to any size.
The adjustment sliders let you prep the image before the tool analyses it:
- Brightness / Contrast — widen the tonal spread so zones are better separated.
- Gamma — pull detail out of shadows (below 1.0) or compress highlights (above 1.0).
- Saturation — boost colours before switching to Hue mode, or desaturate before Brightness mode.
- Blur — smooth out noise or fine texture. Noisy areas produce tiny circles that don't pack well — a small blur helps a lot.
Hit Reset (next to the slider label) to restore all adjustments to zero.
Step 2 — Mode
This is the most important choice. Pick the wrong mode and the zones won't make sense for your image.
Brightness mode splits the image by luminance — how light or dark each pixel is. Use this when the areas you want to treat differently have different tones. Most images work best here. Good for: portraits, logos, text, silhouettes, anything in black and white, anything where darker areas should have more or smaller circles than lighter areas. The threshold slider lets you exclude the background — pixels above the threshold value are treated as white/empty and excluded from packing.
Hue mode splits the image by colour. Use this when the areas you want to treat differently have different hues, not just different brightness levels. Good for: colourful illustrations, flags, charts, images with bold distinct colours — red areas, blue areas, green areas and so on. It doesn't work well on photos where colours blend into each other or on greyscale images. In Hue mode you get optional Black and White zones to catch near-neutral pixels that don't have a clear hue.
A quick rule of thumb: if you'd describe your image by its tones ("the dark bit", "the light background"), use Brightness. If you'd describe it by its colours ("the red section", "the blue sky"), use Hue.
Set the number of zones here too. More zones means more control but more configuration in the next steps. Start with 2 and add more if you need finer control.
Step 3 — Zones
Configure the boundaries of each zone. The preview updates live.
In Brightness mode: each zone shows as a horizontal strip representing a luminance range. Drag the handles to move the boundaries. The preview colours each pixel according to its zone so you can see exactly what's captured.
In Hue mode: drag the handles on the colour wheel to set each zone's hue range. Zones cover a sweep of the wheel — widen or narrow the arc to include more or fewer hues. If your image has a limited palette, move the handles close together around those specific hues.
The Background zone (brightness mode) captures everything above the threshold — usually the white background. Enable it if you want circles in the background too.
Step 4 — Circles
Set the min and max circle radius for each zone. The packer places circles largest-first, so the max size determines the biggest circles that'll appear; the min is the smallest it'll bother with before moving on.
Clicking a zone's header in the list isolates that zone in the preview so you can see exactly what area it covers.
Colour options per zone:
- Sample from image — each circle takes the colour of the pixel underneath it. Gives a naturalistic result.
- Flat zone colour — all circles in the zone use the same colour, picked from the image's average for that zone. Good for a graphic, reduced-palette look.
- Custom colour — pick any colour you like.
Hit Generate Circles to run the packer. It runs in a background thread so the page stays responsive. Large images with many small circles take longer. Hit Generate again at any time to re-run with updated settings.
When you're happy, hit Download SVG. The file opens cleanly in Illustrator, Figma, Affinity Designer, and Inkscape.