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:

• overlay1 - 520 x 540
• overlay2 - 416 x 360
• overlay3 - 312 x 720
• overlay4 - 416 x 540

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!