## DEV Community is a community of 618,717 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

# 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`.