Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circles</title>
  <style>
    canvas {
      background: black;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="800" height="800"></canvas>

  <script>
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext("2d");
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'white';
    canvas.addEventListener('mousemove', (e) => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      let mouseX = e.offsetX;
      let mouseY = e.offsetY;

      let distanceToCenterX = Math.abs(mouseX - canvas.width / 2);
      let distanceToCenterY = Math.abs(mouseY - canvas.height / 2);

      let growingValue = (distanceToCenterX + distanceToCenterY) / 4;

      for(let i = 0; i < 5; i++){
        let x = 0;
        if(e.offsetX > canvas.width/2){
          x = i*40 ;
        } else if( e.offsetX < canvas.width/2){
          x = -i*40;
        } else {
          x = 0;
        }
        let y = 0;
        if(e.offsetY > canvas.height/2){
          y = i*40;
        } else if(e.offsetY < canvas.height/2){
          y = -i*40;
        } else {
          y = 0
        }
        console.log(20 + i*growingValue);
        ctx.beginPath();
        ctx.arc(canvas.width/2 + x, canvas.height/2 + y, 20 + i*growingValue, 0, Math.PI*2);
        ctx.closePath();
        ctx.stroke();
      }
    });
  </script>
</body>
</html>