We are trying to make background patterns appear as natural as possible, we are also trying to have as few and as hard to notice “seams” between the repeating tiles as possible, which directly conflicts with our desire to keep the filesize low. Replicating randomness can be challenging, because CSS does not of- fer any inherent randomness capabilities.
Our original attempt at pseudorandom stripes, with all the colors generated by the same linear gradient.
We can easily achieve this by hardcoding the stripe width in the color stops and using background-size to control their spacing. It logically follows that to increase perceived randomness, we need to maximize the size of the repeating tile. An easy way to achieve this is to choose prime numbers*, because they’re always rela- tively prime with any other number.
(*): Prime numbers are integers that can’t be divided by any other number besides 1 and them selves. For example, the first 10 prime numbers are 2, 3, 5, 7, 11, 13, 17, 19, 23, 29. On the other hand, relatively prime is a relation between numbers, not an attribute of a single number. Relatively prime numbers have no common divisors, but may have many divisors in general (e.g., 10 and 27 are relatively prime, but neither is prime). Of course, a prime number is relatively prime with any other number.
Making an animation that doesn’t seem to ever repeat exactly in the same way, by applying multiple animations with prime durations.