Space-Filling Curves Screensaver
Space-Filling Curves is a free, in-browser screensaver that traces the Hilbert, Moore and Peano curves at rising orders. Each is a single unbroken line that visits every cell of a grid exactly once without crossing itself, and as the order climbs the line comes arbitrarily close to every point of the square — a one-dimensional thing filling two dimensions. Nothing to download, and ESC exits at any time.
How the Space-Filling Curves screensaver works
Each curve is generated as an L-system: start with a short string, replace every symbol by a longer pattern, and repeat once per order. The Hilbert rules are A → −BF+AFA+FB− and B → +AF−BFB−FA+; a turtle then walks the final string, moving forward on F and turning ninety degrees on + and −.
The Hilbert curve of order n visits all 4ⁿ cells of a 2ⁿ × 2ⁿ grid. Its virtue is locality: points close on the line are close on the plane, which is why databases, image compressors and mesh partitioners use it to turn two-dimensional data into a well-behaved one-dimensional order.
The Moore curve is four Hilbert curves arranged into a closed loop, so it ends where it began. The Peano curve, the original from 1890, works on a 3ⁿ × 3ⁿ grid and takes a different, serpentine route.
The line is revealed at a steady pace along its length with the hue advancing as it goes, so the colour is a map of where you are along the curve. A glowing head marks the pen. Finished curves are held, faded, and replaced by the next order.
Peano, Hilbert and curves that fill a square
In 1890 Giuseppe Peano discovered a continuous curve that passes through every point of a square. It seemed to contradict the intuition that a line, being one-dimensional, cannot cover a two-dimensional area. A year later David Hilbert published a variation, the first to include a picture of the construction. Both are limits of a sequence of ever-finer curves, and the drawing here shows the stages along the way.
The Moore curve, named after E. H. Moore (who described such curves in 1900), is the loop version of the Hilbert curve: four copies arranged so that the path closes rather than ending at a different corner. Peano defined his curve using base-3 expansions, which corresponds to a three-by-three subdivision in place of the two-by-two used by Hilbert and Moore.
These curves are used where locality matters. Mapping a two-dimensional grid onto a line in Hilbert order tends to keep cells that are neighbours in the plane close along the line, which is why Hilbert-based orderings appear in spatial indexing such as the Hilbert R-tree. A curve that visits every point only exists as a mathematical limit; each finite order is an ordinary line.
A worked example
At the defaults — Cycle, Speed 4, Spectrum — a red line begins in one corner and works its way through a coarse Hilbert order 3 in seconds, then order 4, 5, 6 and 7, each taking longer and filling the square more finely, the colour sweeping through the spectrum from start to finish so that the four quadrants each get their own band. Then the Moore loop, then the Peano serpent.
Settings & tips
- Order 7 Hilbert is over sixteen thousand segments; slow the speed to watch it fill.
- Mono mode shows the pure geometry; Spectrum shows how the curve orders the plane.
- The Peano curve’s 3 × 3 recursion is easiest to see at order 2 or 3.
Frequently asked questions
- What is a space-filling curve?
- A continuous curve whose limit passes through every point of a square. Giuseppe Peano found the first in 1890 and David Hilbert simplified it a year later; the finite-order versions drawn here are the approximations that get closer to filling the square with each order.
- What are Hilbert curves used for?
- Turning two-dimensional positions into one-dimensional keys that keep nearby things nearby: geographic database indexes, image compression scans, cache-friendly matrix layouts and load balancing of simulation meshes all use them.
- Will this slow my computer down?
- It is tuned to run smoothly on an ordinary laptop. If it feels heavy, raise the Pixel size or lower the speed in the settings; every control takes effect immediately.
- Is the Space-Filling Curves screensaver free?
- Yes. It runs free in your browser with nothing to download or install, and it keeps working offline once the page has loaded.
- How do I exit the Space-Filling Curves screensaver?
- Press the ESC key at any time to leave fullscreen and return to the page.
- How can a line fill an area?
- Only in the limit. Each finite step is an ordinary curve, but the infinite sequence converges to one that touches every point of the square.
- Why are Hilbert curves used in computing?
- They tend to keep nearby points in two dimensions near each other in a one-dimensional ordering, which helps spatial indexing.
- What is an L-system?
- A rewriting system introduced in 1968 by the biologist Aristid Lindenmayer to describe the development of simple multicellular organisms and plants, later also used to generate fractal curves.