Lay two regular patterns over each other and detune one very slightly. The result is a third pattern that is not in either layer — it is made entirely of the disagreement between them, and it is far coarser than anything drawn. This is the motif behind the header on both of my sites; here you can take it apart.
Where the third pattern comes from
Two line gratings with spacings a and b come back into alignment
every a·b / |a − b| pixels. That distance is the beat period,
and it is what you actually see. Make the two spacings nearly equal and the denominator
goes to zero: a 0.6-pixel disagreement between 10.0 and 10.6 produces bands about
177 pixels apart — roughly eighteen times coarser than either grid.
That amplification is why moiré shows up as a defect everywhere. A striped shirt on
camera, a screenshot of a screen, a halftone print scanned at the wrong resolution: in each
case a fine pattern is being sampled by another fine pattern, and the error between them is
big enough to see. Rotation does the same thing to a grid — the beat spacing scales as
roughly a / (2·sin(θ/2)), so a one-degree tilt produces enormous bands.
Site motif restores the exact parameters used in the page headers: two
concentric ring sets at 10.0 and 10.6 pixels, sharing an origin. The version on the live
pages is pure CSS — two repeating-radial-gradient layers, no image and no
JavaScript — which is why it costs nothing to ship.