JSFiddle - React, Tailwind, and code Playground

HTML

<div onclick="addMore();">Add more</div>

<div class="svg">
    <svg id="mysvg" width="300" height="300">
        <circle cx="150" cy="150" r="145" class="first"/>
    </svg>
</div>

CSS

DIV.svg {
    border: solid 1px red;
}

CIRCLE {
    fill: green;
}

CIRCLE.first {
    fill: black;
}

JavaScript

setInterval(mySVGCheckFn, 500);

function  mySVGCheckFn() 
{
    var  svg = document.getElementById("mysvg");
    var  bbox = svg.getBBox();

    // Add 10 padding for some breathing space    
    svg.setAttribute("width", bbox.x + bbox.width + 10);
    svg.setAttribute("height", bbox.y + bbox.height + 10);
}


function  addMore(x)
{
    var  mysvg = document.getElementById("mysvg");
    var  c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    c.setAttribute("cx", Math.random() * 400);
    c.setAttribute("cy", Math.random() * 400);
    c.setAttribute("r", Math.random() *100);
    mysvg.appendChild(c);
    return false;
}