<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.