<div class="circle">
  <div class="arrow">
    <div class="arrow__inner"></div>
  </div>
</div>
  

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center
    ;align-items: center;
  flex-wrap: wrap;
  
}

.circle {
    width: 70vh;
    height: 70vh;
    background: black;
    border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.arrow {
  width: 50%; 
  height: 10px; 
  left: 50%; 
  top: calc(50% - 5px); 
  position: absolute; 
  transform-origin: left center;
  pointer-events: none;
    background: yellow; 
}

document.querySelector('.circle').onmousemove = function(e) {
  let container = getCenter(this);
  let x = e.offsetX==undefined?e.layerX:e.offsetX;
  let y = e.offsetY==undefined?e.layerY:e.offsetY;
   console.log(x);
  console.log(y);
  let degrees = radians_to_degrees(
      Math.atan2(parseInt(y) -  container.y,  parseInt(x) - container.x)
     )
  document.querySelector(".arrow").style.transform = `rotate(${degrees}deg)`;
}


function getCenter(block) {
  const rect = block.getBoundingClientRect();
  return { x: rect.height / 2, y: rect.width / 2 };
}
  
function radians_to_degrees(radians)
{
 
  let pi = Math.PI;
  return radians * (180/pi);
}