Generate animated Voronoi cell patterns on your GPU. Tune density, drift and borders, edit the shader live, then save a PNG, video or standalone HTML.
Knobs patch the running animation live. A few (marked in the code as baked-in values like particle counts) restart the preview.
Nearest-seed cells from a 3×3 neighbour search, drifting live.
Your code runs in a sandboxed frame with no access to this page, and it is never sent to a server. three.js demos load the library from jsDelivr; the rest need nothing but the browser.
This generator draws an animated Voronoi diagram on your GPU and lets you steer it with sliders: cell density, how far the seed points drift, animation speed, border thickness, flat or shaded cell fills, and the base hue and hue spread of the palette. You can pan and zoom the pattern, save a still frame as a PNG, record the animation as a video file, or download the whole thing as a single self-contained HTML page that runs anywhere.
The shader source sits in editable panes beside the canvas. Change a line, and the running animation restarts with your edit — so this doubles as a place to learn how a Voronoi pattern is actually computed in real time, rather than just a way to produce one. An Explain tab walks through the technique the shader uses.
Take a set of points in a plane — call them seeds, or sites. For every other point in the plane, ask which seed is nearest. Colour that point according to the answer. The plane divides into regions, one per seed, where every location inside a region is closer to that region’s seed than to any other. Those regions are Voronoi cells, and the whole partition is the Voronoi diagram.
Formally, the cell belonging to seed p in a set S is the set of points x where dist(x, p) ≤ dist(x, q) for every other seed q. A little geometry follows immediately from that definition:
Change the distance metric and the picture changes with it. Under the Manhattan metric the boundaries are made of axis-aligned and diagonal segments rather than arbitrary lines. Give the seeds different weights and you get a power diagram, in which a cell can fail to contain its own seed. The familiar honeycomb-ish picture is specifically the equal-weight Euclidean case.
Connect every pair of seeds whose cells share an edge. The result is the Delaunay triangulation, and it is the dual graph of the Voronoi diagram: Voronoi cells become Delaunay vertices, shared Voronoi edges become Delaunay edges, and Voronoi vertices become Delaunay triangles. Compute either one and you have the other for free.
The Delaunay triangulation has a defining property that follows from the circumcentre observation above: no seed lies inside the circumcircle of any triangle. Among all possible triangulations of a point set, it maximises the smallest angle — it produces the least sliver-like triangles available. That is why it is the default choice for generating meshes in finite-element analysis and for interpolating scattered measurements over terrain.
Algorithmically, Fortune’s sweepline computes a Voronoi diagram of n seeds in O(n log n) time, which is optimal for the comparison model, and incremental Delaunay construction reaches the same bound. Both are the right tools when you need the exact combinatorial structure — the actual edges, vertices, and adjacency — for downstream computation.
Neither of those algorithms is what runs here, because the goal is different: every pixel of every frame, sixty times a second, with no CPU involvement. The shader uses the technique from Steven Worley’s 1996 cellular texture work, and the trick is to make the seeds implicit.
Space is divided into a uniform grid. Each grid cell contains exactly one seed, whose position is derived from that cell’s integer coordinates by a hash function:
vec2 hash(vec2 p) {
p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
return fract(sin(p) * 43758.5453);
}
No seed list is stored anywhere. Given a grid coordinate, the seed position is recomputed deterministically on demand. And because a pixel’s nearest seed must live either in its own grid cell or in one of the eight neighbours, every pixel examines exactly nine candidates — a fixed cost, no matter how dense the pattern. That is what makes the density slider free: raising it from 1 to 30 changes the grid scale, not the work per pixel.
The borders come out of the same loop. The shader tracks both the nearest distance d1 and the second nearest d2. On a boundary between two cells those two are equal, so d2 - d1 falls to zero exactly along the edges:
float border = smoothstep(0.0, uEdge, d2 - d1);
There is no edge detection and no second pass. The outlines are a by-product of distances the shader already had, which is why the border-thickness slider is instant.
Animation works by giving each seed a small orbit driven by sin(time + hash), scaled by the drift control. As seeds move, cells grow and shrink, and when a seed crosses a boundary the neighbours reconnect — you can watch adjacent cells trade area in real time. Set drift to zero for a static diagram; raise it and the topology keeps rearranging itself.
| Control | Range | Effect |
|---|---|---|
| Cell density | 1–30 | Grid scale, so how many cells fill the canvas. Cost per pixel is unchanged. |
| Seed drift | 0–4 | Orbit radius of each seed. Zero freezes the layout. |
| Time speed | 0–2 | How fast the orbits advance. |
| Border thickness | 0–0.3 | The smoothstep width applied to d2 − d1. |
| Flat cell fills | toggle | Solid colour per cell instead of a distance-shaded gradient. |
| Base hue / hue spread | 0–360 | Palette centre and how widely cell colours vary around it. |
| Pan and zoom | — | Navigate the pattern; the field is effectively unbounded. |
d1 and d2 are combined — and the canvas restarts with your version. Reset restores the original.This generator is one preset of the JavaScript animation playground, which hosts the same editable-shader workflow across a library of canvas, WebGL, Three.js, and CSS demos. The Matrix rain generator and the double pendulum simulator use the same interface for a text effect and for a chaotic system with real equations of motion. For choosing base hue and spread values that suit a palette, the colour picker converts between HSL, RGB, and hex.
A way of dividing space so that every location belongs to whichever of a set of points is nearest to it. Each point gets a region, and the boundaries lie exactly halfway between neighbouring points.
They are dual descriptions of the same structure. Join every pair of seeds whose Voronoi cells share an edge and you get the Delaunay triangulation; the Voronoi vertices are the circumcentres of the Delaunay triangles. Computing one gives you the other.
No. It renders the diagram per pixel on the GPU using an implicit, hash-generated seed grid, which is what makes it fast and animated. It does not produce a list of vertices, edges, or polygons. For exact geometry you need a sweepline or incremental Delaunay implementation on the CPU.
Yes — save a still frame as a PNG, record the animation to a video file, or download a single self-contained HTML page containing the shader with your current settings, which runs offline in any browser.
Because the seeds are implicit. Each pixel only ever checks the nine grid cells around it, so the work per pixel is constant. Density changes the grid scale, not the number of comparisons.
From the difference between the nearest and second-nearest seed distances. That difference approaches zero precisely along a boundary, so a smoothstep on it produces antialiased edges with no separate edge-detection pass.
Yes. The HTML, CSS, and JavaScript panes are editable and the animation re-runs with your changes. Reset restores the original source, so experimenting costs nothing.
No. It needs a browser with WebGL, which covers essentially every current desktop and mobile browser. The per-pixel cost is fixed and modest; the demo is classed as medium-cost among the playground’s presets.
An iterative process that moves each seed to the centroid of its own cell and recomputes the diagram, repeating until it settles. The result is a centroidal Voronoi tessellation with much more even cell sizes — the basis of Voronoi stippling and of well-conditioned mesh generation.
The images and video you generate are yours to use. The pattern is generated mathematically from your own settings, and nothing you create here is uploaded or retained.
Scatter points across a plane, then colour every position according to which point it is nearest. The result partitions the plane into one cell per seed, with borders lying exactly halfway between neighbouring seeds. That single rule produces the cracked, organic look that turns up in giraffe markings, dried mud, foam and cell tissue.
The same structure answers nearest-facility questions directly. Draw a Voronoi diagram over a map of hospitals and each cell is the region for which that hospital is the closest one.
Rather than computing the diagram as geometry, this generator solves it per pixel in a fragment shader. Space is divided into a grid with one seed per grid square, and each pixel checks its own square and the eight around it for the nearest seed.
Searching a three by three neighbourhood is not an approximation for this arrangement: with one seed per cell, no seed outside those nine squares can be closer than the nearest one inside them. That bound is what keeps the whole diagram cheap enough to animate while the seeds drift.
A division of a plane into cells, one per seed point, where every position belongs to the cell of the seed it is closest to. The borders sit exactly halfway between neighbouring seeds.
As a fragment shader on the GPU. Each pixel searches its own cell and the eight surrounding ones for the nearest seed, which is enough to get the correct answer while staying fast enough to animate.
Yes, as a PNG at the size shown.
Procedural textures for stone, scales, cracked earth and foam; mesh generation; and any nearest-facility problem such as which shop, cell tower or hospital is closest to a given point.
Yes. Set seed drift to zero for a static diagram, or raise it for a slowly shifting pattern.