How do I get the green circle over the red circle?

[asasass]

Is there certain math that is done to figure that out?

I keep changing the numbers here and I can’t figure it out.
<circle cx="32" cy="32" r="32"

https://jsfiddle.net/x2kjLser/2/

   <svg  width="100%" height="100%" viewBox="2 2 20 20">
        <g id="play">
          <title>Play</title>

          <circle cx="32" cy="32" r="32" fill="green" pointer-events="visiblePainted" />
          <path d="M0 0h24v24H0V0z" fill="none"></path>
          <path d="M10 16.5l6-4.5-6-4.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
        </g>
      </svg>

[WebSteve]

I see the green circles over the red in Firefox.

[DaveMaxwell]

<circle cx="12" cy="12" r="8" fill="green" pointer-events="visiblePainted" />

Looks right to me on quick glance- if I understand what you’re asking…though why not just make it green in the first place?

[asasass]

Almost:

It should be covering the red:

https://jsfiddle.net/n8xqv5u9/

<circle cx="12" cy="12" r="8" fill="green" pointer-events="visiblePainted" />

Is there a certain math equation that is done to figure out what the numbers should be?

I did it here:
https://jsfiddle.net/xndf4hrj/

<circle cx="12" cy="12" r="10" fill="green"