3 × 7 × 11 = 231: a seamless background from three small tiles
Take a 3×3 grid of 8-pixel cells and put one of two pieces in each: two quarter circles in opposite corners — either top-left and bottom-right, or top-right and bottom-left. These are Truchet tiles. Every arc starts and ends at the middle of a side of its cell, so any two cells meet cleanly however they are turned. The line never breaks.

Here it is on its own, twenty times larger. The dashed lines are the cell borders. A line that runs into the edge of the tile carries on in the next copy.
Use the tile as a background. There is no seam.
But there is a repeat.

The tile has only nine cells, and every 24 pixels the same nine arcs come round again in the same order. The eye finds it in a second, and from then on the maze looks like checked cloth.
You could draw a bigger tile. Or you could lay another one on top.
A 7×7 tile on top, but not all of it
Take a second tile, 7×7, and fill not all of its cells but 25 of the 49. A filled cell is opaque: a Truchet piece on its own ground. The rest are transparent, and the tile underneath shows through them.

The checkerboard is the transparent cells. An arc that runs into a transparent cell does not break off: it is carried on by an arc of the tile underneath, which reaches the same border at the same point — exactly in the middle.

The dashed line is every 21 cells, 168 pixels. The repeat has not gone anywhere — it has moved: from 24 pixels to 168.
And not one seam at the borders between layers. That is not luck, it is the reason these pieces were chosen — more on that below.
And one more — 11×11
The third tile: 11×11, with 60 of 121 cells filled. It goes on the very top.

Just over half of it is transparent — 61 cells of 121.

No dashed line — there is nowhere to draw it. The next repeat is 231 cells away, which is 1848 pixels, and the picture is 800 wide.
To show how it is put together, here is the same thing with a ground of its own for each layer: light is the bottom 3×3, sand is the 7×7, grey-green is the 11×11.

Why 231. The bottom tile starts over at cells 0, 3, 6… The middle one at 0, 7, 14… The top one at 0, 11, 22… The whole pattern repeats where all three start over at once — at the first number divisible by 3, by 7 and by 11. That is the least common multiple, and it is 231.
This is called the cicada principle. Periodical cicadas come out of the ground every 13 or 17 years, and one hypothesis is that the periods are prime for exactly this reason: that way they rarely line up with predators on a two-, three- or four-year cycle. The tiles have the same job — to line up as rarely as possible.
I checked this by brute force rather than by the formula — building the visible pattern and looking for the smallest shift p at which it matches itself:
3 : period 3 lcm 3
3 + 7 : period 21 lcm 21
3 + 7 + 11 : period 231 lcm 231
4 + 6 + 10 : period 60 lcm 60
Why Truchet
A cell of the top layer ends up next to a cell of any other layer — which one is decided by arithmetic, not by you. So the piece in a cell has to meet any neighbouring piece.
An arbitrary pattern does not have that property. Put a cross in a cell, or a diamond, or a piece of ornament, and every border between layers becomes a seam where a line stops dead or runs into someone else’s. The overlay would hide the repeat and draw a grid of seams in its place.
With Truchet, a line crosses every side of a cell exactly at its middle, however the piece is turned. A piece does not care which layer its neighbour comes from: the join is the same either way.
That is the whole requirement on the pattern. Not “pretty” — “meets any neighbour”.
Which cells are filled cannot be seen
Which cells of a layer are filled and which are transparent is that layer’s mask. The masks above are random. Take a rule instead: the cells where (x + y) mod n < n/2 are filled — a diagonal band across each tile. In the 7×7 that is 21 cells of 49, in the 11×11 55 of 121.

No diagonal. The maze is no different from the one with a random mask.

But it is there — tint the layers and it appears. Bands of two widths, one from the 7×7 and one from the 11×11, and the figure they make together repeats every 77 cells.
The reason is the same property Truchet was chosen for. A piece in the top layer cannot be told from a piece underneath: two quarter circles are two quarter circles whatever layer they lie on. The eye sees only the lines, and the lines do not say which layer a cell came from.
So while the layers are drawn the same, any mask will do: a diagonal, a frame, a cross, a diamond — there is no difference to the eye. Set the layers apart by colour, and the mask becomes part of the picture, and the colour gets a period of its own — 77, not 231. Why is below.
Not any three numbers
The first thing you want to do is pick rounder sizes. Say, 4, 6 and 10.

A repeat every 60 cells, not every 4 × 6 × 10 = 240. You can see it in the picture: the dashed line is at pixel 480, and to the right of it everything starts again.
It comes down to shared factors. 4 and 6 share a factor of 2, so do 4 and 10, and so do 6 and 10. Shared factors cancel, and the period comes out four times smaller than the product. The whole product is reached only when no pair shares a divisor.
This is where it is easy to go wrong. It is not enough for the three numbers to have no divisor common to all three: 6, 10 and 15 have none, and the period is still only 30, because every pair has one — 2, 3 and 5. The numbers have to be coprime pairwise. They do not have to be prime: 8, 9 and 25 work too.
Every triple occurs exactly once
The least noticeable part, and the most useful one.
The tiles have 9, 49 and 121 cells. A 231×231 period is 53361 cells, and 9 × 49 × 121 is also 53361. Not a coincidence: every cell of the period is some cell of the bottom tile, some cell of the middle one and some cell of the top one, and every such triple occurs exactly once. The Chinese remainder theorem, if you want a name for it.
triples: 53361 of 53361 each seen {1}
cells: 53361 visible from {3: 13176, 7: 13725, 11: 26460}
Which means the make-up of the pattern can be worked out in advance, with no picture at all. The bottom tile shows where the middle and the top ones are both transparent: 9 × 24 × 61 = 13176. The middle one where it is filled and the top one is transparent: 9 × 25 × 61 = 13725. The top one wherever it is filled: 9 × 49 × 60 = 26460. Want the bottom layer to show through less often? Fill more cells in the layers above. Exactly how many is worked out on paper.
In CSS it is one rule
.texture {
background-color: #f4f1ea;
background-image: url(tile-11.svg), url(tile-7.svg), url(tile-3.svg);
}
The first image in the list is drawn on top. background-repeat is repeat by default and the size comes from the SVGs themselves, so nothing else is needed. Every picture of the pattern in this article is a screenshot of a rule like this one in headless Chrome.
The three tiles weigh 5634 bytes, 1808 gzipped. The same pattern as one SVG covering the whole period is 2946356 bytes, 543673 gzipped.
Where it breaks
Tinted layers repeat sooner. In the tinted pictures the repeat is visible again, and that is not a drawing mistake. Which layer shows in a cell depends only on the 7×7 and 11×11 masks — the bottom tile is solid and takes no part in it. So the colouring by layer has a period of 7 × 11 = 77, not 231. The lines do not repeat for 1848 pixels; the colour repeats after 616.
The bottom tile still repeats — where it can be seen. A quarter of the cells are the 3×3 with its 24-pixel period. The eye does not catch it, because the windows it shows through are small and scattered with a period of 77. But fill the upper layers too sparingly and the windows grow, and the 3×3 check shows through them.
Seamlessness belongs to the piece, not to the overlay. If a piece does not meet any neighbour, there is a seam at every border between layers. An overlay only lengthens the period.
Three tiles — 231.
As long as the sizes share no divisor. Not one pair of them.
Comments 0
No comments yet.