JSFiddle - React, Tailwind, and code Playground

by seatsio

HTML

<svg height="500" width="500" xmlns="http://www.w3.org/2000/svg">
</svg>
<div>
    <button id="renderbtn">Render</button>
</div>    
<span id="status">Click Render to start</span>

JavaScript

var numberOfTexts = 10000; // adjust this to produce more/less points
var status = document.getElementById('status');

function render()
{
    var start = new Date();

		for (var i=0; i < numberOfTexts; i++)
    {
      let text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      text.setAttribute('x', Math.floor((Math.random()*500)).toString());
      text.setAttribute('y', Math.floor((Math.random()*500)).toString());
      text.setAttribute('font-size', 16);
      text.textContent = 'txt'; 
      document.querySelector('svg').appendChild(text)
    }
    var end = new Date();
    status.innerHTML = 'Render: ' + (end-start);     
}

var rbtn = document.getElementById('renderbtn');
rbtn.addEventListener("click", render);