Cicada Principle and CSS

Avatar of Chris Coyier
Chris Coyier on

Take your JavaScript to the next level at Frontend Masters.

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 →