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<40000; i++) {
  point[i]={};
  point[i].x=400*Math.random()-200;
  point[i].y=400*Math.random()-200;
}

window.requestAnimationFrame(draw);

function draw() {
  az+=0.001;
  var cos = Math.cos(az);
  var sin = Math.sin(az);
  context.clearRect(0, 0, canvas.width, canvas.height);
  for (var i=0; i<point.length; i++) {
    var x=cos*point[i].x-sin*point[i].y+200;
    if (x<0) x+=400;
    else if (x>400) x-=400;
    var y=sin*point[i].x+cos*point[i].y+200;
    if (y<0) y+=400;
    else if (y>400) y-=400;
    context.fillRect(Math.floor(x), Math.floor(y), 1, 1); // медленно :(
  }
  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);
}