JSFiddle - React, Tailwind, and code Playground

by akogch

HTML

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="motion" d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </defs>
  <path fill="none" stroke="lightgrey" d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  <text>
    <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="1.2s">
      <mpath href="#motion" />
    </animateMotion>
    <tspan>H</tspan>
  </text>
  <text>
    <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="0.9s">
      <mpath href="#motion" />
    </animateMotion>
    <tspan>E</tspan>
  </text>
  <text>
    <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="0.6s">
      <mpath href="#motion" />
    </animateMotion>
    <tspan>L</tspan>
  </text>
  <text>
    <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="0.3s">
      <mpath href="#motion" />
    </animateMotion>
    <tspan>L</tspan>
  </text>
  <text>
    <animateMotion dur="10s" repeatCount="indefinite" rotate="auto">
      <mpath href="#motion" />
    </animateMotion>
    <tspan>O</tspan>
  </text>
</svg>

CSS

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}