Moiré

무아레

A rippling pattern that appears when two regular grids overlap at a slightly mismatched angle — a pattern that exists in neither grid alone.

Also known as: 간섭무늬Moire patternInterference pattern
···
html
<div class="stage">
  <div class="layer a"></div>
  <div class="layer b"></div>
</div>
css
.stage{position:relative;width:100%;height:100%;overflow:hidden;background:#fff}
.layer{position:absolute;inset:-40%;background-image:radial-gradient(circle,#111 34%,transparent 36%);background-size:9px 9px;opacity:.65}
.layer.b{animation:spin 9s linear infinite;mix-blend-mode:difference}
@keyframes spin{to{transform:rotate(360deg)}}

Overlap two dense, regular patterns — halftone dots or stripes — at even a slightly mismatched angle or spacing, and the two grids reinforce and cancel each other in a way that produces a coarse rippling pattern neither grid actually contains. It's optical interference, not a printing flaw in either layer alone.

In print it shows up most often when an already-halftoned image (from a newspaper or magazine page) gets rescanned and reprinted — the scanner's dot angle clashes with the original's. That's exactly why the four CMYK plates in process printing are each set at a different angle (commonly around 15°, 45°, 75°, and near 0°) — spacing the angles out is what keeps the dots from moiré-ing against each other.

The same thing happens photographing finely striped fabric, or a screen with its own pixel grid. The demo overlaps two identical stripe layers and slowly rotates one — watch the ripple pattern swell and fade as the angle drifts.

When to use

Watch for it when rescanning an already-printed image, or photographing striped or checked patterns. Nudging the angle or slightly lowering resolution both help suppress it.