<svg width="500" height="350" viewBox="0 0 500 350">
  <path id="myPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M91.4,104.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
  c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
  c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
  c1.9-2.1,3.7-5.5,6.5-6.5"/>
  
   <text>
    <textPath xlink:href="#myPath">
      Text laid out along a path.
      <animate
        attributeName="startOffset"
        from="0%"
        to="100%"
        begin="0s"
        dur="5s"
        repeatCount="indefinite"
        keyTimes="0;1"
        calcMode="spline"
        keySplines="0.1 0.2 .22 1"
      />
    </textPath>
  </text>
</svg>
<p>
  文字沿着指定路径摆放 <br>
  使用 `startOffset` 进行动画
</p>
svg {
  border: 3px solid #eee;
  display: block;
  margin: 1em auto;
}
text {
  fill: deepPink;
  font-size: 2em;
}
p {
  color: #aaa;
  text-align: center;
  margin: 2em 0;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.