JSFiddle - React, Tailwind, and code Playground

HTML

<div class="arc">
  <svg class="arc__svg" viewBox="0 0 600 600" width="100%" height="160" preserveAspectRatio="none">
  <path class="arc__path" id="arc" fill="#ccc" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" /> 
  
  <text class="arc__text">
    <textpath xlink:href="#arc">
      Text text text text Text text text text Text text text text Text text text text Text text text text 
      
      <animate attributeName="startOffset" from="0%" to ="100%" begin="0s" dur="10s" repeatCount="indefinite" keyTimes="0;1" calcMode="spline" keySplines="0.1 0.2 .22 1"/>
    </textpath>
  </text>
</svg>
</div>

CSS

.arc {
  height: 160px;
  border: 1px solid #ccc;
  position: relative;
  overflow: hidden;
}

.arc__svg {
  position: absolute;
  top: 0px;
  left: 50%;
  height: 560px;
  width: 100%;
  transform: translateX(-50%);
}

.arc__path {
  width: 100%;
  height: 100%;
}

.arc__text {
  width: 100%;
}