Rotating Text
<div class="circle-text">
<svg class="circle-svg rotating" viewBox="0 0 200 200">
<path id="textPath" d="M 85,0 A 85,85 0 0 1 -85,0 A 85,85 0 0 1 85,0" transform="translate(100,100)" fill="none" stroke="rgba(28, 29, 36, 0.1)" stroke-width="10"></path>
<text text-anchor="start">
<textPath xlink:href="#textPath" textLength="300%">First text - Second text - Third text - Fourth text</textPath>
</text>
</svg>
</div>
Rotating Text - Icon inside
<div class="circle-text">
<svg class="circle-svg rotating" viewBox="0 0 200 200">
<path id="textPath" d="M 85,0 A 85,85 0 0 1 -85,0 A 85,85 0 0 1 85,0" transform="translate(100,100)" fill="none" stroke="rgba(28, 29, 36, 0.1)" stroke-width="10"></path>
<text text-anchor="start">
<textPath xlink:href="#textPath" textLength="300%">First text - Second text - Third text - Fourth text</textPath>
</text>
</svg>
<div class="circle-text-inner icon-4xl text-gradient-1">
<i class="ti-crown"></i>
</div>
</div>