JSFiddle - React, Tailwind, and code Playground
by Dogbert
HTML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 45 113" x="0px" y="0px"><path d="M23,75.59A20.18,20.18,0,0,0,43.19,55.44C43.19,26,29.08.67,21.87,0a1.27,1.27,0,0,0-.28,0,1.33,1.33,0,0,0-.28,0C14.11.67,0,26,0,55.44A20.18,20.18,0,0,0,20.16,75.59h.09v5.52c0,5.8,3.23,8.51,3.37,8.62a1.35,1.35,0,0,0,.84.3,1.31,1.31,0,0,0,1-.48,1.35,1.35,0,0,0-.16-1.89c-.1-.08-2.4-2.08-2.4-6.55V75.59Zm-.1-12.07L37,51.47a1.34,1.34,0,0,0-1.75-2L22.93,60V48.42L34.12,38.13a1.34,1.34,0,0,0-1.82-2l-9.37,8.63V33.24l8.18-8.42A1.34,1.34,0,0,0,29.18,23l-6.25,6.44V3.17C28.5,6.66,40.51,28.82,40.51,55.44A17.5,17.5,0,0,1,23,72.91h-.1ZM20.25,29.39,14,23a1.34,1.34,0,0,0-1.93,1.87l8.17,8.42V44.78l-9.37-8.63a1.34,1.34,0,0,0-1.81,2L20.25,48.42V60L8,49.43a1.34,1.34,0,0,0-1.74,2l14,12.05v9.39h-.09A17.5,17.5,0,0,1,2.68,55.44c0-26.62,12-48.78,17.57-52.27Z"/></svg>
CSS
svg {
width: 100px;
}
svg path {
stroke: green;
fill: none;
stroke-dasharray: 400;
animation: dash 4s linear 0s infinite alternate;
}
@keyframes dash {
from {
stroke-dashoffset: 400;
}
to {
stroke-dashoffset: 0;
}
}