The Voronoi Diagram: The Hidden Geometry of Nature

What is a Voronoi Diagram?

Nature tends not only to order, but also to be efficient. We see this in natural systems, whether human-made or not. The Voronoi Diagram models this: the foam on a cappuccino, the cracked surface of dry mud, the arrangement of cells in a leaf’s cross-section, and the faceted eye of a dragonfly, internal bone structure, soap bubbles, and the large-scale distribution of galaxies all follow Voronoi geometry.

It appears wherever space needs to be divided efficiently among competing points (we call them seeds), what area belongs to what point. Competition, so to speak, each seed claiming the space it can most efficiently call its own. The areas are divided into cells.

Let’s look at this first on a line, just because it is easiest to visualize. Say you have a fixed length line, a segment, and you have four points (or seeds), if evenly spaced each area then is a quarter of the segment, and each point’s region is closest to that point than another point — they are equidistant.

Now let’s make it an area, a square, and four points. Each cell will establish itself so that it is closest to its seed and equidistant from the other seeds. Where three regions meet, that vertex is equidistant from the three.

Where do we use this in everyday life? The Voronoi diagram can be applied to human-made systems to create more efficient ones: how to place post offices, how to draw area codes, and how to maximize scarce resource allocation.

How to Use the Voronoi Diagram Tool

Getting started 

Click Reseed to generate a new random pattern. Click anywhere on the canvas to add a site. Shift+click to remove the nearest one.

Render Style 

There are six ways to see the same diagram. Cells fill each region with color. Edges only draw the boundaries and nothing else. Stippled places a dot at each seed-sized by its territory. Gradient cells shade each region from the center outward. Distance rings draw concentric bands across the whole canvas. Shards emphasizes boundaries with a sharp edge-lit effect.

Distance Metric 

Changes how “nearest” is calculated. Euclidean is ordinary straight-line distance and produces smooth, organic cells. Manhattan measures distance in right-angle steps, like city blocks, giving angular geometry. Chebyshev measures by the longest single axis, producing square-like cells. Minkowski is a generalization; use the p slider to smoothly transition between these options.

Sites 

Count sets how many seeds to place. Distribution controls how they’re scattered: uniform random, Poisson disk for even spacing, clustered, grid with jitter, radial from center, or golden spiral. Lloyd relaxation moves each seed toward the centroid of its own cell and repeats, higher values produce more evenly spaced, organic-looking patterns.

Color 

Choose a palette from the swatches, then set the color mode: random assigns colors by position, gradient modes flow across the canvas, radial radiates from center, area colors cells by their size, noise applies a smooth organic variation.

Style 

Stroke weight controls edge thickness, set to zero to remove borders entirely. Background changes the canvas color. Show site points, mark each seed with a dot. Texture grain adds a subtle film-like noise over the finished image.

Saving 

Save PNG downloads the canvas as an image. Save SVG downloads a vector file, best for printing.

Animate drift 

Sets the seeds in slow motion. Watch the cells breathe and shift on the screen