JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="500" height="500">
     <circle id="c1" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
<div id="genR" onclick="genRect();" >Generate</div>

CSS

#genR {
    position: absolute;
    bottom: 50px;
    right: 50px;
    width: 100px;
    font-size: 1rem;
    font-family: sans-serif;
    text-align: center;
    background: orange;
    border: 1px solid black;
    border-radius: 2px;
}

JavaScript

function genRect () {
    var rect = document.createElementNS ("http://www.w3.org/2000/svg", "rect");
    var svg = document.getElementsByTagName ("svg")[0];
    console.log (rect);
    console.log (svg);
    rect.setAttribute ("width", "50");
    rect.setAttribute ("height", "50");
    rect.setAttribute ("fill", "#e11a51");
    rect.setAttribute ("stroke", "blue");
    rect.setAttribute ("x", "75");
    rect.setAttribute ("y", "150");
    svg.appendChild (rect);
}