Javascript-форум - Движение текста по контуру (траектории).

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Движение текста по контуру (траектории). (https://javascript.ru/forum/misc/85585-dvizhenie-teksta-po-konturu-traektorii.html)

Движение текста по контуру (траектории).

Всем привет. Нашел в Codepen, интересующий меня вариант скрипта. Оригинал тут https://codepen.io/jh3y/pen/ExjpmZV. Пытался реализовать тоже самое, но не получается, попытка тут https://codepen.io/bsi_52/pen/KKJgdPQ . В скриптах знания нулевые, а в этом примере очень нравится, что текст движется не пропадая в конечной точке маршрута. Просьба специалистов решить мою проблему. Всем спасибо.

На самом деле, тут скрипты особо не нужны, обычный 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>

Большое спасибо за быстрый ответ. завтра попробую Ваш вариант там где хотел использовать скрипт.

ruslan_mart, да это то что надо. огромное Вам спасибо.