Pixel Circle Generator

How to use it

1. Choose Circle or Oval and enter the size in pixels.
2. Pick a thin line, a thick line or a filled disc.
3. Read the pixel count and check the grid.
4. Copy the rows as text, or download the PNG for your editor, pattern or printout.

What a pixel circle is

A pixel circle is the closest a square grid can get to a round shape. Every pixel is either on or off, so the curve has to be built from short straight runs. Where the curve is steep the runs are one pixel long. Near the top, bottom, left and right the runs get longer. The goal is a shape that looks round at a glance, has no lumps and is the same on all four sides.

Drawing it by hand is easy to get wrong. Circles that look fine at 8 pixels turn lopsided at 30. This generator does the arithmetic and shows the result, so you can copy it into a sprite editor, a spreadsheet, a stitch chart or a bead board.

How the circle is calculated

The tool lays the grid over an ideal circle of the diameter you type. For a diameter d, the centre of the pixel in column i and row j is at (i + 0.5 - d/2, j + 0.5 - d/2). The pixel is set when x² + y² ≤ (d/2)². An oval uses the same test with a separate radius for each axis.

The outline comes from the filled shape. A pixel is on the thin line when at least one of its four side neighbours is empty. It is on the thick line when any of its eight neighbours, corners included, is empty.

Pixel counts for common sizes

The outline grows roughly in step with the diameter. The filled disc grows with its square, so doubling the diameter makes the filled circle about four times larger.

A worked example: a 16 pixel icon

Say you want a round badge for a 32 by 32 icon with a 16 pixel circle in the middle. Choose a diameter of 16 and a thick outline. The tool reports 60 pixels. The disc inside would be 208 pixels in total, so the fill is 208 minus 60, which is 148 pixels. In the filled 16 pixel circle the first row skips 5 pixels and fills 6. The second row skips 3 and fills 10, and the third skips 2 and fills 12. That is all you need to know to redraw the shape from memory in any tool.

Ovals and ellipses

Ovals work best when both sizes have the same parity, both even or both odd. That keeps the centre of the shape symmetrical on both axes. A wide oval is useful for eyes, planets with rings, speech bubbles, platforms and shadows under sprites. A shadow is often a thin flattened oval of about three times its height.

Using the result

• Sprite editors. Download the PNG and use it as a guide layer, or copy the row text and place the runs.
• Cross-stitch and beads. One pixel is one stitch or bead. Print the PNG and count along each row.
• Block games. Use the same grid for floors, ponds and towers. The Minecraft circle generator shows stacks and wall heights.
• Pictures from photos. To turn a whole image into a grid of coloured blocks, try the pixel art generator.

Common mistakes

• Mixing up diameter and radius. The size you type is the full width in pixels.
• Editing a circle by eye. Moving a single pixel to look rounder usually makes another side look worse. Use the generated grid.
• Choosing an odd size when you need the centre between pixels. Odd sizes have a centre pixel, even sizes a 2 by 2 centre.
• Scaling a small circle up. Enlarging a 16 pixel circle to 32 makes a blocky shape with steps two pixels wide. Generate the size you need instead.

Notes

The shape is computed by the tool in your browser, nothing is uploaded. For other round shapes in layers, see the sphere and dome generators.