Periodical cicadas are insects of North America that mature into adulthood and emerge every 13 or 17 years. They come out together in their billions, thus making it difficult for predators to eat them all. What's interesting is their periods are prime numbers. This means that predators can't easily synchronize their own periods to that of the periodical cicadas. Another theory is that prime numbers prevent the emergence of hybrids from the cicadas with different periods.

Inspired by this natural phenomenon, now called Cicada Principle, web frontend designers have sought to use prime numbers to produce variations and patterns in their designs in a more efficient manner. Often CSS containing prime numbers are used to achieve this.

## Discussion

• Could you illustrate how prime numbers are useful in frontend design?

Let's take two prime numbers 3 and 5. If we shade two rows based on these primes, we'll find that the shading will not fall on the same column until the 15th column. This is because 3 and 5 don't have any common factors other than 1. In fact, for this to happen, it's sufficient that the numbers are co-primes.

In the case of the periodical cicadas, the periods are 13 and 17. This means that it's only once in 13x17 = 221 years that the two different species will come out in the same year.

Frontend designers who wish to create pseudorandom elements in their design need not actually generate random numbers or hardcode many variations. The use of large prime numbers will give them sufficient variations because patterns can be discerned only on a larger scale based on the multiples of those prime numbers.

• Where and how can I apply the Cicada Principle in CSS?

Backgrounds can be created without having any repeating patterns in them or showing gaps or seams between tiles. We can tile and overlap images of different widths, these widths having prime-numbered pixels. More efficiently, we can implement the same using CSS gradients. Michael Arestad has created interesting backgrounds by using prime numbers for background sizes and positions.

In general, Alex Walker proposed a "stacking order model", where many layers are stacked to create a background. The bottom layer can be small and repetitive since much of it will be obscured by higher layers. The topmost layer should have the largest dimension and also be thinly scattered (largest prime number in the group). It should also preferably not have eye-catching details.

Element borders, including border radius, can be varied so that each element of a group gets a different border. These borders can also be animated for a mouse hover event.

We can use the principle for CSS animations too by having the durations as prime numbers, scaled if necessary by a suitable factor.

• Could you illustrate an example of creating a CSS background based on Cicada Principle?

Let's create a background by applying Cicada Principle to the background-size. By setting, the sizes to either 17px or 37px and then applying linear-gradient we get a repetitive pattern, which is not very interesting.

When we combine both 17px and 37px widths, we obtain a more interesting background. However, this still shows some visual tiling. By adding another layer of width 53px, which is also a prime number, we get a background that's closer to what we want.

To create the gradients in the first place, we need to adjust the alpha values. Here too we can make use of prime numbers, with each layer getting a different alpha value for creating the gradients.

## Milestones

Apr
2011

Alex Walker reads about periodical cicadas and gets the idea to use prime numbers for generating pseudorandom background patterns. He uses three images of different prime-numbered widths: 29, 37 and 53 pixels. When these three are overlapped and tiled, the resulting background will not repeat for 29x37x53 = 56,869 pixels. The three images together take up less than 7kB in size.

Jun
2012

Jan
2015

Lea Verou produces CSS animations using the Cicada Principle.

Sep
2016

Charlotte Jackson use Cicada Principle to create pseudorandom borders around images. She does this by adjusting the CSS border-radius using prime numbers in CSS selectors.

## Sample Code

• /* Source: http://thenewcode.com/840/Brood-X-Visualizing-The-Cicada-Principle-In-CSS
Accessed: 2019-08-18
*/
div.prime {
background: rgb(231,144,15);
90deg,
hsla(255,100%,100%,.07) 50%,
transparent 50%
),
90deg,
hsla(255,100%,100%,.17) 50%,
transparent 50%
),
90deg,
transparent 50%,
rgba(255,255,255,.21) 50%
);
background-size: 17px, 37px, 53px;
}


Author
No. of Edits
No. of Chats
DevCoins
3
0
736
2
0
14
755
Words
3
Likes
4800
Hits