Как сделать что бы один объект двигался вокруг другого объекта по кругу?

<div class="box">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
      <circle fill="none" stroke="#000" stroke-width="3" cx="150" cy="150" r="100" />
      <circle cx="150" cy="150" r="10" stroke="red"></circle>
      <g class="orbit">
        <circle cx="80" cy="80" r="20"></circle>
      </g>
    </svg>
  </div>

.box {
  height: 300px;
  width: 300px;
  background: #eee;
}

svg .orbit {
  animation: spin-right 10s 30 linear;
  transform-origin: 150px 150px 0;
}

@keyframes spin-right {
  100% {
    transform: rotate(360deg);
  }
}

let speed = 100,
    step = Math.PI / 90,
    f = 0
function move() {
  f += step
  obj.style.left = centerX + orbitRadius * Math.sin(f) + 'px'
  obj.style.top = centerY + orbitRadius * Math.cos(f) + 'px'
}
setInterval(move, speed)