<svg id="tutorial" data-name="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.48 144.48">
 
  <path class="shape" id="shape" d="M242.93,123A71.74,71.74,0,1,1,171.2,51.22,71.73,71.73,0,0,1,242.93,123Z" transform="translate(-98.96 -50.72)"/>

   <text font-family="arial" font-size="14" fill="black">
        <textPath xlink:href="#shape">SVG moving text on the circle.</textPath>
      
        <animate attributeName="font-size" dur="10s" values="8;31" repeatCount="indefinite"></animate>
    </text>
</svg>
.shape {
  fill:none;
  stroke:#1d1d1b;
}

#tutorial {
  position: relative;
  overflow: visible;
  width: 15%;
  left: 40%;
  top: 100px;
  transform: rotate(-120deg);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.