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.

Did you find this helpful or fun? Please donate!

donate via btc or eth

btc: 18jCzwsZDGQYcs6Kyv92pd4683cnnxm1Dd
eth: 0xC285F21Cb271Cb4B3F70c4C47B2f7B26063AF590
paypal: paypal.me/mrcoles
comments powered by Disqus

Peter Coles

Peter Coles

is a software engineer who lives in NYC who is working on Superset and also GoFullPagemore »

github · soundcloud · @lethys · rss