JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-32768 -32768 65535 65535" style="width: 250px; height: 250px; border: 3px solid black;">
</svg>
<div id="results1"></div>
<svg id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-32768 -32768 65535 65535" style="width: 250px; height: 250px; border: 3px solid black;">
</svg>

<div id="results2"></div>

JavaScript

mycontainerdiv = "svg";

function GenerateCircle(mainsvg, myid, x, y, radius) {
 var svgns = "http://www.w3.org/2000/svg"
 var svg = document.getElementById(mycontainerdiv)
 var circle = document.createElementNS(svgns, "circle")
 mainsvg.appendChild (circle)
 
 circle.setAttribute('id', myid)
 
 circle.setAttribute('cx', x)
 circle.setAttribute('cy', y)
 circle.setAttribute('r', radius)
 
 circle.setAttribute('fill', 'none')
 circle.setAttribute('stroke', '#FF0000')
 circle.setAttribute('stroke-width', 1000)
 circle.setAttribute('transform', 'scale(3)')
 
 var thismatrix = circle.getCTM()
 
 var transform = mainsvg.createSVGTransform()
 
 transform.setMatrix(circle.getCTM())
 
 var circle = document.createElementNS(svgns, "circle")
 circle.transform.baseVal.initialize(transform)
 mainsvg.appendChild (circle)
 alert (circle.outerHTML)
 
 return "Matrix: " + thismatrix.a + "," + thismatrix.b + "," + thismatrix.c + "," + thismatrix.d + "," + thismatrix.e + "," + thismatrix.f
 }

var mainsvg = document.getElementById("svg1")
var a = GenerateCircle(mainsvg,"testcircle", 0, 0, 5000)