Align multiple Paths inside SVG Group to center

For a project i'm working on, i have to dynamically generate multiple circles, composed of paths.
These circles have random sizes between two set numbers (eg. 750 <-> 850).
I'm trying to vertically and horizontally center these circles to the middle of the SVG Group, but i'm not quite sure how i would achieve this.

Here is the code snippet responsible for generating the paths:

    const svgViewportWidth = 900;
    const svgViewportHeight = 1000;
    const randomSize = generateRandomNumberInRange(750, 850);

    return (
       <path key={`path-${aIndex}`} 
          d={`M ${(svgViewportWidth - randomSize) / 2}, ${svgViewportHeight - (randomSize - 320)}
                a 1,1 0 1,1 ${randomSize},0
                a 1,1 0 1,1 -${randomSize},0z`} id={`path-${aIndex}`}></path>
           )

"Complete output" of above snippet could look like this:
https://jsfiddle.net/c6phn8ue/

As can be seen in the fiddle, the circles cross each other on the bottom left corner. Ultimately what i'm trying to achieve is to have each circle aligned in the center, meaning that the circles would never cross each other.

I am assuming i'll somehow need to get the delta between the SVG and the circle and then align the circle using that, but i'm somewhat at a loss as to how to do that.

It's easier to understand when you assign more self-explanatory variable names.

The random number will become the diameter d

  let d = generateRandomNumberInRange(750, 850);  

and consequently the radius let r=d/2

Th first M x coordinate will always be at cx

let [cx, cy] = [svgViewportWidth/2, svgViewportHeight/2];  

Now we have all necessary coordinates for the new <path>element:

let newPath = `<path  d="
M ${ cx } ${ cy-r }
a 1 1 0 1 1  0 ${d}
a 1 1 0 1 1  0 -${d} z "/>`;

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

const svgViewportWidth = 900;
const svgViewportHeight = 1000;

for (let i = 0; i < 5; i++) {
  let [cx, cy] = [svgViewportWidth/2, svgViewportHeight/2];
  let d = generateRandomNumberInRange(750, 850);
  let r = d/2;
  let newPath = `
 <path  d="
M ${ cx } ${ cy-r }
a 1 1 0 1 1  0 ${d}
a 1 1 0 1 1  0 -${d}
"/>`;
  
  svgGroup.insertAdjacentHTML('beforeend', newPath); 

}

function generateRandomNumberInRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

<!-- language: lang-html -->

<svg viewBox="0 0 900 1000" fill="none" stroke="black" class="svg">
  <g class="svgGroup" id="svgGroup">
  </g>
</svg>

<!-- end snippet -->