Fractal Art in Your Browser: Koch, Hilbert, Sierpinski

A fractal is what happens when a simple rule refuses to stop: replace, repeat, and a triangle becomes a snowflake with an infinite coastline, a line learns to fill a square, and a solid shape evaporates into lace. No mathematics in everyday reach produces more beauty per rule, and all of it draws live in a browser tab. This guide walks the three classics, Koch, Hilbert and Sierpinski, with the numbers that make each one strange, starting from our free Koch fractal drawer.

The idea: one rule, applied forever

Every fractal here is a replacement rule plus patience. Take a shape, replace each of its parts with a smaller arrangement of parts, then do the same to the result, forever. The objects that emerge share the fractal signature: self-similarity, where zooming into any piece shows the whole pattern again, and a dimension caught between the whole numbers, a curve too crinkled to be one-dimensional yet too thin to be two. Browsers are the perfect place to watch this, because the drawers render iteration by iteration: slide from step 1 to step 6 and the abstraction becomes a film of a rule eating a shape.

Koch: infinite edge, finite area

The Koch rule operates on line segments: cut each into thirds, replace the middle third with the two sides of an outward triangle. Applied to a triangle’s three sides it produces the famous snowflake, and two numbers tell its paradox. The perimeter multiplies by 4/3 every iteration, so by step ten the boundary is nearly 18 times the original and growing without limit, while the enclosed area converges to exactly 8/5 of the starting triangle: an infinite fence around a finite garden. The crinkliness has a measurement, the fractal dimension log 4 / log 3 ≈ 1.26, formalizing “more than a line, less than a surface”. The Koch drawer makes the 4/3 visible: each step looks only slightly busier, which is precisely how an infinity sneaks up.

Sierpinski: the shape that loses itself

The Sierpinski rule subtracts: take a filled triangle, remove the inverted middle triangle, leaving three half-size copies, and repeat inside each. The area multiplies by 3/4 per step, so after ten iterations about 5.6 percent of the original remains, on the way to a limit of zero: a shape with an unmistakable visual presence and no area at all. Its dimension, log 3 / log 2 ≈ 1.585, sits higher than Koch’s, which the eye confirms, the gasket reading as “more substantial” than the snowflake’s edge. The triangle drawn in the Sierpinski drawer also enjoys a famous double life: the same lace emerges from Pascal’s triangle with odd numbers shaded, and from a random dot-jumping game, three completely different processes agreeing on one picture.

Hilbert: the line that fills a square

The Hilbert curve answers a question that sounds illegal: can a one-dimensional line visit every point of a two-dimensional square? The rule grows a U-shaped path through finer and finer grids, the order-n curve threading all 4ⁿ cells of a 2ⁿ × 2ⁿ grid, 1,024 cells by order five, one unbroken line, no crossings. In the limit it genuinely fills the square, earning dimension exactly 2, a curve promoted to a surface. Watch it build in the Hilbert drawer and the engineering value also appears: the path preserves locality, points near each other on the line staying near each other in the square, which is why Hilbert orderings organize map tiles, database indexes and image processing, the rare fractal with a day job.

The wider family in the toolbox

The three classics open a collection of more than twenty drawers: the Heighway dragon, famous for emerging from simply folding a strip of paper in half repeatedly; the Cantor set, the original remove-the-middle construction underneath all of this; the Pythagoras tree, squares stacking into botany; and snowflake variants from hexaflake to pentaflake. Each is the same lesson in different clothes, one rule plus repetition, and together they make the strongest possible case that complexity does not require complicated causes. Recursion in numbers rather than pictures is the Fibonacci guide‘s territory, and the wider math toolbox lives in the calculators hub.

Frequently asked questions

What does a fractional dimension actually mean?

It measures how a shape’s detail grows as you zoom: a line’s content doubles when you double the scale, a square’s quadruples, and Koch’s curve grows by a factor between, 4 pieces for every 3-fold zoom. The dimension is the exponent that makes the bookkeeping work, log 4 / log 3, and “1.26-dimensional” is precisely that statement.

Are these the same fractals as the Mandelbrot set?

Same family, different engine: these are construction fractals, built by explicit replacement rules, while the Mandelbrot set arises from iterating a formula and asking which starting points escape. Self-similarity and fractional dimension appear in both, which is why one word covers them.

Do real coastlines have infinite length like the Koch curve?

The honest version: measured coastline length genuinely grows as the ruler shrinks, which is the Koch lesson in geography and the reason quoted coastline figures disagree wildly. Physical coastlines stop being fractal at the scale of rocks and sand, so “infinite” is the idealization; “ruler-dependent” is the fact.

Why do the drawers limit the number of iterations?

Geometry outruns pixels fast: Koch segments shrink by two-thirds per step, and within ten steps the detail is finer than any screen can show, while the number of segments grows into the millions. The limit is honesty about resolution; mathematically the recipe continues without end.

ATV

Written by Nick (ATV Team)

We build and maintain the 600+ free, client-side tools on this site, and every guide is written against the tools themselves: each figure is computed and checked before it is published, and every linked tool is tested in the browser. More about how we work on the about page, and the full library of guides lives on the blog.