DEV Community

loading...
Cover image for Random numbers in CSS? Really? πŸŽ²πŸ€”

Random numbers in CSS? Really? πŸŽ²πŸ€”

thormeier profile image Pascal Thormeier ・3 min read

I just read this awesome post by inhuofficial about a random password generator written in pure CSS. It follows a similar approach as some other pure CSS random number generators out there. Most of them use differently timed animations to "shuffle" the state. The user interacts with it by pausing the animations and voila: A seemingly random number. A really clever approach.

And it got me thinking.

What even is "random"?

"Random", as I would define it, describes an action with a non-determinable result. That doesn't necessarily mean that the result is not deterministic (think, it could be determined in theory, but nobody can). Let's have a look at a simple way to generate a random result: A coin flip.

If you flip a coin a gazillion times, the result will be roughly 50% heads and 50% tails. That seems random. But is it really? Seemingly so, we can't possibly measure all the variables that influence if it's heads or tails, right? But what if we could? If we knew all the preconditions, like, all of them? Position and velocity of every single air molecule in the room, the body temperature of the person flipping the coin, size and weight of the coin, fluctuations in Earth's gravity, whatever you can think of. Would we be able to predict the outcome? I think: Most likely, yes.

And there's the problem.

Classical computers and electricity

At their very foundation, computers work with electricity. Electricity either flows (1) or it doesn't (0). When you wire a few billion transistors together the right way, they can do mathematics and other amazing things, but they still represent this logic of 0 and 1. If you apply the same current to the same parts, the result will be the same.

So, how can this construct generate random numbers? Unless there's a special physical part wired in as well, it can't. That's why the "random" numbers generated by computers, are either generated with a fish tank or they're so-called "pseudo-random" numbers: They only seem to be random, but are actually deterministic.

"Pseudo-random" numbers

So, essentially, the people coming up with pure CSS random number generators ran into the same problems a lot of people did before them when implementing random number generators like /dev/random or Math.random().

And that's no surprise: Generating pseudo-random numbers is its own field of research, actually. According to Wikipedia, there's four different criteria that measure the quality of a pseudo-random number generator:

  • Probability of two randomly generated sequences to be different.
  • Being indistinguishable from actual random numbers. This is tested with some predefined statistical tests.
  • Being impossible for an attacker to calculate or otherwise guess a random number in advance from any previously generated number.
  • Being impossible for an attacker to calculate or otherwise guess a random number in advance from any internal state of the generator.

Some pseudo-random number generators rely on the unix timestamp, some may rely on CPU temperature, a hash of the current state of the memory and some constant. They function much like the coin flip: They add dozens of variables to make the result look more and more random, even though it never truly becomes random.

In summary

When I looked for CSS-only random number generators, I often read the sentence "they're not real random numbers" or I even saw references to the XKCD comic about random number generators, but I think those people are a bit unfair to their own achievements. Those generators are as good as it gets with the tools CSS offers. We're dealing with machines that need to be deterministic. Unless there's a possibility to measure quantum weirdness, take photos of fish tanks or measure the light of distant stars flickering in the atmosphere with pure CSS, the numbers that can be generated with CSS will remain pseudo-random.

And that's OK.


I hope you enjoyed reading this article as much as I enjoyed writing it! If so, leave a ❀️ or a πŸ¦„! I write tech articles in my free time and like to drink coffee every once in a while.

If you want to support my efforts, buy me a coffee β˜• or follow me on Twitter 🐦! You can also support me directly via Paypal!

Buy me a coffee button

Discussion (16)

pic
Editor guide
Collapse
inhuofficial profile image
InHuOfficial • Edited

Thanks for the shout out....even if you did β€œsteal” my next article idea (and annoyingly write it better than I would have!) 🀣🀣🀣

Collapse
thormeier profile image
Pascal Thormeier Author

Aw, no way, really? πŸ˜… Your article got me thinking about the topic, I found it really inspiring!

Collapse
inhuofficial profile image
InHuOfficial

Only kidding, loved the article. But i was having the same thoughts!

Followed! ❀️

Thread Thread
thormeier profile image
Pascal Thormeier Author

Thank you so much! Great minds think alike, they say :) Followed back!

Thread Thread
inhuofficial profile image
InHuOfficial

The problem with that sentence is the second part β€œgreat minds think alike...but fools seldom differ”....I will give us both the benefit of the doubt on this one though 😜🀣🀣🀣

Thread Thread
thormeier profile image
Pascal Thormeier Author

Yep, I tend to ignore the second part usuallyπŸ˜†

Collapse
togakangaroo profile image
George Mauer

Electricity either flows (1) or it doesn't (0)

If we're breaking things down then this isn't true either, right? Some electrons are always being passed around and electricity is already following. It is neither constant not discrete and certainly not digital. In fact nothing about zeros and ones has anything to do with electricity at all but with information theory which posits exalt that reliable, digital systems can be created from unreliable analog ones. Interestingly enough, if you could go the other direction, you probably could get true random numbers but at that point Claude Shannon decided he had done enough and wanted to do juggling for a while.

Anyways, that's been your pedantic aside 😁

Collapse
thormeier profile image
Pascal Thormeier Author

You're technically right, yes. Usually it's either a lot of electrons (as in 6.24 * 10^18) flowing, or next to none. That's usually enough of a difference to be more or less reliable in a sense. Of course, quantum weirdness plays in as well. A CSS-only-RNG needs a user to give an input to settle down on a single number, much like a particle in a superposition needs an observer. πŸ˜„

Collapse
gadreash profile image
gadreash

This was one of those articles which is so well written that despite my knee-jerk reaction being "too technical, abort", I kept reading till the end!!
You definitely have a flair for writing complex stuff in an easy to digest manner, keep it up!

Collapse
thormeier profile image
Pascal Thormeier Author

Thank you so much, that means a lot to me! I'll try my best to further create such content :D

Collapse
afif profile image
Temani Afif

We will have it for real one day: github.com/w3c/csswg-drafts/issues...

Collapse
thormeier profile image
Pascal Thormeier Author

Woho, looking forward to that! :D I wonder what kind of designs people come up with once this hits the browsers.

Collapse
filatovv profile image
Yuri Filatov

Thanks for the great article!

Collapse
thormeier profile image
Pascal Thormeier Author

Glad you liked it! :)

Collapse
arvindpdmn profile image
Arvind Padmanabhan

Also check out the use of prime numbers in CSS: devopedia.org/cicada-principle

Collapse
thormeier profile image
Pascal Thormeier Author

That's so awesome! Thank you for sharing this, I need to dig deeper into that πŸ˜€