Frank Fuchs

a designer who loves to code

Simulated random with CSS and the cicada principle

This is an article I wrote in 2011, but only in German. So I’ll start my blog with an English version of it, because I think it’s still quite useful stuff.

As I’m a bit of a maths geek, I was really fascinated by Alex Walkers article The Cicada Principle and Why It Matters to Web Designers.
It states, that the cicadas trick their predators with a reproduction cycle based on prime numbers. By emerging in huge numbers every 7, 11 or 13 years they avoid being to synchronized with the reproduction cycles of animals that eat cicadas and that normally have 2-6 year cycles.

So Alex’ idea is to stack layers of semitransparent repeating png backgrounds and a pixel size based on different prime numbers. By that you could create large background that don’t look repeating but still are small in file size. Read Alex’ article to get more details.

I was immediately sold to the idea, but in practice I’m not so often in need of an intensive background, so I thought of ways to make good use out of the cicada principle.

I finally came up with randomly rotated images.
If you have several pictures that should look like randomly placed on a table, you could either rotate them manually each by each or you can also make good use of our beloved prime numbers.

I rotated every 2nd, 3rd, 5th and 7th image with CSS3 transform and the :nth-child selector. But with only a few pictures it still doesn’t look very random. Especially with the first few pictures. So I also added an prime number based offset – :nth-child(5n+3) …

The result looks really random without being more work than a few lines of code.
You can study an example on my demo page.

Please leave a comment if you like the method and tell me if you could think of other uses for the cicada principle.


There are currently no comments on this article.


Enter your comment below. Fields marked * are required. You must preview your comment before submitting it.

← My all new blog all articles Quicksilver out of beta - Alfred still first choice →