Draw My Canvas / studio

Penrose Tiling

Two rhombs. One rule for cutting them into smaller copies. A pattern that covers the plane and never repeats.

Plate 18aperiodic-tiling

Waiting for the animation above to load…

What lands in the file, and what the width does

One click writes whatever the animation is drawing at that moment to a PNG, with the drawmycanvas.com mark drawn into the picture rather than laid over it. Leave the width box empty and you get the stage exactly as your browser rasterised it — your window’s width times its device pixel ratio, which is about 1,600 px across from a 1280‑px window on a HiDPI laptop and about 353 px from a 390‑px phone.

Type a width instead, or take a preset, and the frame is redrawn into a canvas that wide: the height follows the stage’s own shape and the mark scales with it. The stage is 16:9 on a wide window and 4:3 below 560 px, so a width of 1200 saves 1200×675 on a laptop and 1200×900 on a phone. 1200 px is the width Open Graph and X link cards are cut from — the canonical card is 1200×630, and a card crops the extra height rather than letterboxing it.

Honest limits. Asking for more pixels than the stage was drawn at resamples pixels that were never drawn: a 1920‑px file exported from a 353‑px phone stage is bigger, not sharper. A very large width is a real memory allocation and a browser is allowed to refuse it; when that happens the line above says so plainly and nothing else on the page changes. PNG only — no JPEG, no WebP, no animated export. And nothing is uploaded: the picture is assembled in your own browser, so no frame of this plate ever reaches us.

Live on an HTML canvas · vanilla JavaScript · no dependencies Open fullscreen

About this piece

Everything above is built from two shapes. A fat rhomb with angles of 72° and 108°, and a thin rhomb with angles of 36° and 144°. Both have exactly the same edge length, so they fit together along their sides — and under Roger Penrose’s 1974 matching rules they fit together in one way only: they cover the plane, and they can do it only aperiodically. There is no translation, at any distance, in any direction, that slides this pattern onto itself.

That is a stronger claim than “it looks irregular”. Most tilings that look irregular can be forced into a repeating one. This pair cannot: no arrangement of these two rhombs obeying the rules has a unit cell. They were the smallest known aperiodic set for nearly fifty years, and the shape of the argument is short enough to fit in a paragraph — the next one.

Why the golden ratio makes repetition impossible

Cut each rhomb along a diagonal and you get the two Robinson triangles: an acute one with angles 36-72-72 (half a thin rhomb) and an obtuse one with angles 36-36-108 (half a fat rhomb). The substitution rule replaces each triangle with smaller copies whose edges are exactly 1/φ of the originals, where φ = 1.6180339… is the golden ratio:

acute → 1 acute + 1 obtuse
obtuse → 1 acute + 2 obtuse

Write that as a matrix, [[1, 1], [1, 2]], and its largest eigenvalue is φ2 = 2.618, with eigenvector (1, φ). In plain terms: every subdivision multiplies the tile count by about 2.618, and the mix converges on exactly φ fat rhombs for every thin one. That single number is the proof. A periodic tiling has a unit cell; a unit cell contains a whole number of each tile; so a periodic tiling forces a rational ratio. φ is irrational. No unit cell can exist.

The convergence is quick and you can check it against this plate: at the sixth subdivision the patch holds 1,140 rhombs — 700 fat and 440 thin, a ratio of 1.5909 against φ = 1.6180. The gap is the boundary of a finite patch, and it closes as the patch grows.

How the zoom never ends

The animation is that same substitution rule, played as a camera move. Over 780 frames — 13 seconds at 60 fps — the view magnifies by exactly φ. At the end of the lap every rhomb on screen is φ times larger than it started, so the drawn generation is thrown away and replaced by its own subdivision, whose tiles are φ times smaller, and the model is scaled by φ about the focus point. The two operations cancel to the last decimal place: the final frame of one lap and the first frame of the next are the same pixels. There is no cut to find.

Two consequences make this cheap rather than ruinous. Nothing is ever remembered from the seed — each lap regenerates the fine structure from the coarse one — so coordinates never grow, and a zoom running for an hour is as sharp as the first second; there is no accumulated floating-point decay to hide. And every lap culls the tiles that have left the frame, which is what keeps the working set near 600 triangles forever instead of multiplying it by 2.618 every 13 seconds. Left unculled, the six subdivisions this plate starts from — 20, 50, 130, 340, 890, 2,330 triangles — would pass six million within two minutes.

The focus the zoom converges on is deliberately placed off every mirror line of the seed decagon, at 29.0°. Aim at the centre instead and the ten-fold symmetry of the seed is preserved on every lap, and the animation looks like it is repeating even though the tiling is not.

What to look for

Find the five-pointed stars. In the patch this plate is grown from there are exactly seven distinct ways the rhombs can meet at a point — measured here across 1,071 interior vertices — and one of them is five fat rhombs meeting at their 72° corners, the configuration known as the sun. It occurs 56 times in that patch. The commonest, at 410 occurrences, is far less photogenic: two 108° corners and one 144° corner, three tiles round a point.

Then watch a single rhomb through a whole lap. It grows steadily, and around two-thirds of the way through, a finer lattice fades up inside it and takes over — that is the next subdivision arriving. Every edge you see appear was implied by the edges already on screen; nothing is invented and nothing is random.

On the stage above, a fat rhomb’s edge starts a lap about 58 px long and ends it about 94 px, while the generation fading in behind it runs 36 px to 58 px. The two are always exactly a factor of φ apart, which is why the hand-off is invisible.

Honest limits. This plate draws a finite patch, culled to the frame — the infinite tiling is what the rule describes, not what is stored. The matching rules are never enforced by a search: the substitution produces a legal tiling by construction, which is exactly why it works, because a greedy edge-matching solver placing rhombs one at a time gets stuck and has to backtrack. The rhombs are drawn plain, without the arrow or arc decorations that state those matching rules, so you cannot verify them from the picture. And “never repeats” is precise, not loose: it means no global translational period. Individual clusters DO recur — Penrose tilings are repetitive, so every finite patch you can see reappears infinitely often, at bounded spacing. You will meet the same star again; you will never meet the same picture. Mid-lap the plate shows two generations at once, which is a rendering choice for a smooth hand-off and not part of the mathematics. Reduced-motion visitors get the first frame of a lap, held still.

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

More from the gallery

All 22 animations in the gallery →