SVG Circle Pattern Generator

The other day – trying to empty my head and relax a bit – I stared at the colorful rug next to my chair:

And suddenly, instead of emptying my head, I started to wonder about how I could re-create this in svg — that is: repeating circles with random colors!

---

When working with random patterns, the first thing you need is a random function:

function R(max, min = 0) {
  return Math.floor(Math.random() * (max - min) + min);
};

If you call it like R(360), it will return a random number between 0 and 360. If you add a second parameter, like R(360, 200), it will limit the random number to a number between 200 and 360.

The circles are created within a dual loop – one for the y-axis, and one for the x-axis (excerpt) :

<circle
  cx="${cx}" cy="${cy}" r="${r}" 
  fill="hsl(${R(A.elements.he.valueAsNumber,
 A.elements.hs.valueAsNumber)},
 ${R(A.elements.se.valueAsNumber,
 A.elements.ss.valueAsNumber)}%,
 ${R(A.elements.le.valueAsNumber,
 A.elements.ls.valueAsNumber)}%)"
/>

Most of the code deals with the random colors.

hsl() is perfect for this, since it's three ranges of numbers, that can be randomized:

• hue (0-360)
• saturation (0-100)
• lightness (0-100)

A is the main form for editing the variables:

– and as mentioned above, you can limit the randomness, in this case the hue (min and max):

If you set the radius to a larger value than the size, you end up with something similar to my rug:

Here's a Codepen with the final result. Open it in fullscreen, click on the rotating cog-wheel to open the editor, and have fun!

If you want, you can save the pattern you create as either png, jpg or webp — just select a type, and click on Save to Image.

Thanks for reading!