Rotation

Color

Blur

Size

What is going on here?

After watching the Veritasium video titled The Infinite Pattern That Never Repeats, I was inspired to replicate the Moiré effect with the Penrose pattern shown around the 9 minute mark.

I highly recommend watching the whole video, but in short, the Penrose pattern is made up of 2 shapes that can be tiled together out to infinity without ever repeating the same pattern. This is called Aperoidic Tiling. If you overlay two sets of the Penrose pattern on top of each other and rotate one, you'll see the Moiré effect in action. It's where the two patterns line up.

So to make this page, I Googled for a Penrose pattern image and found this. Then I cropped it to a square, made sure all the white space was transparent and used the new image as the background of two web elements, one positioned on top of the other and made 50% opaque. I rounded the radius of both divs to make them look like circles.
Then the fun started :)

I added sliders to adjust rotation and color options for each tiling. And then a slider to adjust a blur effect of both tilings (individual blur didn't look as good). Soon after, I emailed the author of the image who graciously offered up a larger image which allowed size adjustments.

For the rotation, the slider value determines the number of milliseconds it will take for the tiling to make one 360º rotation. A positive value means rotating clockwise. A negative value means counterclockwise. I'd recommend trying all combinations of rotation here, i.e. Tiling 1 clockwise and Tiling 2 counterclockwise, both tilings slow, both tilings fast, both tilings same direction, etc. The best part is the easing effect in the rotation, where it slows down as it starts and stops.

For the color, it's simply adjusting the background color of each tiling. Admittedly, there might be more color options that don't look good than those that do. But it's still fun to try different ones.

For the blur, I liked how this sort of mimics the Magic Eye effect from those books and posters in the 90s.

For the size, you can adjust how large or small the actual tiles in the image appear. Thank you Anu for sending over the larger image!

Contact me