I like Super Mario and I love CSS3 - so I decided to create an experiment that combined the two.

The Cicada Principle

The Cicada principle was coined by Alex Walker after being inspired by a documentary on the Cicada. I won't go into all the details as everything is covered in the original article - which is definitely worth reading.

The basis of this principle uses prime numbers - along with the new multiple backgrounds feature in CSS. By using image sizes based on prime numbers (3, 5, 7, etc) they don't repeat in sequence and create an - almost - infinitely large image.

At the top of this page I have used 6 images with widths of; 16px, 208px, 272px, 304px, 368px and 496px. All of these numbers are multiples of 16 and a prime number. This creates a tiled background that's exactly 5. 023x10\^13px wide.

With only 33kb worth of images that's quite a feat!

Browser support

As you can tell if you're viewing this page in an older browser - the support isn't the best. This will however continue to improve.

If you are having trouble viewing this page, I recommend downloading Chrome or Firefox.


(Powered by webmentions)

Start the Conversation