26 October 2012

Isometric Cicada Principle

The cicada principle for web designers is a pretty neato technique for creating seemingly non-repeating backgrounds in HTML & CSS. After being inspired by this process and also drawing pictures on isometric dot paper with my friend, Harold, I decided to make my own. If your browser supports multiple background images on one element and you’re viewing this page directly, then you’re looking at it right now.

The main repeating image is 104 x 180 pixels, and on top of that there is:

So, if we find the LCMs for both the widths and heights, the whole thing doesn’t repeat for 6240 x 2160 pixels! Scroll down the page to view more of the background.

Update: you can now view the design and see the individual images on the design festival site.

comments powered by Disqus

Peter Coles

Peter Coles

is a software engineer who lives in NYC, works at Ringly, and blogs here.
More about Peter »

github · soundcloud · @lethys · rss

It’s time to get big money out of politics. Join the kick-started campaign to put government back in the hands of the people. Pledge mayday.us now