This simulation shows how two overlapping periodic patterns — line gratings, concentric circles, square or hexagonal dot grids, or radial spokes — create a slower, large-scale moiré beat pattern when their pitch or angle differ slightly. For two line gratings the moiré period follows dm = d₁·d₂ / √(d₁² + d₂² − 2·d₁·d₂·cos θ), which the simulator evaluates live from your pitch and angle settings and draws as a measured bar on the canvas.
Two independently rotatable, independently spaced pattern layers (lines, circles, square dots, hex dots, or radial spokes) composited with a chosen blend mode. Where the layers nearly line up they reinforce; where they drift out of step they cancel, producing the characteristic moiré fringes. The live readouts compute the moiré period d_m, the moiré fringe angle, and the magnification factor d_m/d₁ directly from your current pitch and angle values.
Choose a pattern type and set Pitch and Angle independently for Layer 1 and Layer 2, or drag the canvas to slide Layer 2's offset. Switch the blend mode (Multiply, XOR, Overlay, Normal) and pick a colour to change how the layers combine visually. Try the presets — Strain-gauge moiré, Print/scanner dots, Zone-plate — or enable Animate to drift Layer 2 automatically at an adjustable speed.
Moiré interference is not just a visual curiosity: engineers use strain-gauge moiré to measure microscopic material deformation, and print/scan moiré is why fine striped clothing sometimes shimmers oddly on video calls. The same beat-frequency mathematics underlies wave interference in optics and even aliasing in digital imaging.
A moiré pattern is a large-scale interference pattern that appears when two or more periodic patterns, such as line gratings or dot grids, are overlaid with a slight difference in pitch, angle, or both. The overlap of the fine repeating structures creates a new, coarser pattern that is not present in either original grating on its own.
For two line gratings with pitches d1 and d2 and a relative angle theta between them, the moiré period is d_m = d1 times d2 divided by the square root of (d1 squared plus d2 squared minus 2 times d1 times d2 times cosine theta). The simulation recomputes this formula live as you move the Pitch and Angle sliders and displays the result along with a moiré angle and a magnification factor.
Pitch sets the spacing between repeating elements in a layer, such as the distance between lines or dots, measured in pixels. Angle rotates that entire layer around the canvas centre. Because the moiré period depends sensitively on the difference between the two layers' pitch and angle, even a fraction of a degree of rotation or a small pitch mismatch can dramatically change the size and orientation of the resulting fringes.
Multiply darkens overlapping marks and produces classic dense moiré fringes, XOR (difference blend) highlights where the two layers disagree and produces sharp banding, Overlay (screen blend) lightens the composite for a softer look, and Normal simply stacks Layer 2 on top of Layer 1 without any interaction. Switching blend modes does not change the underlying geometry, only how the two rendered layers are visually combined.
Moiré effects appear whenever two fine periodic structures overlap: strain-gauge moiré is used in engineering to measure tiny material deformations, halftone printing and digital camera sensors can produce moiré when photographing striped fabric or fine mesh, and textile weaves or window screens can show shimmering moiré bands when viewed through another grid, such as a fence or a second screen.