JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="test" width="440" height="100"></canvas>
<span id="fps"></span>

JavaScript

var canvas = document.getElementById('test');
var fps = document.getElementById('fps');

var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext('2d');
var data = ctx.createImageData(width, height);

var time = 0;

var lastStamp = +new Date();

var animate = function() {
  var pos = 0;
  var xoff = (Math.sin(time / 100) / 2 + 0.5) * width;
  var yoff = (Math.cos(time / 100) / 2 + 0.5) * height;
    
  console.log(time, xoff, yoff);
    
  for (y = 0; y < height; y++) {
    for (x = 0; x < width; x++) {
      x2 = x - xoff;
      y2 = y - yoff;
      d = Math.sqrt(x2*x2 + y2*y2);
      var t = Math.sin(d/6.0);

      r = t * 200;
      g = 125 + t * 80;
      b = 235 + t * 20;

      data.data[pos++] = Math.max(0, Math.min(255, r));
      data.data[pos++] = Math.max(0, Math.min(255, g));
      data.data[pos++] = Math.max(0, Math.min(255, b));
      data.data[pos++] = 255;
    }
  }

  ctx.putImageData(data, 0, 0);
    
  var currentStamp = +new Date();
    
  fps.innerHTML = 'FPS: ' + 1000 / (currentStamp - lastStamp);
    
  lastStamp = currentStamp;

  time++;
  requestAnimationFrame(animate);
}

animate();