Как заставить svg взаимодействовать с onMouseMove?

let eye = document.querySelector('.circle');
let container = document.querySelector('.eye');

let cursor = {x: 0, y: 0}; 
let position = {x: 0, y: 0};



let width=500, height=500; 
let radius = 50; 
let speedMultiplier = 0.03; 
let lastTime; 

document.addEventListener("mousemove", onMouseMove, false);

function onMouseMove(event){
  
  const bounds = container.getBoundingClientRect();
  cursor.x = event.clientX - bounds.left;
  cursor.y = event.clientY - bounds.top;
}

function loop(timestamp, dt) {
 
  const deltaTime = (timestamp - (lastTime??timestamp))/(1000/60);
  lastTime = timestamp;
  const multiplier = (speedMultiplier*deltaTime);

 
  const vector = {
    x: cursor.x-position.x, 
    y: cursor.y-position.y
  }; 

 
  position.x = position.x + vector.x*multiplier;
  position.y = position.y + vector.y*multiplier;
  

  if(position.x<0) position.x = 0;
  if(position.x>width-radius*2) position.x = width-radius*2;

  if(position.y<0) position.y = 0;
  if(position.y>height-radius*2) position.y = height-radius*2;

  
  eye.style.left = Math.floor(position.x).toString()+'px';
  eye.style.top = Math.floor(position.y).toString()+'px';

  window.requestAnimationFrame(loop);
}

window.requestAnimationFrame(loop);

.conatiner {
  width: 800px;
}
.eye {
  width: 500px;
  height: 500px;
  background: #ff5b40;
  margin: 0 auto;
  position: relative;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: grey;
  position: absolute;
  left: 0; 
  top: 50%;
}





.lien {
  margin: auto;
  width: 20%;
}





#contour {
  fill:#fff;
 
}

<div class="container">
    <div class="lien anim">
  <svg version="1.1" id="oeil"
     viewBox="0 0 62 36">
    <style type="text/css">
      .st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
      .st1{fill:none;stroke:#000000;stroke-miterlimit:10;}
    </style>
    <path id="contour" class="st0 circle" d="M59,18c0,0-12.5,16-28,16S3,18,3,18S15.5,2,31,2S59,18,59,18z"/>
    <g id="pup" class="anim eye">
      <circle class="st1" cx="31" cy="18" r="11"/>
      <circle id="rondpup" cx="31" cy="18" r="7"/>
    </g>
  </svg>
</a>
  </div>
</div>