如何通过路径设置圆的动画？颤动

<svg width="200" height="200">
  <!-- 在这里定义路径 -->
</svg>

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="none" stroke="black" stroke-width="2" />
</svg>

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="none" stroke="black" stroke-width="2" class="circle-animation" />
</svg>

<style>
  @keyframes circle {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(0); }
  }

  .circle-animation {
    animation: circle 2s infinite;
  }
</style>