JSFiddle - React, Tailwind, and code Playground

by amcharts

HTML

<div id="svgdiv" style="width:600px; height:500px;"></div>
<input type="button" value="start" onclick="start()">
<input type="button" value="stop" onclick="stop()">

JavaScript

var svg;
            var interval;

            window.onload = function () {
                createSVG();
            }

            function start() {
                interval = setInterval(createSVG, 10);
            }

            function createSVG() {

                var div = document.getElementById("svgdiv");
                div.innerHTML = "";

                svg = createSvgElement("svg");
                svg.style.position = "absolute";
                svg.style.width = "600px";
                svg.style.height = "500px";
                svg.setAttribute("version", "1.1");
                div.appendChild(svg);

                createElements();
            }


            function createElements() {

                for (var i = 0; i < 50; i++) {

                    var element = createSvgElement("circle");
                    element.setAttribute("r", Math.random() * 10);
                    var transform = "translate(" + Math.round(Math.random() * 600) + "," + Math.round(Math.random() * 500) + ")";
                    element.setAttribute("transform", transform);


                    var group = createSvgElement("g");
                    group.appendChild(element);

                    svg.appendChild(group);

                    group.appendChild(element);

                    var bbox = element.getBBox(); // comment this line and the memory will be cleared properly
                }
            }

            function createSvgElement(name) {
                return document.createElementNS("http://www.w3.org/2000/svg", name);
            }

            function stop() {
                clearInterval(interval)
            }