yahew.com The tiled background

The tiled background

The surface behind this text is one image, 14 pixels square, repeated a few hundred times. It weighs 0 bytes.

Change the wallpaper

Every swatch is made of the tile it selects, which is how a real one worked. Click as many as you like. That is the point: it costs nothing.

dots 5

lines 8

weave 5

masonry 5

motifs 8

tech 5

nature 6

Loaded so far: 0 bytes across 0 of 42 patterns. All 42 together is 3,586 bytes, which is still less than the single TextureTown file at the bottom of this page by two orders of magnitude. Every one is a real GIF87a you can save: download the current tile.

The thing itself

Zoomed to eight times actual size, next to the same file at the size it really is. That small square is generating the entire surface of this page.

Actual size.
14 x 14

Find the seam

Three of these four repeat correctly. One has had its lower half nudged sideways, which breaks the pattern across the middle. Click the broken one. The nudge gets smaller every round.

Round 1 of 5. Offset: 6 pixels.

Pick one.

This is not a trick question about eyesight. It is the craft. heart143 hard-codes background-position-x: 3px for one tile and 11px for another. Somebody nudged each pattern by hand until it sat right against the layout. There is no formula, and you cannot see the work until somebody removes it.

Weigh it

FilePixelsBytesAt 28.8k
scanline.gif, the smallest here 8 x 4 40 0.01 seconds
circuit.gif, the largest here 64 x 64 347 0.10 seconds
all 42, this page3,5861.0 seconds
eight tiles, heart14314 to 64 sq.8740.25 seconds
marble.gif, in production today115 x 1152,4840.71 seconds
wood--095C.png, TextureTown432 x 432406,2141.9 minutes

The first eight I drew, before adding the rest, came to 872 bytes. heart143's eight production tiles come to 874. That near miss is a coincidence and not a law, but it keeps happening, because this is simply what a small repeating pattern costs: every one of the 42 above is under 350 bytes, and the whole catalog fits in 3.5 KB.

The last row is the warning. TextureTown is a working texture shop with 3,867 files in 17 categories, and it looks like exactly the right evidence for this plate. It is not. Its files are 20 KB to 400 KB modern high-resolution art, a loving remix rather than a 1996 artifact, and one of them outweighs all 42 patterns on this page put together by 113 times. The modem column is arithmetic from a line rate of about 3.5 KB a second, not a measurement anybody took at the time.

126 bytes, and no request at all

doffy.neocities.org does not link its background. It writes the whole image into the stylesheet as a data:image/bmp;base64 string: a 16 by 16, one-bit BMP, 126 bytes, 168 characters of base64. Here is every pixel of it.

256 pixels. 80 of them on.

One bit each, so the bitmap itself is 32 bytes. The other 94 are the BMP header, which the file cannot legally omit.

Zero HTTP requests. It arrived inside the CSS that was already coming.

0.04 seconds on a 28.8k line, by the same arithmetic.

Field marks: how to tell a period tile from a modern one

What it solved, and what took it

The background of the page was yours. Not a header image slot, not an accent color from a dropdown, but the actual surface the words sat on, chosen by you. The entire cost of that freedom was under a kilobyte, which is why the era looks the way it does. Seamless, repeating, obsessively small, and nobody would have invented that language on purpose. It fell out of the constraint.

What replaced it is not a worse tile. It is a settings panel where the surface is one of six, and the six are chosen by somebody else. The tiling never stopped being possible. Two declarations still do it. What went away is the assumption that the question was yours to answer.

Back to the directory.

Sources, and what is deliberately absent

Prev The blinkie Next The custom cursor