JSFiddle - React, Tailwind, and code Playground

by raxxla

HTML

<canvas id="canvas" width="800" height="600" style='border:1px solid;'></canvas>

JavaScript

var context = document.getElementById('canvas').getContext('2d');
var P=1, R=0.07, dl=1, max=300, l=0;
context.fillStyle = "black";
context.fillRect(0,0,canvas.width,canvas.height);

var intervalID = setInterval(draw, 100);

function draw() {
  l+=dl;
  var n=P*dl*l*l;
  var rc=gc=255;
  for (var i=1; i<n; i++) {
    var x=Math.random()*canvas.width;
    var y=Math.random()*canvas.height;
    var r=R*canvas.width/(l-dl*Math.random());
    context.beginPath();
    context.fillStyle = "rgb(" + rc + "," + gc + ",0)";
    context.arc(x, y, r, 0, 6.284);
    context.fill();
  }
  if (l>max) clearInterval(intervalID);
}