JSFiddle - React, Tailwind, and code Playground

by balefrost

HTML

<svg id="svg" width="900" height="450"></svg>
<button id="toggle">Toggle</button>

JavaScript

var numPoints = 10000;

var svg = document.getElementById("svg");

var points = [];
for  (var i = 0; i < numPoints; ++i) {
    points.push([Math.random() * 900, Math.random() * 450]);
}

var pointElements = [];
for (var i = 0; i < numPoints; ++i) {
    var c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    c.setAttribute("r", 3);
    c.setAttribute("fill", "#000");
    svg.appendChild(c);
    pointElements.push(c);
}

var running = true;
var toggle = document.getElementById("toggle");
toggle.addEventListener("click", function() {
    running = !running;
    if (running) {
        requestAnimationFrame(draw);
    }
});

function draw(millis) {
    if (running) {
        requestAnimationFrame(draw);
    }
    var offsetX = Math.cos(millis / 2000) * 20;
    var offsetY = Math.sin(millis / 2000) * 20;
    for (var i = 0; i < numPoints; ++i) {
        pointElements[i].setAttribute("cx", points[i][0] + offsetX);
        pointElements[i].setAttribute("cy", points[i][1] + offsetY);
    }
}
requestAnimationFrame(draw);