Cicada Principle and CSS

Avatar of Chris Coyier
Chris Coyier on

Charlotte Jackson uses this classic clever technique to pseudo randomize border-radius, making irregular circles for a photo grid.

A cicada is a rather grim looking little bug. You may have heard of them. There is a kind called the Periodical Cicada, which simultaneously emerge in masses every 7, 11, 13 or 17 years; they find a mate and then they die. It’s not much of a life.

However, the interesting thing is that these numbers are all prime numbers.

Alex Walker dug into this back in 2011 and made some cool demos like randomized non-repeating backgrounds and infinite lego dude variations.

Here’s a demo by yoksel combining the idea with blend modes:

See the Pen The Cicada Principle background + background-blend-mode by yoksel (@yoksel) on CodePen.

Direct Link →