Skip to main content
CSS is fun and cool and I like it.
Article

Are There Random Numbers in CSS?

CSS allows you to create dynamic layouts and interfaces on the web, but as a language, it is static: once a value is set, it cannot be changed. The idea of randomness is off the table. Generating random numbers at runtime is the territory of JavaScript, not so much CSS. Or is it? If we factor in a little user interaction, we actually can generate some degree of randomness in CSS. Let’s take a look!… Read article

Article

Randomizing SVG Shapes

Say we wanted to continuously randomize the radius of a circle. We could kinda fake a random look with just CSS, but let’s go for full-on pseudo-random numbers created in JavaScript.

We’re talking SVG here, so here’s our base circle:

<svg viewBox="0 0 100 100">
  <circle id="circle" cx="50" cy="50" r="50"></circle>
</svg>

A little JavaScript function to generate random integers for us within a range:

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

To … Read article