I’m going to start today on a wild tangent, but bear with me – I promise. Doing There is a purpose.
A few years ago, I read an interesting study life of periodic cicadas, We don’t usually see many of these little guys because they spend most of their lives quietly in underground tunnels and munching on tree roots.
However, every 7, 13, or 17 years (depending on the species), these periodic cicadas suddenly emerge massively from their burrows, turning into noisy, flying creatures, finding a mate, and finally Long wander to end.
While this is a shocking ‘punk rock’ demise for our formerly nerdy cicada, it does raise an obvious question: Is it by chance that they adopted these 7, 11, or 13-year life cycles? Or are those numbers special somehow?
As it turns out, this number Doing have something in common. they are all prime number – Numbers that can only be divided by itself and 1 (ie, 2, 3, 5, 7, 11, 13, 17, 19, 23, and so on).
But why does it matter?
Research has shown that populations of creatures that prey on cicadas – typically birds, spiders, wasps, fish and snakes – typically reproduce in their short 2- to 6-year cycles of boom and bust.
So, if our cicada were to emerge from, say, every 12 years, any hunter who worked in 2, 3, 4, or 6-year cycles would slowly come to their own with this predictable cicada feast. Will be able to synchronize the boom years. In fact, they probably make it a public holiday called ‘National Cicada Day’ with BBQ and everyone getting ready.
Obviously, it’s not so festive if you’re a cicada.
On the other hand, if one swarm of 17-year-old cicadas was unlucky enough to emerge during a 3-year-old wasp’s bumper season, it would be another 51 years (ie 3 x 17) before that event occurs again. In the intervening years, our cicadas may happily emerge in their thousands, completely decimating the local predator population, and may mostly left peacefully.
What resourceful little people, eh!?!
That’s great. But what does all this have to do with web design?
A long time ago we saw the process of making seamless tiles. As ultra-useful as seamless tiles are, it can be hard to find a balance. right now Correct.
On the one hand, you want to keep the image file dimensions as small as possible to get the best out of that tiling effect. However, when you look at a specific feature—for example, a knot in some woodgrain—repeating at regular intervals, it actually breaks the illusion of biological randomness.
Maybe we can borrow some ideas from those cicadas to make our tile feel less repetitive?
Generating Organic Randomness with CSS
Example 1: Magic Tile
Enough talk. Here’s a quick proof-of-concept. It’s not supposed to be spectacular to watch, but does a good job of showing what’s going on. In keeping with the ‘cicada principle’, I created three square, semi-transparent PNGs (all prime numbers) of 29px, 37px, and 53px respectively, and set them as multiple backgrounds on the wide DIV element of the test page Is .
div background-image: url(29-a.png),url(37-a.png), url(53-a.png); padding:0; margin:0; height: 100%;
And here is the result. Drag that horizontal scrollbar to the right to see the new pattern we’ve generated.
As you can see, the tiles overlap and interact to generate new patterns and colors. And as we’re using magic prime numbers, this pattern won’t repeat for a long, long time.
ok for how long? 29px × 37px × 53px… or 56,869 px!
Now, this was a revelation for me. Felt crazy I actually had to triple-check my calculations, but the math is solid. Remember these are small graphics – 7kb. fewer Overall – Still they are generating a region of the original texture about 57,000 pixels wide,
You can imagine what would happen if you added a fourth layer of tiling—let’s say a 43px tile. Or maybe you can’t even imagine it, because the numbers start to get a bit brutal and can slap your ears if you stare at them for too long.
Suffice to say, you’ll get more relevant numbers for planet terraformation Compared to web design.
Well. So, abstract, geometric stripes are good and all, but how else can you apply this idea?
Example 2: Red Curtain
Let’s take a more photo-realistic example that we’ve all probably seen at some point: the red velvet theater curtain. I found a nice curtain graphic here Courtesy unsplash To use as a starting point. Looking at our curtain you can see it’s broken tentative Same vertical units.
For this example, I’m going to refer to this distance as a.disturbed unit‘, and (unlike the first example) this unit is going to be more important than strict pixel dimensions The images we are working with.
First, I’m going to pick one of these ruffles and turn it into a seamless tile. it is A PNG and its weight is very neat 7kb,
Presented as a single tile, this graphic is everything we Don’t Like about the tiling background. The joints are obvious and it’s as mechanical and disjointed as the actual curtain.
For layer two, the prime number we’re going to use is three, I am going to take a new ‘ruffle unit’ of the curtain and place it inside a transparent PNG which is three ruffled units wide,
I have feathered the right and left edges so that it blends smoothly with the tiling layer below. The resulting file is 15kb. comes in ticks under,
We definitely get a better result when we overlay this tile on our bottom layer. There’s still an unusually regular pattern evident, but it’s starting to break down a bit.
The magic number for our third layer is Seven,
We’re creating a new transparent PNG with seven ruffle units, and I’m going to drop two new sections of the ruffle image at positions 3 and 6. If this sounds confusing, the diagram on the left *should* be cut. Again, I’ve feathered the edges This photo To help blend in with the lower layers.
Clearly this is a huge image in both pixel dimensions and file size, but it still only suggests a scale of 32kb – not outrageous by any measure.
Here’s what happens when we tile this graphic on the first two layers. I am quite happy with that result. It’s true, your eye can probably pick out small parts of the image that seem to repeat (because they do), but the underlying pattern becomes so complex that your eyes stop searching for similarities. Scroll right to see what I mean.
To put it another way, if we treat each ruffle as purely a number, the number pattern it produces looks like this: 1, 2, 3, 1, 2, 6, 1, 2, 1, 3, 2, 1, 6, 2, 1, 1, 3, 1, 1, 1, 6, 1, 1, 2, 3,..
There Is There is a pattern there but it is very difficult to understand.
In this example, a practically endless curtain background cost us a total of 53kb. And of course, it would be relatively trivial to add a fourth layer—perhaps using 11 units—if we wanted to. However, I do not believe that is warranted here.
Also keep this in mind: This example uses one of the simplest possible The set of prime numbers—1, 3, and 7. If we use, let’s say, 11, 13, and 17, we can do more complex transformations for a given distance. It really comes down to the width of the screen versus the scale of the screen we choose.
Example 3: Legos of Lego
My last example is less about pure practical applications, and more about having some fun with primes. I’m not going to break down the theory again, as the basic concept is the same as in the first two examples, but you’re welcome to recreate it in DevTools.
2,200 years ago Emperor Qin Shi Huang built a terracotta army of 8,000 men To protect his grave. Each soldier, chariot and weapon is a one-time, hand-crafted creation.
Using basic CSS, prime numbers, and a handful of images, we’re going to build our mighty army. What it may lack in stature, it makes up for in the numbers’ hefty weight.
I give you… My mighty lego army!
Legion is created from just eight images that are joined and weaved together to produce thousands of permutations. it uses:
- 2 images for background tiles
- 2 pictures for legs
- 2 pictures for torsos
- 2 pictures for the head
While messing around with this idea, I’ve come up with some basic principles that seem to work. First, your stacking order works best when your stacking order is built up like an inverted pyramid.
You can make the bottom layer quite small and repetitive because most of it gets overwritten by the layers above. In fact, it is likely that only 20-40% will remain unexplained.
On the other hand, your top layer should always have the largest image dimensions, but also the thinnest imagery, because these image elements will never be blocked by other layers. this is also probably the best No To include highly distinctive, eye-catching details on your top layer. Keep it rare and more common.
Either way, some trial and error is almost always necessary.
I’ve kept the markup simple by applying multiple backgrounds to the HTML element. It is supported by all current major browsers (Firefox, Chrome, Edge, Opera and Safari), but apparently not all older versions.
However, if backward compatibility is a prerequisite, then
body and probably the same container
div Elements can be a viable option. While the container element may be non-semantic, it is potentially giving you huge site-wide value for a small concession. That’s your call.
These three examples are the first thoughts that came to my mind, but I’m sure there are some smarter take on the idea. Perhaps:
- an endless city view
- non-repeating woodgrain
- star field
- thick forest
- cloud scene
If you take it well, I’d love to see it.