`seed`

The starting value for random functions such as @r and @p. The same seed gives the same picks, so the doodle looks the same every time.

Syntax

seed: Any string. Two doodles with the same code and the same seed render identically.

Without a seed, a new one is generated for every render and every update(). The seed in use can always be read back through the seed property.

<css-doodle seed="2025">
  @grid: 6 / 60vmin _1px;
  background: @p(#000, #fff);
  scale: @r(.45, 1);
  border-radius: @p(0, 50%);
</css-doodle>

Read the seed of a doodle you like, then set it to reproduce the same image later:

let doodle = document.querySelector('css-doodle');
console.log(doodle.seed); // e.g. 1752471160475

// later
doodle.seed = 1752471160475;

The seed can also be written inside the code with the @seed property. When both are present the property wins.

<css-doodle seed="2025">
  @grid: 6 / 60vmin _1px;
  @seed: 1234567;
  background: @p(#000, #e6437d, #ebbf4d);
  scale: @r(.5, 1);
</css-doodle>