Moiré Patterns

A Moiré pattern is an interference pattern that occurs when two patterns of repeating lines or shapes are translated or rotated by a small amount relative to each other. Try clicking the SVG below. You should be able to notice lighter areas swelling in and out of the image (interference patterns).

Moiré patterns are more common than you would think. For example, taking a picture of a computer screen can result in a Moiré pattern on the image (try it out!). This essentially occurs because the grid of pixels on your computer screen can't be mapped perfectly to the grid of pixels in the camera image (some pixels get two pixels worth of information etc).

Here's a simpler example of just two sets of rotating lines. Notice how the interference pattern is a wave and the frequency of the wave is proportional to the angle of rotation, see this Wikipedia article for further details.

Curved lines work too! These two sets of concentric circles make an interesting pattern:

As always all of the code is available on my GitHub.