JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="300" height="290">
<g class="movestick">
    <rect fill="khaki" stroke="darkkhaki" width="10" height="70" x="0" y="0"/>
</g>

<g class="move">
    <circle stroke="darkkhaki" r="100" cx="0" cy="0" fill="gold"></circle>
  <g class="rotate">
    <circle r="70" cx="0" cy="0" fill="gold" stroke="tomato" stroke-width="20" stroke-dasharray="45" />

    <circle r="70" cx="0" cy="0" fill="none" stroke="darkorange" stroke-width="20" stroke-dasharray="45" stroke-dashoffset="45" />
    </g>
    <circle r="50" cx="0" cy="0" fill="gold" stroke="yellowgreen" stroke-width="20" />
</g>

</svg>

CSS

svg {
  border: 1px solid #dddddd;
}

@keyframes move {
0% {
  transform: translate(150px, 0px) rotate(0deg);
}

100% {
  transform: translate(150px, 125px) rotate(0deg);
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
.rotate {
  animation-name: rotate;
  animation-duration: 2s;
  animation-delay: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.move {
  animation-name: move;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes moveb {
0% {
  transform: translate(145px, 0px);
  }
100% {
  transform: translate(145px, 220px);
  }
}

.movestick {
  animation-name: moveb;
  animation-duration: 2s;
  animation-fill-mode: forwards; 
}