I like Super Mario and I love CSS3 - so I decided to create an experiment that combined the two.
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!
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.
Comments
(Powered by webmentions)Start the Conversation