Dragon Curve

About this piece

Take a strip of paper, fold it in half, fold it in half again the same way, and keep going. Open it out so that every crease makes a right angle, and the strip traces the Heighway dragon. This plate does the opening for you, one generation at a time. Each fold takes a copy of the whole curve and swings it 90° about the curve’s end point, so every fold doubles the number of unit segments: 1, 2, 4, 8 and so on, up to 4,096 segments at generation 12. The same curve is drawn four times, turned 0°, 90°, 180° and 270° about the centre, one arm in each of the theme’s four inks: cobalt, coral, the deeper cobalt, and the text ink.

The timing: each generation rests for 0.55 seconds, then folds over 1.25 seconds. Twelve folds take 21.6 seconds. Generation 12 is then held for 7 seconds and fades out over 1.6, and the cycle starts again from a single segment per arm, 30.2 seconds in all. The stage opens with generation 8 already on screen, so the first finished dragon arrives about 7 seconds after the page loads. The readout in the bottom-left corner says which generation you are looking at, or which fold is under way. With reduced motion switched on you get one still frame, generation 12, and nothing moves.

Fold a strip, open it: where the turns come from

Write each crease as R or L, depending on which way the strip turns there when you walk along it. One fold gives R. Two give RRL, three give RRLRRLL, and four give RRLRRLLRRRLLRLL. Each list is the one before it, then an R, then the one before it again, backwards and with every letter swapped. That rule is all the generator needs: n folds give 2ⁿ − 1 turns and 2ⁿ straight pieces. Real paper gives out long before the mathematics does: after four or five folds the strip is too thick to crease sharply, which is why the dragon is a computer drawing and not an origami model.

Opening one more fold is the same as the animation’s swing. The new list ends with the old one reversed and swapped, which is exactly what you get by rotating a copy of the old curve a quarter turn about its last point and walking it back towards the start. That is the movement on the stage: each new half is the old curve, turning on its end point like a hinge.

The formula: which way is turn k?

You do not need to fold anything to know the k-th turn. The list of R and L is the regular paperfolding sequence, and it has a closed form. Divide k by 2 until it is odd, and call the odd number m. The turn is right if m leaves remainder 1 when divided by 4, and left if it leaves remainder 3. In binary, that is the bit just above k’s lowest 1 bit: a 0 there means right, a 1 means left.

turn(k) = R  if  m ≡ 1 (mod 4)
          L  if  m ≡ 3 (mod 4)     where k = m · 2^j and m is odd
in code:  ((k & -k) << 1) & k   is 0 for R, non-zero for L

k = 12 = 1100 in binary   m = 3    → L
k = 13 = 1101 in binary   m = 13   → R   (13 = 3·4 + 1)
k =  6 =  110 in binary   m = 3    → L   (the 6th letter of RRLRRLL)

So the 1,000th turn needs no list at all: 1000 = 125 · 8, and 125 = 31 · 4 + 1, so it is a right turn. The test suite builds the plate’s first 1,023 turns by the copy-and-swap rule and checks every one against this formula.

Who found it

The curve was first investigated by three NASA physicists, John Heighway, Bruce Banks and William Harter, and it reached a wide audience in 1967, when Martin Gardner described it in his Mathematical Games column in Scientific American. Many of its properties were first published by Chandler Davis and Donald Knuth, and it appears on the section title pages of Michael Crichton’s novel Jurassic Park, which is why it is also called the Jurassic Park dragon. These facts are taken from Wikipedia’s article “Dragon curve”, which cites Sergei Tabachnikov’s “Dragon curves revisited” (The Mathematical Intelligencer 36, 2014), and the turn formula from its article “Regular paperfolding sequence”; both were read on 12 October 2026.

Reading the plate: what to watch for

• The picture zooms out and turns 45° with every fold. Generation n ends at the point (1 + i)ⁿ, which is √2 times further out and 45° further round each time. The plate divides that out, so the start of each arm stays on the centre and its end stays on one fixed point, and the curve shrinks into the same shape instead of flying off the screen.
• The shape settles. Generations 9 to 12 look almost the same at this size; what changes is the detail along the edge. The limit is a fractal with fractal dimension 2: it fills an area. With a starting segment of length 1, that area is exactly 1/2.
• The four arms never overlap. They meet along their edges and touch at corners, but no unit segment is drawn twice, in one arm or across the four. That is the local picture of a known fact: copies of the dragon can tile the whole plane. The test suite checks the no-shared-edge rule for all four arms out to generation 14, 65,536 segments in all.
• Corners are rounded on purpose. The curve visits some grid points twice, turning away each time, so with square corners it looks as though it crosses itself. Cutting each corner with a short curve shows what really happens: the strip touches itself and bounces off.

How it is computed

The curve is built once, on whole-number grid points: generation 12 is 4,097 points, starting at (0, 0) and heading right, with one quarter turn per letter of the folding sequence. Every earlier generation is the start of that same list, so nothing is rebuilt between folds. During a fold the plate draws generation n and a copy of it turned by an angle that eases from 0° to 90° about its end point; at 90° the copy is exactly the second half of generation n + 1, and the test suite checks that for every generation up to 13.

Each point is then divided, as a complex number, by (1 + i) raised to the generation plus the fold’s progress, which undoes the growth and the 45° turn smoothly, mid-fold included. Line width follows the segment length on screen (about a third of it, between 1 and 3 CSS pixels). The clock is wall time, so a 120 Hz screen and a 30 Hz one show the same generation at the same second. Nothing builds up on the canvas: each frame is drawn from scratch, so a theme change or a resize just repaints the same moment. The gallery tile runs the same code.

Honest limits

It stops at generation 12. On a laptop’s stage a generation-12 segment is about 4 CSS pixels long, and on a phone under 2. Every two more folds halve that, and a line cannot usefully be thinner than one pixel, so by generation 14 the arms would fill in as solid patches of colour with no curve left to see.

One dragon, not the family. This is the Heighway dragon only. The twindragon (two Heighway dragons back to back), the terdragon and the Lévy C curve are related curves built by different rules, and none of them is drawn here.

Four arms round one point is not the whole tiling. The plane can be tiled with dragons, but the full tiling replaces every edge of a square grid with a dragon. This plate shows only the four that start at one grid point.

The easing is a choice. A real strip unfolds every crease at once; here the copy swings as one rigid piece, which is easier to follow but is not how paper moves.

A 30-line version

The snippet below draws one still generation-12 dragon, four arms in the site’s palette, in 30 lines of HTML and plain JavaScript with no library. Unlike the plate, it gets each turn straight from the bit formula above, not from copy-and-swap; the test suite runs it against a stub canvas and checks that its first arm lands on the plate’s own 4,097 points. It leaves out the folding animation, the rounded corners, sharp drawing on high-density screens (it draws in CSS pixels) and the reaction to theme changes. Because nothing moves, there is no reduced-motion case to handle.

Things worth changing: GEN = 4 shows the curve that four real folds of a paper strip give you; GEN = 16 gives 65,536 segments per arm and a solid tile. Change turn to always return 1 and every crease turns the same way: the line runs round one unit square, over and over.

<canvas id="dragon" style="position:fixed; inset:0"></canvas>
<script>
const dark = matchMedia('(prefers-color-scheme: dark)').matches;
const [ground, inks] = dark ? ['#0B0D12', ['150,180,255', '255,120,84', '120,158,255', '236,231,217']]
                            : ['#E7E2D5', ['40,72,205', '190,68,28', '52,88,214', '25,27,34']];  // the site's palette, one ink per arm
const GEN = 12, N = 2 ** GEN;  // 4,096 unit segments per arm
// Turn k (k = 1 .. N-1): find k's lowest set bit and look at the bit just above it. 0 = right, 1 = left.
const turn = (k) => (((k & -k) << 1) & k) ? -1 : 1;
const pts = [[0, 0], [1, 0]]; let d = 0;  // heading: 0 = +x, 1 = +y (down the screen), 2 = -x, 3 = -y
for (let k = 1; k < N; k++) {
  d = (d + turn(k) + 4) % 4;
  const [x, y] = pts[pts.length - 1];
  pts.push([x + [1, 0, -1, 0][d], y + [0, 1, 0, -1][d]]);
}
const cv = document.getElementById('dragon'), ctx = cv.getContext('2d');
const W = cv.width = innerWidth, H = cv.height = innerHeight, L = Math.min(W, H) * 0.45 / 1.17;
// Generation GEN ends at (1 + i)^GEN: 2^(GEN/2) away, turned GEN * 45 degrees. Undo both, so the end sits L from the centre.
const s = L / 2 ** (GEN / 2), a = -GEN * Math.PI / 4, c = Math.cos(a) * s, sn = Math.sin(a) * s;
ctx.fillStyle = ground; ctx.fillRect(0, 0, W, H);
ctx.lineWidth = Math.max(1, s * 0.36); ctx.lineJoin = 'round';
for (let arm = 0; arm < 4; arm++) {  // the same curve four times, turned 0, 90, 180 and 270 degrees
  const rc = Math.round(Math.cos(arm * Math.PI / 2)), rs = Math.round(Math.sin(arm * Math.PI / 2));
  ctx.strokeStyle = `rgb(${inks[arm]})`; ctx.beginPath();
  for (const [x, y] of pts) {
    const u = x * c - y * sn, v = x * sn + y * c;
    ctx.lineTo(W / 2 + u * rc - v * rs, H / 2 + u * rs + v * rc);
  }
  ctx.stroke();
}
</script>

Curious how the loop and canvas fit together? Read how it works →