JSFiddle - React, Tailwind, and code Playground

CSS

g circle {
    fill: rgba(255, 0, 0, 20);
    stroke: rgba(128,0,0,54);
    stroke-width: 4px;
    opacity: 0.4;
}

JavaScript

var numCircles = 100000,
    fragment = document.createDocumentFragment(),
    startTime = new Date();

var svgElem = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
var gElem = document.createElementNS("http://www.w3.org/2000/svg", 'g');

svgElem.setAttribute('height', '2727');

fragment.appendChild(svgElem);
svgElem.appendChild(gElem);

while(numCircles--){
    var newCircle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
    
    newCircle.setAttribute('cx', numCircles * 15 % 928);
    newCircle.setAttribute('cy', numCircles * 22.34 % 2727);
    newCircle.setAttribute('r', 20);
    
    gElem.appendChild(newCircle);
}

document.body.appendChild(fragment);

alert(new Date() - startTime);