На самом деле, тут скрипты особо не нужны, обычный SVG прекрасно справляется с подобными анимациями.
Набросал небольшой пример:
https://jsfiddle.net/u5mqe9Lv/
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
html,
body,
svg {
height: 100%;
margin: 0;
padding: 0;
display: block;
}
</style>
</head>
<body>
<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>
</body>
</html>
