How would I convert a CSS circle pattern to SVG?

[asasass]

Edit fiddle - JSFiddle - Code Playground

body {
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
 
}

.box {
  margin:85px;
  width:10px;
  height:10px;
  border-radius:50%;
  box-shadow: 
0 0 0 5px #38761d,
0 0 0 10px black,
0 0 0 15px #1155cc,
0 0 0 20px black,
0 0 0 25px #38761d,
0 0 0 30px black,
0 0 0 35px #1155cc,
0 0 0 40px black,
0 0 0 45px #38761d,
0 0 0 50px black,
0 0 0 55px #1155cc,
0 0 0 60px black,
0 0 0 65px #38761d,
0 0 0 70px black,
0 0 0 75px #1155cc,
0 0 0 80px black,
0 0 0 85px #38761d;

}

<div class="box"></div>

How would I incorporate that into this code?

 <svg height="100" width="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Like I did with the square pattern.

[SamA74]

@asasass

Like I did with the square pattern.

Yes.

[asasass]

I’m confused though, this is more tricky, I don’t understand how to.

[asasass]

I got up this far, now I’m stuck.

 <svg height="225" width="225" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

[SamA74]

This is a start. I’m not doing all the donkey work for you:-

[asasass]

How come you’re not required to put height, width? Like how you do with the square shape?

ex:
<rect x="60" y="60" width="84" height="84" fill="#1155cc" />

[asasass]

Got it, perfect, thanks!!!

<svg height="185" width="185">
  <circle cx="100" cy="100" r="85" fill="#38761d" />
  <circle cx="100" cy="100" r="80" fill="black" />
  <circle cx="100" cy="100" r="75" fill="#1155cc" />
  <circle cx="100" cy="100" r="70" fill="black" />
  <circle cx="100" cy="100" r="65" fill="#38761d" />
  <circle cx="100" cy="100" r="60" fill="black" />
  <circle cx="100" cy="100" r="55" fill="#1155cc" />
  <circle cx="100" cy="100" r="50" fill="black" />
  <circle cx="100" cy="100" r="45" fill="#38761d" />
  <circle cx="100" cy="100" r="40" fill="black" />
  <circle cx="100" cy="100" r="35" fill="#1155cc" />
  <circle cx="100" cy="100" r="30" fill="black" />
  <circle cx="100" cy="100" r="25" fill="#38761d" />
  <circle cx="100" cy="100" r="20" fill="black" />
  <circle cx="100" cy="100" r="15" fill="#1155cc" />
  <circle cx="100" cy="100" r="10" fill="black" />
  <circle cx="100" cy="100" r="5" fill="#38761d" />
</svg>

[SamA74]

@asasass

How come you’re not required to put height, width? Like how you do with the square shape?

It is a circle, so its size is defined by a single dimension, r = radius.

Radius

[SamA74]

@asasass

<svg height=“185” width=“185”>
<circle cx=“100” cy=“100” r=“85” fill=“#38761d” />

You may find this off-centre. To have it centred the x & y positions should be half that of the width/height of the svg.
Though you have chosen an odd number, maybe easier to just use 50% instead.

[asasass]

You mean like this then:

<svg height="185" width="185">
  <circle cx="50%" cy="50%" r="85" fill="#38761d" />
  <circle cx="50%" cy="50%" r="80" fill="black" />
  <circle cx="50%" cy="50%" r="75" fill="#1155cc" />
  <circle cx="50%" cy="50%" r="70" fill="black" />
  <circle cx="50%" cy="50%" r="65" fill="#38761d" />
  <circle cx="50%" cy="50%" r="60" fill="black" />
  <circle cx="50%" cy="50%" r="55" fill="#1155cc" />
  <circle cx="50%" cy="50%" r="50" fill="black" />
  <circle cx="50%" cy="50%" r="45" fill="#38761d" />
  <circle cx="50%" cy="50%" r="40" fill="black" />
  <circle cx="50%" cy="50%" r="35" fill="#1155cc" />
  <circle cx="50%" cy="50%" r="30" fill="black" />
  <circle cx="50%" cy="50%" r="25" fill="#38761d" />
  <circle cx="50%" cy="50%" r="20" fill="black" />
  <circle cx="50%" cy="50%" r="15" fill="#1155cc" />
  <circle cx="50%" cy="50%" r="10" fill="black" />
  <circle cx="50%" cy="50%" r="5" fill="#38761d" />
</svg>