Skip to content

The BIG Reason

Music, opinions, and portfolio of Mark Eagleton, musician and web developer in Northern CA.

  1. thebigreason
  2. link-list
  3. The Cicada Principle for Web Designers

The Cicada Principle for Web Designers

Alex Walker demonstrates how to use prime numbers to generate non-repeating patterns from repeating images.

Keeping the ‘cicada principle’ in mind, I’ve made three square, semi-​​transparent PNGs of 29px, 37px, and 53px respectively, and set them up as multiple backgrounds on the HTML element of a test page.

As you can see, the tiles overlap and interact to generate new patterns and colors. And as we’re using magical prime numbers, this pattern will not repeat for a long, long time.

Exactly how long? 29px × 37px × 53px… or 56,869px!

This article optimizes everything I love about front-end web design; Math-powerd design patters for calculating artistic randomness. Simply badicle. I think I will be applying the Cicada Principle on a refresh of the Glee Tour site I have in my queue next week.