So for my first post on this blog I decided to write about something that I experimented with while designing this site.

What is a Cicadient?

A while ago I read about a concept the Cicada Principle on the Design Festival Blog. Essentially, the concept states that if you repeat multiple background images in prime number increments you will have a background that repeats at very large intervals, specifically the multiple of the sizes of all the background images. This example which features 3 images, sized at 1, 3, and 7 units each, repeats every 21 units.

I thought it was a really neat concept, but I didn’t think much about it until Eric Meyer wrote about it in a blog post entitled, “Cicadients“. What Eric did was realize that CSS3 gradients could follow this same principle. Lea Verou also touched on this (courtesy of Randy Merrill) in her amazing collection of what you can do with CSS3 gradients.

That is where this experiment started. If you can build a checkerboard with gradients in CSS, why can’t you use the cicadients to have a checkerboard that repeats only at large intervals in both directions?

What I did was I figured out how to make a square in the css using just gradients. This involved 2 gradients turned to 45 degrees and 225 degrees respecively with a solid switch from solid to transparent. This turns each gradient into a triangle in opposing corners. Once you have that you need to position them to form the square based on the width of the rectangle.

Now the fun part. I used 4 different square “layers” where each layer was 7em, 5em, 3em and 11em respectively going down (remember that the first background named in the list is the one that shows up on top). Here are the combined layers.

Cicadiant Example

Issues I found

So in the end, I went through all of this trouble and I didn’t use it? Yep.

First off, doing gradients in this way is extremely inconsistent across browsers as far as I can tell. I do most of my dev work in Firefox, so I was very excited when I got it working, only to find Chrome had all of the triangles overlapping in weird ways. That was fixed mostly by switching from pixels (an absolute measure) to ems (a relative measure), but even then as you can see from the screenshot above, you can still see slight overlapping.

The overlapping was made more pronounced by something I left in the CSS to make a point. Using hsla and rgba for colors, while they could have amazing effects, emphasize the overlapping (note the diagonal line going through some of the squares).

I didn’t try percentages because they don’t work well with background size and I didn’t want to use the calc() function because of lack of support on mobile. (Update May 2017: This is no longer the case)

Now I know that this may be solvable by finding the closest possible em measure so that it is appropriately aligned, but even then many browsers round to the nearest pixel differently.