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 (which should be yes), 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.

Digression: for you math nerds, did you know that you can compute the least common multiple from the greatest common divisor? lcm(a,b) = |a•b| / gcd(a,b)

… and GCD can be computed efficiently using Euclid's algorithm from 300 BC!

Did you find this helpful or fun? paypal.me/mrcoles
comments powered by Disqus

Peter Coles

Peter Coles

is a software engineer living in NYC who is building Superset 💪 and also created GoFullPage 📸
more »

github · soundcloud · @lethys · rss