Moiré Interference

What this grid is

A moiré pattern is an interference “beat” that appears when you overlay two repetitive structures with a small mismatch in spacing, angle, or phase. The large-scale waves you see are not drawn directly—they emerge from the overlap.

This generator draws two independent sets of parallel lines (A and B) over the same canvas. By changing each set’s spacing, rotation, and offset, you can dial in anything from subtle shimmer to bold optical waves.

The output is a pure SVG line drawing, which makes it ideal for print, large-format posters, and scalable background textures.

Key parameters

• Canvas Width / Height — The SVG artboard size in pixels.
• A Spacing / Angle / Offset — Controls the first line family (spacing in px, rotation in degrees, and phase shift along the normal).
• B Spacing / Angle / Offset — Controls the second line family (same meaning as A).
• Line Width / Opacity / Color — Styling for both line sets.

Unique highlights

• Strong “big pattern from small changes”: tiny angle differences can create large moiré waves.
• Separate control of spacing vs angle lets you design either slow beats (angle-driven) or tight ripples (spacing-driven).
• Offset acts like a phase slider, useful for animation frames or generating multiple variations of the same look.
• Clean SVG lines stay crisp at any scale (no raster noise unless you want it).

Typical use cases

• Op-art and kinetic-looking poster backgrounds.
• Subtle security / anti-copy textures (low opacity + dense lines).
• Decorative overlays behind typography (use reduced opacity and thicker type).
• Print-ready patterns for packaging, stationery, or editorial accents.
• “Motion-ready” assets: generate multiple offsets as frames for a looping effect.

Tips

• For classic moiré waves, keep A and B spacing similar and set a small angle difference (e.g., 1–8 degrees).
• If the pattern looks too busy, increase spacing or lower opacity before increasing canvas size.
• Use Offset to fine-tune the beat position without changing the overall style.
• Very thin lines look best at large output sizes; for small icons, increase line width and spacing.

FAQ