SVG Sample Text on a curve.

index.html

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
    <defs>
        <path id="criclePath" d="M75,150A75,75 0 1 1225,150A75,75 0 1 175,150"/>
    </defs>
    
    <circle cx="150" cy="150" r="135" fill="#fdf195"/>
    <g>
        <text>
            <textPath 
					  aria-label="Your Way, Way Better"
					  xlink:href="#criclePath">Your Way → Way Better →</textPath>
        </text>
    </g>
</svg>

style.scss

text {
	font-family: Arial;
	font-weight: 600;
	font-size: 24px;
	letter-spacing: 5px;
	fill: #ed8353;
	text-transform: uppercase;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	
	to {
		transform: rotate(360deg);
	}
}

svg {
	max-width: 200px;
	width: 100%;
	height: auto;
	animation: spin 15s infinite;
	animation-timing-function: linear;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ed8353;
	height: 100svh;
}

svg-sample-text-on-a-curve.markdown

SVG Sample Text on a curve.

A Pen by Motionharvest on CodePen.

License.