Halftone Effect on an Image
Convert a photo into a halftone dot pattern, where the size of each dot depends on the brightness of the area it represents. Adjust the grid fineness as well as the dot and background colors.
How it works
The image is divided into a regular grid of square cells. For each cell, the average brightness of the pixels it contains is calculated, then a dot is drawn at the center with a radius proportional to the darkness of the area: the darker the area, the larger the dot, reproducing the halftone screen principle used in offset printing and the press.
Why do light areas have no dot?
When a cell's average brightness is very high (almost white area), the calculated radius becomes too small to be visible, and no dot is drawn. This faithfully reproduces the rendering of real halftone prints, where highlights remain bare on the paper.
What grid size should I choose?
A fine grid (4 to 8 px) preserves more detail from the original image and gets closer to a high-resolution print halftone. A wide grid (20 to 30 px) gives a more abstract graphic effect, with dots clearly individualized to the naked eye.
The per-cell brightness calculation and dot drawing are performed entirely in your browser: your photo is never sent to a server.