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!

Nine 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.

    • #9
    • Comment
    • Mon 5 Jan 2015
    • 0932
    Doug Rubino wrote in to say...

    We can’t call that the LCM principle, the coprime principle (or least common principle instead)?

    We all work with formal languages here:

    For almost all point-wise combinations of periodic functions, the period of their combination of the least common multiple of their periods. Why? If they have common factors, they count twice in the period and one is excluded.

    Let t = x/2pi

    sin(12t) + sin(2t) will have the following period
    lcm(12,2) =
    lcm(2*2*3, 2) =
    2*2*3 =
    12

    sin(3t) + sin(7t) will have the following period
    lcm(13,7) =
    lcm(13, 2) =
    3*7 =
    21

    You don’t need primes. You need coprimes. For instance 12 is coprime to 5

    sin(12t) + sin(5t) will have the following period
    lcm(12,5) =
    lcm(2*2*3, 5) =
    2*2*3*5 =
    60

    I was trained as a computational biologist, and while is awesome that evolution reared it’s lovely head in cicada mating, the principle is one of maximizing the period of multiple period functions. Given a choice, you do that by choosing a function with no common divisors. Not knowing the other functions, you do that by choosing a relatively large prime, which will be the smallest number that will not share divisors. products of primes (which aren’t prime) work fine, but they are mch larger.

    That’s the theory. Coprimes all the way, if you can choose your repeating pattern set.

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