hr-studioPatterns & Tiling · 04
A computational design primer · Tessellation

Shapes that fill a world with no gaps.

A tessellation is a pattern of tiles that covers a flat plane completely — no overlaps, no leftover slivers, repeating outward forever. The rules are strict, the consequences endless. Let's find them.

Scroll to begin
i.

It all happens at a corner

Whether shapes tessellate is decided at a single point — a vertex, where corners meet. The angles crowded around that point must add up to exactly 360°. A hair under and a gap yawns open; a hair over and the tiles overlap.

Fan copies of a regular polygon around one point and watch the arithmetic. Only a few shapes close the circle perfectly.

Pick a shape
ii.

Only three ever work

Run that corner test on every regular polygon and you're left with exactly three that tile the plane alone: the triangle, the square, and the hexagon. Nothing else divides 360° cleanly.

These are the regular tessellations — the bedrock under honeycombs, graph paper, and bathroom floors. Switch between them.

The regular three
iii.

Any four-sided shape, no exceptions

Here's the surprise. Drop the demand for regularity and a remarkable fact appears: every quadrilateral tiles the plane — even a lopsided, dented one. Spin a copy 180° around the midpoint of each edge and the four angles, which always sum to 360°, slot perfectly around every vertex.

Drag the corners into any shape you like. The tiling never breaks.

Drag the four corners
iv.

Escher's sleight of hand

To turn a dull tile into a bird or a fish, M. C. Escher used one trick: take a bite from one edge and glue it onto the opposite edge. Area is conserved, and because the missing piece reappears exactly where the neighbour needs it, the tiles still interlock without a whisper of a gap.

Drag the two handles. Whatever you carve from one side grows on the other.

Drag the handles · reshape an edge
bite here grows there
v.

The tessellation studio

Now the whole idea at full size. Sculpt the two edges of a single tile and watch an endless, interlocking, colour-shifting mosaic assemble itself — every copy a perfect translation of the one you're holding. Drag the handles, or hit Surprise me and let the plane reinvent itself.

Drag the handles to sculpt the tile
From two rules — fill every corner, lose no area — falls an entire visual universe. The plane was never empty; it was only waiting to be divided.