Mosaic
24 tiles · each one generated
Pattern archive

A hundred ways to fill
a square with notHING

Every pattern here is drawn with CSS gradients on one element — no images, no canvas, no SVG. The traditions are real; the drawings are approximations made by a browser at 60 frames a second.

—

—

—

Motif—
Palette—
Period—

Every pattern
is a
grammar

A pattern is not a picture. It is a rule that you can break without noticing. Six squares, four corners, one diagonal and a decision about which way the eye is supposed to travel — that is enough to generate an infinite family, and the whole history of textile design is the history of people finding new rules inside old ones.

The tiles here use only what CSS can do well: repeating gradients at angles, conic gradients for radial motifs, hard-stop linear gradients for kilim-like bands, and a few pseudo-elements for the parts that need a second layer. Each one is named after a tradition it only resembles.