CSS Animation Using the Cicada Principle

I wanted to add some interest to my homepage with movement. I decided to use only CSS as JavaScript seemed like overkill for a design flare. But how to create interesting animation that can seamlessly loop forever within the constraints of CSS. The problem is that CSS is a declarative styling language with no randomness. Usually it is randomness that stops animations from looking repetitive.

Cicada Principle

The humble cicada has life spans that are prime numbers of years (such as 5, 13 or 17). This likely evolved because it reduces competition for food between species and predation risk. Cicadas spend most of their lives underground, coming up at the end to mate. By emerging after a prime number of years they reduce overlap with other species or predators life cycles as prime numbers don't have factors (other than themselves). Lets start with an example of not using primes; say a Greengrocer cicada were to emerge after 2 years, a Red Eye cicada after 3, and a predator Praying Mantis after 6.

You can see all 3 creatures will be around on years 6, 12 and 18, meaning the cicadas will be competing for food and the Praying Mantis will be able to eat lot of cicadas---there would be a big cicada population decline in those years. So what about prime number life cycles? Greengrocer 3 years, Red Eye 5 years, Praying Mantis 7 years.

Now there are less overlaps, and when there is overlap it's only between two of them. In fact there won't be an overlap of all three creatures until 3 x 5 x 7 or 105 years! So every 105 years the cicadas will die off substantially but there is plenty of time to build up their numbers in between. Predators likely don't have prime number life cycles because they want to eat cicadas, but the cicadas doing it gives them a better chance.

What does this have to do with web design?!

Well you've heard of code bugs? ...Not that. We can use the cicada principle to make animations look random by having them take a long time before repeating. I first read about the ingenious cicada principle in this great article on sitepoint. It has a nice example of how to make curtains. I know, cicadas and curtains, but this is a serious technique.

The article presents the idea of using the cicada principle in CSS, and I extended it to animation. I call these animations "anicadas". This page's static striped background is made using the sitepoint concepts. For the animated title I made a repeating background of circles and triangles created with CSS gradients. The sizes of the circles are prime numbers. Then I animated them between 0 (you don't need to specify this, CSS will fill it in) and a multiple of their size (so that it repeats without a jump). The result is each layer in the animation repeats smoothly, the overall animation rarely repeats and looks far more visually interesting. It will repeat only once every 1264357px!

Here is the (slightly modified with browser prefixes left out) anicada CSS:

h1 {
  background-image: linear-gradient(45deg, turquoise 50%, white 50%), 
                    radial-gradient(hotpink 50%, white 50%), 
                    radial-gradient(greenyellow 50%, white 50%);
  background-size: 113px 113px, 67px 67px, 167px 167px;
  animation: cicada-css-animation 25s linear infinite;
}

@keyframes cicada-css-animation {
  to {
    background-position: 113px 113px, -67px 67px, 167px -167px;
  }
}

Check out the resulting anicada in this page's title, and a different anicada example on my homepage.

Wrap Up

There are some points to be aware of for your own anicadas:

• Don't animate large areas such as a page background—it's distracting and may even cause motion sickness in some.
• It makes text very hard to read, so use sparingly. Only apply to large, bold headings with suitable contrast, or non text areas.
• CSS animation uses lots of CPU, potentially making laptops very loud and hot. The smaller the anicada on and fewer "layers" the lower the impact.

The cicada principle is a simple technique to make designs look random or like they don't repeat, when in fact they do but only after a large distance / time. The principle can be applied to static backgrounds and now animations. I'd love to see if you use it, especially if you think of other ways to apply the principle.