RomanKudlatov

<span class=arc></span>

<style>
.arc{
  display: block;
  position: absolute;
  width: 200px;
  height: 30px;
  border: 2px solid black;
  border-top: none;
  border-radius: 0 0 50% 50%/ 0 0 100% 100%;
}
.arc:after{
  content: "360°";
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}
</style>

var bg = document.querySelector("#bg");

window.onmousemove = e => {
  x = e.offsetX;
  y = e.offsetY;

  bg.style.left= x/30+"px"
  bg.style.top= y/30+"px"
}