An SVG clock icon where the hands move at different speeds

clock.svg

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path class="hand-big" d="M12 6V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path class="hand-small" d="M12 12H16.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

<style>
.hand-big {
  animation : move-hands 8s linear infinite;
}

.hand-small {
 animation : move-hands 2s linear infinite;
}

@keyframes move-hands {
  0% {
      transform: rotate(0deg);
      transform-origin: 50% 50%;
  }
  25% {
      transform: rotate(90deg);
      transform-origin: 50% 50%;
  }
  50% {
      transform: rotate(180deg);
      transform-origin: 50% 50%;
  }
  75% {
      transform: rotate(270deg);
      transform-origin: 50% 50%;
  }
  100% {
      transform: rotate(360deg);
      transform-origin: 50% 50%;
  }
}
</style>
</svg>