Tetrapix breaks design's most basic move — putting a shape down, then doing it again — into the four choices that actually shape it: shape, repetition, rhythm, and grid.
Before a pattern says anything, its base shape already has. Four primitives cover most of what design reaches for, and each one carries its own bias.
Equal sides read as balance and order. It's the default of grids, forms, and anything that needs to feel dependable rather than expressive.
A directional shape — it points. Triangles introduce motion and hierarchy into a layout, which is why they show up in alerts and arrows more than in body copy.
No corners means no direction — a circle draws the eye to its center and holds it there. It softens a layout and signals completeness or containment.
Six sides tile a plane with zero gaps, which is why nature reaches for it in honeycombs. In design it reads as systematic — built for repetition from the start.
A single shape isn't a pattern yet. It becomes one through what happens when you place a second, third, and fourth — governed by one of these four moves.
The same unit, placed again at a fixed interval. It's the simplest way to turn one mark into a surface, and the one every other principle builds on.
Repetition with a beat — intervals that alternate rather than repeat identically. Rhythm is what stops a pattern from reading as static noise.
A shape reflected across an axis. It reads as resolved and intentional — the visual equivalent of a sentence that ends where you expect it to.
Shapes that interlock with no gaps and no overlap. It's the most demanding of the four — the shape itself has to be built for the join.
Nine patterns built from nothing but CSS gradients — a working reference for how far shape, repetition, and rhythm stretch on their own.
Pure repetition, one axis.
Radial units on a fixed grid.
Two-shape alternation.
Repetition off-axis for motion.
The structure under every pattern here.
Offset repetition, load-bearing logic.
Rotational symmetry, four steps.
Two rhythms overlaid.
A true tessellation, no gaps.
Tetrapix takes its name from the tetromino — four squares, one joint, endless arrangements. It's a small enough unit to hold in your head and a large enough one to build almost any pattern from. That's the bet this site makes: that most of what looks complex in pattern design is a small set of decisions, made well and repeated on purpose.