JSFiddle - React, Tailwind, and code Playground

HTML

<div id='svgContainer'></div>


<svg xmlns='http://www.w3.org/2000/svg' version='1.2'>
  <defs>
    <linearGradient id='lgs'>
      <stop
         style='stop-color:#ffffff;stop-opacity:1.0000000'
         offset='0.00000000'
         id='stop6455' />
      <stop style='stop-color:#000000;stop-opacity:1.0000000' offset='1.0000000' />
    </linearGradient>
    <radialGradient
       cx='171.20810'
       cy='196.85463'
       r='200.00000'
       fx='171.20810'
       fy='196.85463'
       id='rg2'
       xlink:href='#lgs'
       gradientUnits='userSpaceOnUse'
       gradientTransform='matrix(1.040418,0.796229,-0.814518,1.064316,153.4218,-150.4353)' />
  </defs>
  <g transform='scale(0.2,0.2)'>
    <path
       d='M 450.00000 255.00000 A 200.00000 205.00000 0 1 1  50.000000,255.00000 A 200.00000 205.00000 0 1 1  450.00000 255.00000 z'
       style='opacity:1.0000000;fill:url(#rg2);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:8.0000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000' />
  </g>
</svg>

CSS

#svgContainer {
    width:600px;
    height:200px;
}

JavaScript

var xmlns = 'http://www.w3.org/2000/svg';
                var container = document.getElementById('svgContainer');
                var svg = document.createElementNS(xmlns, 'svg');
                svg.setAttribute('xmlns', xmlns);
                svg.setAttribute('version', '1.2');
                
                
                var defs = document.createElementNS(xmlns, 'defs');
                
                
                var lg = document.createElementNS(xmlns, 'linearGradient');
                lg.setAttribute('id', 'lg');
                defs.appendChild(lg);
                
                var stop1 = document.createElementNS(xmlns, 'stop');
                stop1.setAttribute('offset', '0');
                stop1.setAttribute('style', 'stop-color:#ffffff;stop-opacity:1');
                lg.appendChild(stop1);
                
                var stop2 = document.createElementNS(xmlns, 'stop');
                stop2.setAttribute('offset', '1');
                stop2.setAttribute('style', 'stop-color:#000000;stop-opacity:1');
                lg.appendChild(stop2);
                
                var rg = document.createElementNS(xmlns, 'radialGradient');
                rg.setAttribute('cx', '171.20810');
                rg.setAttribute('cy', '196.85463');
                rg.setAttribute('r', '200.00000');
                rg.setAttribute('fx', '171.20810');
                rg.setAttribute('fy', '196.85463');
                rg.setAttribute('id', 'rg');
                rg.setAttribute('xlink:href', '#lg');
                rg.setAttribute('gradientUnits', 'userSpaceOnUse');
                rg.setAttribute('gradientTransform', 'matrix(1.040418,0.796229,-0.814518,1.064316,153.4218,-150.4353)');
                defs.appendChild(rg);
                svg.appendChild(defs);                
                
                var g = document.createElementNS (xmlns, 'g');
                g.setAttribute('transform', 'scale(0.2,0.2)');
               ...