<div class="circular-motion">
  <div class="circular-motion-center">
    <div class="circular-motion-circle"></div>
  </div>
</div>

.circular-motion{
  background-color: #000000;
  aspect-ratio: 1/1;
  position:relative;
}
.circular-motion-center{
  position:absolute;
  left:50%;
  top:50%;
}
.circular-motion-circle:after{
  content:"";
  display:block;
  width:20px;
  height:20px;
  border-radius:50%;
  background-color:#f00;
  transform:translate(-50%,-50%);
}

window.addEventListener('load',function(){

  let deg =  0;
  let r = 100;

  let $circle = document.querySelector('.circular-motion-circle');

  function onresize(){
    let $bg = document.querySelector('.circular-motion');
    r = $bg.getBoundingClientRect().width/2 * 0.7;
  }

  function anim(){
    let x = Math.cos(deg * Math.PI/180) * r;
    let y = Math.sin(deg * Math.PI/180) * r;
    $circle.style.transform = `translate(${x}px,${y}px)`;
    deg+=3;
    requestAnimationFrame(anim);
  }

  window.addEventListener('resize',onresize);
  onresize();
  requestAnimationFrame(anim);

});

let x = Math.cos(deg * Math.PI/180) * r;
let y = Math.sin(deg * Math.PI/180) * r;
$circle.style.transform = `translate(${x}px,${y}px)`;