将下面代码嵌入HTML中，直接运行即可。动画时长、小球半径，以及起始位置可自行更改。
<svg height="150" width="200" style="position:absolute;margin-top: 200px;">
<circle cx="29" cy="60" r="2" stroke="rgb(41,238,242)" stroke-width="1" fill="rgb(41,238,242)"></circle>
<line x1="30" y1="60" x2="80" y2="60" style="stroke:rgb(41,238,242);stroke-1"></line>
<line x1="80" y1="60" x2="120" y2="3" style="stroke:rgb(41, 238, 242);stroke-1"></line>
<circle cx="119" cy="3" r="2" stroke="rgb(41,238,242)" stroke-width="1" fill="rgb(41,238,242)"></circle>
<circle cx="0" cy="0" r="2" stroke="rgb(0,255,157)" stroke-width="1" fill="rgb(0,255,157)">
<animateMotion path="M 30 60 L 80 60 L 120 3" begin="0s" dur="3s" repeatCount="indefinite">
</animateMotion>
</circle>
</svg>
<circle cx="29" cy="60" r="2" stroke="rgb(41,238,242)" stroke-width="1" fill="rgb(41,238,242)"></circle>
<line x1="30" y1="60" x2="80" y2="60" style="stroke:rgb(41,238,242);stroke-1"></line>
<line x1="80" y1="60" x2="120" y2="3" style="stroke:rgb(41, 238, 242);stroke-1"></line>
<circle cx="119" cy="3" r="2" stroke="rgb(41,238,242)" stroke-width="1" fill="rgb(41,238,242)"></circle>
<circle cx="0" cy="0" r="2" stroke="rgb(0,255,157)" stroke-width="1" fill="rgb(0,255,157)">
<animateMotion path="M 30 60 L 80 60 L 120 3" begin="0s" dur="3s" repeatCount="indefinite">
</animateMotion>
</circle>
</svg>