
Example1 – Moving text on a circle:
*to see the animation on the website click here.
Demo:
Example2 – Moving text on a heart path:
Demo:
Step1.
Add a SVG path/ shape
In this tutorial we’ll create text on the circle (add a SVG path to the body section, to see more about the SVG path click here.):
<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)"/>
Step2.
Add CSS/ Style the circle
.shape {
fill:none;
stroke:#1d1d1b;
}
#tutorial {
position: relative;
overflow: visible;
width: 15%;
left: 40%;
top: 100px;
transform: rotate(-120deg);
}
Step3.
Add the text( body section)
<text font-family="arial" font-size="14" fill="black">
<textPath xlink:href="#shape">SVG moving text on the circle.</textPath>
Step4.
Add SVG Animation
<animate attributeName="font-size" dur="10s" values="8;31" repeatCount="indefinite"></animate>
</text>
</svg>
Enjoy coding!
Read also: