Circle Dot Art Maker

A 3:2 photo at 48 dots across becomes 1,536 circles: each one takes the average color of its cell, and halftone grows the circle as the cell gets darker

Turning a photo into circle dots means dividing it into evenly spaced cells and drawing one circle in each, filled with the average color of the pixels inside that cell. You choose how many dots go across, and the tool sets the number of rows from the image's proportions. Split the 960 × 640 px sample into 48 dots across and you get 32 rows and 1,536 circles in all.

If every circle stays the same size, the picture is drawn by color alone, like beads or an LED sign. Choose "By tone (halftone)" and circles grow in the darker cells, which looks like the dots in a printed newspaper. The six style swatches next to the picture are previews drawn from the image you loaded, and "Dots per color" below shows how many circles were drawn in each color. Your image is processed only in this browser and is never sent to a server.

When to turn a photo into circle dots

• You want a pop art poster or a merch graphic: halftone is the printing method of showing tone with dots of different sizes. The Ben-Day dots, devised by the printer Benjamin Day in 1879, became widely known through Roy Lichtenstein's pop art. The "Pop art" style cuts the picture to six colors and varies circle size with tone to get that look.
• You are planning a bead or sticker pattern: one circle is one bead. Hama Midi beads are 5.0 mm across, so 48 beads wide comes to about 24 cm, and Mini beads (2.5 mm) give about 12 cm. If you reduce the picture to the number of bead colors you own, "Dots per color" is exactly how many beads of each color you need.
• You are making an LED-board or neon-style thumbnail: widely spaced circles on a black background look like a screen of lit bulbs. The simpler the picture, the better it reads.
• You are sending it to large-format print or a cutting file: saved as SVG, every circle stays a real shape, so edges stay sharp at any size, and circles of the same color are grouped, which makes it easy to recolor them in one step in a design program.

How to use it

1. Add an image: click "Choose image" or drag a picture onto the work area. A copied image can be pasted with Ctrl+V (⌘V).
2. Pick a style: click one of the six round swatches and the layout, dot size, spacing, color and background change together, with the dots redrawn outward from the center.
3. Set the dots across: type a number, or use the slider or the chips, anywhere from 16 to 200. Fewer dots mean larger circles and a simpler picture.
4. Fine-tune: below, change the layout (grid or staggered), dot size (all the same or by tone), spacing, background and color one at a time. Once a value differs from the style, the swatch selection clears.
5. Check and save: use "Show original" to flip between the two, and click a color under "Dots per color" to highlight only its circles. Then choose PNG, JPG or SVG and the long-side size, and click "Save".

The six styles

After you pick a style you can still change any value one by one. The dots-across setting stays where it is when you switch styles.

Choosing the dots across: a 3:2 photo

For photos where the outline matters, such as faces or animals, 48 to 72 dots across works well, and halftone posters blend tones smoothly from about 96 up. The bead size is just the diameters added up, so it can come out slightly larger depending on the spacing of your bead board.

How it is calculated

1. Dividing into cells: take the cell width as 1 and the dots across as c. For a grid, the number of rows is round(c × height ÷ width). For a staggered layout the row spacing is √3/2 (about 0.866), so the rows are round((c × height ÷ width − 1) ÷ 0.866) + 1, and every second row is shifted half a cell and holds c − 1 circles.
2. Dot color: the original pixels within ±0.5 cell across and ±0.5 cell down of the circle's center (±0.433 cell for staggered) are averaged, weighted by opacity. If the average opacity is below one half, no circle is drawn.
3. Choosing colors: "Reduce colors" groups colors with median cut (Heckbert, 1982), which repeatedly splits at the median of the widest channel. It then refines the result four times in the OKLab color space (Ottosson, 2020), and each circle takes the nearest color. Game Boy and PICO-8 also pick the nearest color in OKLab. "Grayscale" keeps the relative luminance as a gray.
4. Dot size: with "All the same", the radius is (1 − spacing) ÷ 2 cells. With "By tone", that radius is multiplied by √k, so the circle's area is proportional to k.

k = (Y_background − Y_cell) ÷ (Y_background − Y_reference)  (clamped to 0–1)  ·  Y = 0.2126 R + 0.7152 G + 0.0722 B (linear sRGB)

Y is the relative luminance defined in WCAG 2.2. The reference Y_reference is the ink color for "Single color"; otherwise it is 0 when the background is light (Y ≥ 0.5) and 1 when it is dark. A transparent background is treated as white paper. That is why circles grow in dark areas on a white background and in light areas on a black one. The table below shows circle sizes for gray cells in the Halftone style (staggered layout, white background, ink #1A1A1A, spacing 0%). In the staggered layout each circle occupies cell width² × 0.866, so a touching circle covers 90.7% of its share.

When you save, the long side you choose sets how many pixels one cell gets. A 3:2 photo at 48 dots across, saved at 2,048 px, has cells of about 42.7 px and comes out at 2048 × 1365 px. SVG writes each dot as a circle shape on a 10-unit cell, with circles of the same color in one group.

Grid versus staggered (honeycomb)

Of all the ways to pack equal circles on a plane, the densest is the hexagonal arrangement in which every row is offset like a honeycomb, and L. Fejes Tóth proved that none is denser. Touching circles cover 78.5% of the area in a square grid (π/4) and 90.7% in the hexagonal arrangement (π/(2√3)).

The gaps between circles show the background color, so the same photo looks bright and light on white and dark and crisp on black. Widening the spacing makes that difference stronger.

Common mistakes

• I changed the background in halftone and the picture flipped: tone mode sizes circles by how far each cell is from the background in brightness. Switching from white to black makes circles larger in the light areas. For the look of dark ink on paper, use a light background.
• I counted beads while still on original colors: with original colors, every circle differs slightly, and above 64 colors "Dots per color" is only an approximate count over 12 bands of similar colors. Decide the number of colors with "Reduce colors" first, then read the counts you will actually buy.
• I saved a transparent background as JPG: JPG can't hold transparency, so it becomes white. Save as PNG or SVG when you need it.
• I raised the dots a lot and saved as SVG: a 3:2 photo at 144 across has 13,824 circles. The more circles, the larger the file and the slower it is to open in a program, so unless the picture is for large printing, PNG is easier to handle.
• I got an error with a very tall image: a picture can hold up to 60,000 circles. A 1:2 portrait image at 200 across would need 400 rows and 80,000 circles, which is over the limit, so lower the dots across.

Limits and cautions

• It does not imitate a print shop's screening: screen angles, the separation into four CMYK plates, or ink spreading that enlarges the dots. Each picture uses circles at a single angle.
• Even in tone mode the circles can't fill the cell (at most 78.5% for a grid, 90.7% staggered), so the darkest areas look lighter than the original. Setting the spacing to 0% gives the deepest result.
• Colors on screen differ from real beads or ink. When you use the result as a pattern, check it against the color chart of the beads you own and prepare a few extra.
• Game Boy and PICO-8 borrow only the colors of those devices. They do not follow the screen size or color-count limits of the hardware.
• Only formats your browser can open are accepted. An animated GIF uses its first frame only, and HEIC may not open in some browsers, so convert it to JPG or PNG first. Files up to 40 MB are accepted, and the image is scaled down to a 2,048 px long side before calculating.
• The maximum saved size of 4,096 px is set to stay within the canvas limit of iOS browsers (4,096 × 4,096), so that saving works on every device.

As of 2026-10-20. The definitions of halftone and Ben-Day dots, circle packing density, bead diameters and the relative luminance formula were checked against the sources below on that date. The style values and the 60,000-circle limit are choices made by this tool. The sample image is "Blue, red and green parrot (Unsplash)" by Mikhail Vasilyev on Wikimedia Commons (CC0 1.0), reduced to 960 × 640 px.

Sources

• 01Getty AAT — halftone negativesNegatives made through a screen so the image appears as dots or squares of varying size, used in halftone printing
• 02Getty AAT — Ben Day processA technique that prints dot patterns from celluloid sheets, devised in 1879 by the New Jersey printer Benjamin Day, often linked with the work of pop artist Roy Lichtenstein
• 03Wolfram MathWorld — Circle PackingThe densest packing of circles in the plane is the honeycomb-like hexagonal lattice (proved by L. Fejes Tóth), with density 0.9069 for hexagonal and 0.7854 for square
• 04Hama — Meet our different beadsMidi beads are 5.0 mm in diameter, Mini beads 2.5 mm
• 05W3C — WCAG 2.2: relative luminancesRGB relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B, with a linearization threshold of 0.04045
• 06MDN — <circle>The basic SVG shape that draws a circle from a center point (cx, cy) and a radius (r)
• 07Heckbert, P. (1982). Color image quantization for frame buffer displayACM SIGGRAPH Computer Graphics 16(3), 297–307. Median cut color reduction
• 08Björn Ottosson — A perceptual color space for image processing2020-12-23. The OKLab color space (used to find the nearest color)
• 09Lospec — PICO-8 PaletteThe 16 PICO-8 colors as HEX values. The four Game Boy colors come from the same site's Nintendo Gameboy (BGB) Palette
• 10MDN — <canvas>: Maximum canvas sizeThe 4,096 × 4,096 canvas limit on iOS devices

Frequently asked questions

Tools to use with this one