The combination of nth-child and cicada principle is a clever technique used for faking the randomisation of patterns. Since computers can’t generate random numbers (e.g. math.random() in Javascript isn’t completely random), the best we can do is give it a pseudo random seed value, which is usually based on a variable that can't be predicted (like exact time, for example). The key to making a sequence seem random is to introduce so many variables that it becomes too difficult to predict.

Why is it called the cicada principle?

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. The reason for emerging at these particular times is to avoid clashing with the cycles of their predators.

So, the principle in relation to websites is all about prime numbers.

Random blobbiness

I've used it on the UX London site to make it look like the images on the Speakers page get a distorted, circular, blobbiness added to them at random.

How does it work?

nth-child is how we can target all items in a prime number space.

.Item:nth-child(2n) {…} .Item:nth-child(3n) {…} .Item:nth-child(5n) {…} .Item:nth-child(7n) {…} .Item:nth-child(11n) {…}

However, I found that just using prime numbers didn't quite target enough items to make it look really random, so I added another layer of nth-child using prime numbers like this:

.Item:nth-child(2n+1) {…} .Item:nth-child(3n+2) {…} .Item:nth-child(5n+3) {…} .Item:nth-child(7n+5) {…} .Item:nth-child(11n+7) {…}

The number that goes before n is the next prime number and the number added onto it is the previous prime number.



So for each nth-child rule, the image has four different border-radius values and some have a very slight rotation. Then I’ve tweaked the blobbines on the hover states.

.Item:nth-child(2n+1) .Item-image { border-top-left-radius: 59%; border-top-right-radius: 52%; border-bottom-left-radius: 59%; border-bottom-right-radius: 56%; transform: rotate(-6deg); } .Item:nth-child(2n+1) .Item-image:hover { border-top-left-radius: 51%; border-top-right-radius: 67%; border-bottom-left-radius: 64%; border-bottom-right-radius: 56%; transform: rotate(-4deg); }

You can visit the UXLondon site to see it in action.