About this pixel circle generator
A small, dependency-free tool for one job: turning a diameter or a width × height box into a block grid template — thin outline, thick outline, or filled disk — with the exact block count for whatever you set. Nothing you enter is uploaded anywhere.
Why it exists
Circle charts for blocky voxel games have circulated as static images for years — a fixed grid of squares for one specific diameter, usually a handful of popular sizes, usually only circles and never ovals. If the size you need isn't one of the handful someone already drew, you're back to eyeballing it in-game or working it out by hand. This generates the grid for any size you actually need, on the spot, with the block count already added up.
How the shape is calculated
An ellipse is inscribed in the width × height bounding box, centred at ((w−1)/2, (h−1)/2) with radii rx = w/2 and ry = h/2. Each cell's centre is tested against it:
That set of "inside" cells is the filled disk. A cell is added to the thin outline when at least one of its four orthogonal neighbours is outside the disk (off-grid counts as outside); the thick outline also checks the four diagonal neighbours, which closes the single-block pinch points a thin ring leaves on tight diagonal turns.
This is the same distance-based test long-running community circle charts use. It is a convention, not the only mathematically valid one — see the FAQ on the main page for what that means in practice.
How it was verified
The rasteriser (circle.js) is a pure function with no DOM dependency, checked under Node before this page shipped:
- Diameter 1 renders as a single block — both the outline and the filled disk are exactly one cell.
- Every outline from diameter 1 to 40 is symmetric across both the horizontal and vertical axis, for both thin and thick.
- Every outline from diameter 1 to 40 is a single connected shape under 8-directional adjacency — no stray disconnected blocks.
- Outline block count is always greater than zero and never decreases as diameter increases, checked from diameter 1 to 60.
- Even and odd diameters both render without gaps — every row and every column of the outline contains at least one block, checked at several even and odd sizes.
- Filled block count is always at least the outline block count, for every diameter from 1 to 50 — the outline is by construction a subset of the disk.
- Thick outline count is always at least the thin outline count, for every diameter from 1 to 40 — thick only ever adds cells, never removes them.
- Ovals (width ≠ height) keep independent dimensions, produce a connected outline, and have more filled cells than outline cells once the shape is non-trivial.
- Size is clamped to the tool's stated 1–128 range regardless of what's typed in.
All of the above passed with zero failures before this tool shipped. You can re-derive any of the counts shown on the size chart from the formula above by hand, if you want to check independently.
How the site is built
- Static HTML, one stylesheet, two small scripts. No framework, no build step, no bundler.
- The generator needs nothing from the network. The grid is drawn on a
<canvas>element already in the page and exported withcanvas.toBlob; there is no server round-trip for the shape or for the PNG download. - System font stack. Your operating system's UI font, so nothing has to download and nothing shifts as it loads.
- Nothing you set is transmitted. The diameter, width, height and every toggle live only in this tab's memory.
- Dark mode follows your system setting via
prefers-color-scheme, and the canvas redraws in the matching colours when your system theme changes.
Scope and honesty about limits
This draws one flat 2D layer. It does not plan a sphere, a dome, or a cylinder's height — those need the footprint repeated (and, for a sphere, shrunk) across several layers, which is beyond what a single template can show. It does not know which in-game block or material you intend to use, only shape and count. And as covered on the main page, the inside/outside test it uses is one legitimate convention for rounding a circle onto a grid, not the only one — a different generator can produce a handful of different boundary cells at the same size and still be correct.
This tool references Minecraft by name because that is the building game most people searching for a circle chart mean, and it works the same way for any other voxel or tile-based building game. It is an independent, unofficial tool with no connection to Mojang Studios, Microsoft, or any other game's maker — see the footer on every page for the full disclaimer.