meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Cicadients

I’ve been a fan of “The Cicada Principle” since it was first published.  After wandering through a CSS gradients gallery or two back in April, it occurred to me that it ought to be simple to merge the two things.  So I did: thus was born “Cicadients”.  It took me until now to actually blog about it because, well, you know, things were, hey, what’s that weird thing over there?

What?

As a recap, the Cicada Principle states that if you pick a few simple patterns that repeat at prime-number intervals, you can create complicated patterns that only repeat at intervals that are the product of the individual intervals.  For example, if you have patterns that repeat every 3, 5, and 7 pixels (respectively), the combination of the three will repeat every 3×5×7 pixels, which is to say every 105 pixels.  Bump up the intervals, and you get some truly staggering numbers.  For example, shift up to 7, 11, and 13 pixels and their combination repeat every 1,001 pixels; combining 11, 13, and 17 gets you 2,431; combining 13, 17, and 23 yields 5,083.

The examples presented in the original article use semi-opaque PNGs to achieve this effect.  All I did was replace their images with images of my own; to wit, CSS gradients.  (Yes, gradients are images, every bit as much as any PNG.  They’re just described differently.)  In doing so, I not only reduced server hits, but I also saved a fair number of bytes.  In the first case, I did so while achieving pixel-perfect fidelity to the original.  In the second case, I didn’t make it exactly the same as the original, but I got fairly close in 0.63KB (2.81KB with prefixes).  I could probably get closer to the original with a little more effort—a couple of my gradients are a little too smeary—but that will probably wait a while, if I ever get to it at all.  But, again, the final result is a kilobyte or two; the original example was 23KB plus extra server hits.

That was the real reason for my efforts, aside from the simple pleasure of doing it: to find out how much more efficient a gradient could be than a raster image in appropriate situations.  I had expected some savings with gradients, but I was frankly astounded by how much was saved.  You can do a lot more with gradients than sunset backgrounds and lickable button highlights.

Of course, gradients are not right for every situation: the third example in “The Cicada Principle”, for example, should only be done with gradients as an example of how not to do it.  Possibly also as a public declaration of deep masochistic tendencies.  Either way, you’d probably crash browsers, and that’s currently the job of radial gradients.

I’ll be very interested to see if people come up with their own cicadient examples.  If you do, let us know about them in the comments!

Eight Responses»

    • #1
    • Comment
    • Fri 22 Jun 2012
    • 2049
    Ethan wrote in to say...

    You, sir, have a robot brain. I always suspected, but now I know.

    This is just wonderful.

    • #2
    • Comment
    • Fri 22 Jun 2012
    • 2057
    Norcross wrote in to say...

    This is some mind bending [REDACTED]. And it’s amazing.

    • #3
    • Comment
    • Fri 22 Jun 2012
    • 2111
    Luke wrote in to say...

    couldn’t you add Fozzy Bear into Nº 2 on retina displays? #rimshot via twitter

    • #4
    • Comment
    • Sat 23 Jun 2012
    • 0337
    Lea Verou wrote in to say...

    Well done! My patterns gallery had something similar for a while http://lea.verou.me/css3patterns/#cicada-stripes but it just used the cicada principle, didn’t follow one of their patterns. I love what you did there :)

    • #5
    • Comment
    • Mon 25 Jun 2012
    • 1526
    Eric Meyer wrote in to say...

    Thanks, folks! Of course, the real credit goes to Alex Walker for devising the Cicada Principle and sharing it with the world. All I did was rework it in another format, which isn’t clever so much as cunning. Not that there’s anything wrong with that!

    (Also, Norcross, apologies for the redaction. I still worry about people who visit from workplaces that run content-filter proxies, so I chose to take the redact-and-publish route rather than dump the comment entirely.)

    • #6
    • Comment
    • Thu 5 Jul 2012
    • 0120
    Gerald wrote in to say...

    Wow, that’s really cool. I can’t believe I’ve used images before, when I could have just use that. Thanks for this, will definitely try them out.

    • #7
    • Pingback
    • Thu 21 Feb 2013
    • 2336
    Received from Christopher Bullock | A Cicadient Experiment

    [...] 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 [...]

    • #8
    • Comment
    • Wed 17 Apr 2013
    • 1748
    Jesse Gardner wrote in to say...

    Excellent! Next I’d like to see CSS-gradient mesh artwork.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


June 2012
SMTWTFS
May September
 12
3456789
10111213141516
17181920212223
24252627282930

Sidestep

Feeds

Extras