JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400" height="400"></canvas>

CSS

canvas {border:1px solid;}

JavaScript

var context=document.getElementById('canvas').getContext('2d');

context.font="12px Arial";
var az=0, point=[];
var oldDate=Date.now();
var fps=0, vframes=0;

for (var i=0; i<100000; i++) {
  point[i]={};
  point[i].x=400*Math.random()-200;
  point[i].y=400*Math.random()-200;
}

window.requestAnimationFrame(draw);

function draw() {
	var imageData = context.createImageData(400, 400),
		data = imageData.data;
  az+=0.001;
  var cos = Math.cos(az);
  var sin = Math.sin(az);
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  point.forEach(function(p) {
    var x=cos*p.x-sin*p.y+200;
    if (x<0) x+=400;
    else if (x>400) x-=400;
    var y=sin*p.x+cos*p.y+200;
    if (y<0) y+=400;
    else if (y>400) y-=400;
    x = Math.floor(x);
    y = Math.floor(y);
    var index = (x + y * 400) * 4;
    data[index] = data[index + 1] = data[index + 2] = 0;
    data[index + 3] = 255;
  })
  context.putImageData(imageData, 0, 0);
  vframes++;
  var date=Date.now();
  var dt=date-oldDate;
  if (dt>1000) {
    fps=Math.round(vframes*1000/dt);
    oldDate=date;
    vframes=0;
  }
  context.clearRect(2, 2, 36, 14);
  context.fillText(fps + " fps", 4, 13);
  window.requestAnimationFrame(draw);
}