v155 · css random()

Scatter field

Position, size and rotate a field of elements from a single rule. Every dot below is placed by CSS — or, on a browser without random(), by the JavaScript this feature exists to delete, so you can see both.

Scatter

The rule doing the work

the JavaScript this replaces

// Every dot needs a script pass, at load and on every insertion.
for (const dot of container.querySelectorAll(".dot")) {
  const size = 8 + Math.random() * 28;
  dot.style.top = `${Math.random() * 100}%`;
  dot.style.left = `${Math.random() * 100}%`;
  dot.style.width = `${size}px`;
  dot.style.height = `${size}px`;
}

The CSS version is one rule, applies to elements that did not exist when the page loaded, and survives a static render with no JavaScript at all.

see also