JSFiddle - React, Tailwind, and code Playground

by Akram Merouani

HTML

<canvas></canvas>
<div id="overlay">

</div>

CSS

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

canvas{
  width: 100vw;
  height: 100vh;
  display: block;
}

#overlay {
  top: 170px;
  left: 201px;
  border-radius: 50%;
  background: none;
  animation: shadow linear infinite;
  margin: auto;
  transform: translate(0, 50%);
  color: green;
  position: absolute;
  z-index: 99;
  width: 100px;
  height: 100px;
 
}

@keyframes shadow {
  0% 100% {
    box-shadow: 0 0 0
  }
  50% {
    box-shadow: 0 0 50px 20px
  }
}

JavaScript

function main() {
  var canvas = document.getElementsByTagName("CANVAS")[0],
      ctx = canvas.getContext("2d");
  
  canvas.width = window.innerWidth;
  canvas.height = document.documentElement.scrollHeight;
  var cW = canvas.width,
      cH = canvas.height;
  
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, cW, cH);
  ctx.fill();
  
  ctx.beginPath();
  ctx.fillStyle = "#FFF";
  ctx.shadowBlur = 5;
  ctx.shadowColor = "#FFF";
  ctx.arc(cW/2, cH/2, 50, 0, 2 * Math.PI, false);
  ctx.fill();
  ctx.closePath();
  
  // position the overlay over the circle
  overlay.style.top = (cH/2 - 100) + 'px'
  overlay.style.left = (cW/2 - 50) + 'px'
}

window.addEventListener("load", main);

main()

const animationDuration = 2;

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

overlay.style.animationDuration = animationDuration + 's';

setInterval(function() {
  overlay.style.color = getRandomColor()
}, animationDuration * 1000)