JSFiddle - React, Tailwind, and code Playground

HTML

<img id="imageid"></img>

JavaScript

var context = document.createElement('canvas').getContext('2d');
var start = new Date();
var lines = 16,
  cW = 40,
  cH = 40;

setInterval(function() {
  var rotation = parseInt(((new Date() - start) / 1000) * lines) / lines;
  context.save();
  context.clearRect(0, 0, cW, cH);
  context.translate(cW / 2, cH / 2);
  context.rotate(Math.PI * 2 * rotation);
  for (var i = 0; i < lines; i++) {
    context.beginPath();
    context.rotate(Math.PI * 2 / lines);
    context.moveTo(cW / 10, 0);
    context.lineTo(cW / 4, 0);
    context.lineWidth = cW / 30;
    context.strokeStyle = 'rgba(0, 0, 0,' + i / lines + ')';
    context.stroke();
  }

  var imageData = context.canvas.toDataURL()
  document.getElementById("imageid").setAttribute('src', imageData);
  context.restore();
}, 1000 / 30);