Moiré Patterns Explained by Animated GIFs

Moiré patterns are a type of optical illusion. While there are complicated formulas that can calculate when and where they will occur, I wanted to spare my fellow illustrators and graphic designers all the math and just show you some basic principles instead (feel free to just watch or read my descriptions underneath for additional insights).

Overlaid Parallel Lines

Animated gif showing moiré patterns

As the angle between patterns decreases below 45 degrees, moiré patterns increase.

Overlaid Dot Grids

Animated gif showing moiré patterns

Most of us are familiar with the CMYK dot grids that are used to reproduce colors and photos in four color process printing. The above example contains three notable observations: 1) since the angle between any two neighboring colors is always less than 45 degrees, printers strive for the tightest, most even, “rosette” moiré patterns they can achieve; 2) colors formed by two neighboring colors — like the shadows in the blue areas above — break down into blotchy moiré patterns as the screen angles decrease; 3) colors formed by two non-neighboring colors — like the orange areas above — are less affected as the screen angles decrease.

Overlaid Straight and Curved Lines

Animated gif showing a moiré pattern

Overlaying curved lines with nearly any pattern almost guarantees the creation of moiré patterns (because somewhere the patterns are bound to intersect at an angle of less than 45 degrees).

Fine Concentric Lines

Seeing this example work is highly dependent on your screen’s resolution and how close you’re viewing it (plus Photoshop, attempting to remove the moiré effect, has automatically added some noise to the lines…).

Animated gif showing moiré patterns

If you have ever held a vinyl record and studied its grooves, then you are probably familiar with this phenomenon. When fine lines, especially arced lines, are spaced too close together, they will create a moiré pattern (no overlaid pattern necessary).

Now that you have some knowledge of what moiré patterns are and how they are created, I will leave you with a few practical tips:

For Illustrators (working in an engraving, woodcut, or scratchboard style)

  • To avoid moiré patterns, keep your crosshatching lines 45–90 degrees apart.
  • Consider using moiré patterns to recreate the texture of objects like shiny silk fabric, peacock feathers, etc.

For Graphic Designers

  • Consider using moiré patterns as a cool optical effect (governments do on currency — although, they mostly do it to induce moiré patterns as a way of preventing counterfeiters).
  • If your design or images are predominantly a certain color, you can talk with your printer about adjusting the regularly assigned screen angles of the CMYK plates to minimize moiré patterns.

3 Responses to Moiré Patterns Explained by Animated GIFs

  1. I have been browsing online greater than three hours these
    days, but I by no means discovered any interesting article like
    yours. It’s beautiful value enough for me. Personally, if all web owners and bloggers made good content material as you probably did, the net will be a lot more useful than ever before.

  2. This website was… how do I say it? Relevant!!
    Finally I have found something which helped me.
    Appreciate it!

  3. Laurel says:

    I think this is one of the most important information for me.
    And i’m glad reading your article. But wanna remark on some general things, The web site style is
    wonderful, the articles is really nice : D. Good job, cheers

Leave a Reply

Your email address will not be published. Required fields are marked *