JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -4 100 108">
    <path id="path" d="M50 0 C100 0, 0 100, 50 100 C100 100, 0 0, 50 0" stroke="teal" fill="transparent" stroke-width="8" />
    <text font-size="4">
        <textPath id="text" startOffset="0" xlink:href="#path">web-tiki</textPath>
        <animate xlink:href="#text"
                 attributeType="XML"
                 attributeName="startOffset"
                 from="0"
                 to="250"
                 dur="10s"
                 repeatCount="indefinite"/>
    </text>
</svg>

CSS

svg {
    width:80%;
    display:block;
    background:gold;
    padding:10%;
}