3

Мне нужно анимировать алфавит вдоль пути, чтобы он изгибался, чтобы соответствовать пути, когда анимируется движение вдоль path.

Я попытался использовать путь по дуге с тегом animateMotion в надежде, что он согнет группу алфавита по дуге, но вместо этого он следует по пути, сохраняя группу букв алфавита на прямой линии.

Как я могу добиться такого эффекта?

https://codepen.io/Finches/pen/vYgMBwW

svg {
  margin: 0 auto;
  display: block;
}

.alphabet-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  .row {
    display: flex;
    flex-direction: row;
    .letter {
      border: 2px solid black;
      padding: 10px;
      margin: 5px;
      width: 30px;
      height: 30px;
      font-weight: bold;
      font-family: 'Montserrat', sans-serif;
      font-size: 30px
    }
  }
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1359px"
     height="396px" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">
  
<style type="text/css">
    .st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
    .st1{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:11.9626,11.9626;}
    .st2{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:11.9189,11.9189;}
    .st3{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:6.0125,6.0125;}
</style>
  
<defs>
</defs>
<path class="st0" d="M1215.7,395c0-147.7-135.7-267.9-302.4-267.9H445.7C279,127.1,143.3,247.2,143.3,395H1
    c0-53.2,11.8-104.8,35-153.4c22.4-46.9,54.5-89,95.3-125.2S219.6,51.8,272.6,32C327.5,11.4,385.7,1,445.7,1h467.6
    c60,0,118.3,10.4,173.1,31c53,19.8,100.5,48.2,141.3,84.4s72.9,78.3,95.3,125.2c23.2,48.6,35,100.2,35,153.4L1215.7,395z"/>
<g>
    <g>
        <path class="st0" d="M1230.6,395c0-2,0-4-0.1-6"/>
        <path class="st1" d="M1230,377c-10.2-156-152.9-263.4-316.7-263.4H445.7c-165.9,0-310.1,110.2-317,269.4"/>
        <path class="st0" d="M128.5,389c0,2-0.1,4-0.1,6"/>
    </g>
</g>
<g>
    <g>
        <path class="st0" d="M16.5,395c0.1-2,0.2-4,0.3-6"/>
        <path class="st2" d="M17.6,377.1c3.6-43,14.5-92.7,32.4-130.2c21.6-45.3,52.6-86,92-120.9c39.4-34.9,85.3-62.3,136.5-81.5
            c53-19.9,109.2-29.9,167.2-29.9h467.6c58,0,114.2,10.1,167.2,29.9c51.1,19.2,97.1,46.6,136.5,81.5c39.4,34.9,70.4,75.6,92,120.9
            c18.7,39.2,29.7,91.8,32.9,136.2"/>
        <path class="st0" d="M1342.2,389c0.1,2,0.2,4,0.3,6"/>
    </g>
</g>
<g>
    <g>
        <path class="st0" d="M1286.9,395L1286.9,395c0-1,0-2,0-3"/>
        <path class="st3" d="M1286.7,385.9C1281.3,207.3,1116.2,64,913.3,64H445.7C241.7,64,75.8,209,72.2,388.9"/>
        <path class="st0" d="M72.2,392c0,1,0,2,0,3v0"/>
    </g>
</g>



<!-- Alphabet  -->
<g>
  
  <animateMotion dur="10s" repeatCount="indefinite" path="M1214.7,330.9L1214.7,330.9C1214.7,148.2,1047.5,0,841.1,0L373.6,0C167.2,0,0,148.2,0,330.9v0"/>

    <rect x="1" y="1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M14.7,52.2L31.8,7.6h6.4l18.3,44.6h-6.7l-5.2-13.5H25.9L21,52.2H14.7z M27.6,33.9h15.1L38,21.5c-1.4-3.8-2.5-6.8-3.2-9.3
            c-0.6,2.9-1.4,5.7-2.4,8.5L27.6,33.9z"/>
    </g>
    <rect x="85.9" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M104.2,52.3V7.7h16.7c3.4,0,6.1,0.5,8.2,1.4c2.1,0.9,3.7,2.3,4.8,4.2c1.2,1.9,1.8,3.8,1.8,5.9c0,1.9-0.5,3.7-1.6,5.4
            s-2.6,3-4.7,4.1c2.7,0.8,4.8,2.1,6.2,4c1.4,1.9,2.2,4.2,2.2,6.8c0,2.1-0.4,4-1.3,5.8c-0.9,1.8-2,3.2-3.3,4.2
            c-1.3,1-2.9,1.7-4.9,2.2c-2,0.5-4.4,0.7-7.2,0.7H104.2z M110.1,26.5h9.6c2.6,0,4.5-0.2,5.6-0.5c1.5-0.4,2.6-1.2,3.4-2.2
            c0.8-1,1.1-2.3,1.1-3.9c0-1.5-0.4-2.8-1.1-3.9s-1.7-1.9-3-2.3S122.2,13,119,13h-8.9V26.5z M110.1,47.1h11.1c1.9,0,3.2-0.1,4-0.2
            c1.4-0.2,2.5-0.6,3.4-1.2s1.7-1.4,2.3-2.5c0.6-1.1,0.9-2.3,0.9-3.8c0-1.7-0.4-3.1-1.3-4.3s-2-2.1-3.5-2.6s-3.7-0.7-6.5-0.7h-10.3
            V47.1z"/>
    </g>
    <rect x="174.4" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M224.8,36.7l5.9,1.5c-1.2,4.8-3.5,8.5-6.7,11.1c-3.2,2.5-7.1,3.8-11.8,3.8c-4.8,0-8.7-1-11.7-2.9c-3-2-5.3-4.8-6.9-8.5
            c-1.6-3.7-2.4-7.7-2.4-12c0-4.6,0.9-8.7,2.7-12.2c1.8-3.5,4.3-6.1,7.6-7.9S208.4,7,212.3,7c4.5,0,8.2,1.1,11.3,3.4
            c3,2.3,5.2,5.5,6.4,9.6l-5.8,1.4c-1-3.2-2.5-5.6-4.5-7.1c-2-1.5-4.4-2.2-7.4-2.2c-3.4,0-6.3,0.8-8.6,2.5s-3.9,3.8-4.9,6.6
            c-0.9,2.8-1.4,5.6-1.4,8.6c0,3.8,0.6,7.1,1.7,9.9c1.1,2.8,2.8,4.9,5.2,6.3c2.3,1.4,4.9,2.1,7.6,2.1c3.3,0,6.1-1,8.4-2.9
            C222.4,43.3,224,40.4,224.8,36.7z"/>
    </g>
    <rect x="260.4" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M279,52.3V7.7h15.4c3.5,0,6.1,0.2,7.9,0.6c2.6,0.6,4.7,1.7,6.5,3.2c2.4,2,4.1,4.5,5.3,7.6s1.8,6.6,1.8,10.6
            c0,3.4-0.4,6.4-1.2,9s-1.8,4.8-3,6.5c-1.2,1.7-2.6,3.1-4.1,4s-3.2,1.7-5.3,2.2s-4.5,0.8-7.2,0.8H279z M284.9,47.1h9.5
            c2.9,0,5.2-0.3,6.9-0.8c1.7-0.5,3-1.3,4-2.3c1.4-1.4,2.5-3.3,3.3-5.6c0.8-2.4,1.2-5.2,1.2-8.6c0-4.7-0.8-8.3-2.3-10.8
            s-3.4-4.2-5.6-5c-1.6-0.6-4.1-0.9-7.6-0.9h-9.4V47.1z"/>
    </g>
    <rect x="346.4" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M365.1,52.3V7.7h32.3V13H371v13.7h24.7v5.2H371v15.2h27.4v5.3H365.1z"/>
    </g>
    <rect x="434.8" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M453.8,52.3V7.7h30.1V13h-24.2v13.8h20.9v5.3h-20.9v20.3H453.8z"/>
    </g>
    <rect x="526.4" y="1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M565.8,34.7v-5.2l18.9,0V46c-2.9,2.3-5.9,4.1-9,5.2c-3.1,1.2-6.2,1.8-9.5,1.8c-4.4,0-8.4-0.9-11.9-2.8
            c-3.6-1.9-6.3-4.6-8.1-8.1c-1.8-3.5-2.7-7.5-2.7-11.9c0-4.3,0.9-8.4,2.7-12.2c1.8-3.8,4.4-6.6,7.8-8.4c3.4-1.8,7.3-2.7,11.8-2.7
            c3.2,0,6.1,0.5,8.7,1.6c2.6,1,4.7,2.5,6.1,4.4s2.6,4.3,3.4,7.3l-5.3,1.5c-0.7-2.3-1.5-4.1-2.5-5.4c-1-1.3-2.4-2.3-4.3-3.1
            c-1.8-0.8-3.9-1.2-6.1-1.2c-2.7,0-5,0.4-7,1.2c-2,0.8-3.6,1.9-4.8,3.2s-2.1,2.8-2.8,4.4c-1.1,2.8-1.7,5.8-1.7,9
            c0,4,0.7,7.3,2.1,10c1.4,2.7,3.4,4.7,6,6c2.6,1.3,5.4,1.9,8.3,1.9c2.6,0,5.1-0.5,7.5-1.5s4.3-2,5.5-3.1v-8.3H565.8z"/>
    </g>
    <rect x="611.2" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M630,52.3V7.7h5.9V26h23.2V7.7h5.9v44.6h-5.9v-21h-23.2v21H630z"/>
    </g>
    <rect x="699.7" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M719.3,52.3V7.7h5.9v44.6H719.3z"/>
    </g>
    <rect x="785.7" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M801.3,39.7l5.3-0.7c0.1,3.4,0.8,5.7,1.9,7c1.1,1.3,2.7,1.9,4.7,1.9c1.5,0,2.8-0.3,3.8-1c1.1-0.7,1.8-1.6,2.2-2.8
            c0.4-1.2,0.6-3,0.6-5.6V7.7h5.9v30.4c0,3.7-0.5,6.6-1.4,8.7c-0.9,2-2.3,3.6-4.3,4.7c-2,1.1-4.3,1.6-6.9,1.6c-3.9,0-6.9-1.1-9-3.4
            C802.2,47.5,801.2,44.1,801.3,39.7z"/>
    </g>
    <rect x="871.7" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M890.1,52.3V7.7h5.9v22.1l22.2-22.1h8l-18.7,18.1L927,52.3h-7.8l-15.9-22.6l-7.3,7.1v15.5H890.1z"/>
    </g>
    <rect x="960.2" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M978.6,52.3V7.7h5.9v39.3h22v5.3H978.6z"/>
    </g>
    <rect x="1048.6" y="1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M1067,52.2V7.6h8.9l10.6,31.6c1,2.9,1.7,5.1,2.1,6.6c0.5-1.6,1.3-4,2.4-7.2l10.7-31h7.9v44.6h-5.7V14.9l-13,37.3h-5.3
            l-12.9-38v38H1067z"/>
    </g>
    <rect x="1133.5" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M1152,52.3V7.7h6.1l23.4,35v-35h5.7v44.6h-6.1l-23.4-35.1v35.1H1152z"/>
    </g>
    <rect x="1222" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M1238.8,30.6c0-7.4,2-13.2,6-17.4c4-4.2,9.1-6.3,15.4-6.3c4.1,0,7.8,1,11.1,3s5.8,4.7,7.6,8.2s2.6,7.5,2.6,12
            c0,4.5-0.9,8.6-2.7,12.1c-1.8,3.6-4.4,6.3-7.8,8.1s-7,2.8-10.8,2.8c-4.2,0-8-1-11.3-3s-5.8-4.8-7.5-8.3
            C1239.6,38.2,1238.8,34.5,1238.8,30.6z M1244.8,30.7c0,5.4,1.4,9.6,4.3,12.7s6.5,4.6,10.9,4.6c4.4,0,8.1-1.6,11-4.7
            c2.9-3.1,4.3-7.6,4.3-13.3c0-3.6-0.6-6.8-1.8-9.5c-1.2-2.7-3-4.8-5.4-6.3c-2.4-1.5-5-2.2-8-2.2c-4.2,0-7.8,1.4-10.8,4.3
            C1246.3,19.2,1244.8,24,1244.8,30.7z"/>
    </g>
    <rect x="1308" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M1326.6,52.3V7.7h16.8c3,0,5.2,0.1,6.8,0.4c2.2,0.4,4,1.1,5.5,2.1c1.5,1,2.7,2.5,3.6,4.3c0.9,1.8,1.4,3.9,1.4,6.1
            c0,3.8-1.2,7-3.6,9.6c-2.4,2.6-6.8,3.9-13.1,3.9h-11.4v18.1H1326.6z M1332.5,28.9h11.5c3.8,0,6.5-0.7,8.1-2.1
            c1.6-1.4,2.4-3.4,2.4-6c0-1.9-0.5-3.5-1.4-4.8c-0.9-1.3-2.2-2.2-3.7-2.6c-1-0.3-2.8-0.4-5.5-0.4h-11.4V28.9z"/>
    </g>
    <rect x="1394" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M1446.4,47.6c2.7,1.9,5.3,3.3,7.6,4.1l-1.7,4.1c-3.2-1.2-6.4-3-9.6-5.5c-3.3,1.8-7,2.8-11,2.8c-4,0-7.7-1-11-2.9
            c-3.3-1.9-5.8-4.7-7.6-8.2c-1.8-3.5-2.7-7.5-2.7-11.9c0-4.4,0.9-8.4,2.7-12c1.8-3.6,4.3-6.4,7.6-8.2c3.3-1.9,7-2.8,11.1-2.8
            c4.1,0,7.8,1,11.1,2.9c3.3,2,5.8,4.7,7.6,8.2c1.7,3.5,2.6,7.5,2.6,11.9c0,3.7-0.6,7-1.7,9.9C1450.3,42.8,1448.6,45.4,1446.4,47.6z
             M1433.4,40c3.4,1,6.2,2.4,8.4,4.3c3.5-3.2,5.2-7.9,5.2-14.3c0-3.6-0.6-6.8-1.8-9.5s-3-4.8-5.4-6.3s-5-2.2-8-2.2
            c-4.4,0-8.1,1.5-11,4.5c-2.9,3-4.4,7.5-4.4,13.5c0,5.8,1.4,10.3,4.3,13.4s6.5,4.7,11,4.7c2.1,0,4.1-0.4,6-1.2
            c-1.8-1.2-3.8-2-5.8-2.6L1433.4,40z"/>
    </g>
    <rect x="1482.4" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M1501.1,52.3V7.7h19.8c4,0,7,0.4,9.1,1.2c2.1,0.8,3.7,2.2,5,4.2c1.2,2,1.9,4.3,1.9,6.7c0,3.2-1,5.8-3.1,8
            c-2,2.2-5.2,3.6-9.5,4.1c1.6,0.8,2.7,1.5,3.6,2.2c1.7,1.6,3.4,3.6,4.9,5.9l7.8,12.1h-7.4l-5.9-9.3c-1.7-2.7-3.1-4.7-4.3-6.1
            c-1.1-1.4-2.1-2.4-3-3c-0.9-0.6-1.8-1-2.7-1.2c-0.7-0.1-1.8-0.2-3.3-0.2h-6.8v19.8H1501.1z M1507,27.4h12.7c2.7,0,4.8-0.3,6.3-0.8
            c1.5-0.6,2.7-1.5,3.5-2.7s1.2-2.6,1.2-4c0-2.1-0.8-3.8-2.3-5.2c-1.5-1.4-4-2-7.3-2H1507V27.4z"/>
    </g>
    <rect x="1570.9" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M1587.5,38l5.6-0.5c0.3,2.2,0.9,4.1,1.8,5.5c1,1.4,2.5,2.6,4.5,3.5c2,0.9,4.3,1.3,6.8,1.3c2.3,0,4.2-0.3,6-1
            c1.7-0.7,3-1.6,3.8-2.8c0.8-1.2,1.3-2.4,1.3-3.8c0-1.4-0.4-2.6-1.2-3.7s-2.2-1.9-4-2.6c-1.2-0.5-3.8-1.2-7.9-2.2
            c-4.1-1-7-1.9-8.6-2.8c-2.1-1.1-3.7-2.5-4.8-4.2s-1.6-3.5-1.6-5.6c0-2.3,0.6-4.4,1.9-6.3c1.3-2,3.1-3.4,5.6-4.5
            c2.5-1,5.2-1.5,8.2-1.5c3.3,0,6.2,0.5,8.7,1.6c2.5,1.1,4.5,2.6,5.8,4.7c1.4,2.1,2.1,4.4,2.2,7l-5.7,0.4c-0.3-2.8-1.3-5-3.1-6.4
            s-4.3-2.2-7.8-2.2c-3.6,0-6.2,0.7-7.8,2c-1.6,1.3-2.4,2.9-2.4,4.7c0,1.6,0.6,2.9,1.7,4c1.1,1,4.1,2.1,8.9,3.2
            c4.8,1.1,8.1,2,9.9,2.8c2.6,1.2,4.5,2.7,5.8,4.5c1.2,1.8,1.9,4,1.9,6.3c0,2.4-0.7,4.6-2,6.7c-1.4,2.1-3.3,3.7-5.9,4.9
            c-2.5,1.2-5.4,1.8-8.6,1.8c-4,0-7.4-0.6-10.1-1.8c-2.7-1.2-4.9-2.9-6.4-5.3C1588.4,43.7,1587.6,41,1587.5,38z"/>
    </g>
    <rect x="1656.9" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M1686.8,52.3V13h-14.7V7.7h35.4V13h-14.8v39.3H1686.8z"/>
    </g>
    <rect x="1745.4" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M1793.3,7.7h5.9v25.8c0,4.5-0.5,8-1.5,10.7c-1,2.6-2.8,4.8-5.5,6.4c-2.6,1.7-6.1,2.5-10.4,2.5c-4.2,0-7.6-0.7-10.3-2.2
            c-2.7-1.4-4.6-3.5-5.7-6.3c-1.1-2.7-1.7-6.5-1.7-11.2V7.7h5.9v25.7c0,3.9,0.4,6.7,1.1,8.6c0.7,1.8,2,3.3,3.7,4.2
            c1.8,1,3.9,1.5,6.4,1.5c4.3,0,7.4-1,9.3-3c1.8-2,2.8-5.8,2.8-11.3V7.7z"/>
    </g>
    <rect x="1833.8" y="1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M1865.1,52.2l-17.3-44.6h6.4l11.6,32.4c0.9,2.6,1.7,5,2.3,7.3c0.7-2.4,1.5-4.9,2.4-7.3l12-32.4h6l-17.5,44.6H1865.1z"/>
    </g>
    <rect x="1918.6" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M1945,52.3l-11.8-44.6h6.1L1946,37c0.7,3.1,1.4,6.1,1.9,9.1c1.1-4.8,1.8-7.5,2-8.2l8.5-30.1h7.1l6.4,22.6
            c1.6,5.6,2.8,10.9,3.5,15.8c0.6-2.8,1.3-6.1,2.2-9.7l7-28.7h5.9l-12.2,44.6h-5.7l-9.4-34c-0.8-2.8-1.3-4.6-1.4-5.2
            c-0.5,2-0.9,3.8-1.3,5.2l-9.5,34H1945z"/>
    </g>
    <rect x="2007.1" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M2021.2,52.3l17.3-23.2l-15.2-21.4h7l8.1,11.4c1.7,2.4,2.9,4.2,3.6,5.5c1-1.6,2.2-3.3,3.5-5.1l9-11.8h6.4l-15.7,21
            l16.9,23.6h-7.3l-11.2-15.9c-0.6-0.9-1.3-1.9-1.9-3c-1,1.6-1.7,2.7-2.1,3.3l-11.2,15.5H2021.2z"/>
    </g>
    <rect x="2093.1" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M2124.3,52.3V33.4l-17.2-25.7h7.2l8.8,13.5c1.6,2.5,3.1,5,4.5,7.5c1.3-2.3,3-5,4.9-7.9l8.6-13.1h6.9l-17.8,25.7v18.9
            H2124.3z"/>
    </g>
    <rect x="2179.1" y="1.1" class="st0" width="69.2" height="69.2"/>
    <g>
        <path d="M2194.2,52.3v-5.5l22.9-28.6c1.6-2,3.2-3.8,4.6-5.3h-24.9V7.7h32V13l-25,30.9l-2.7,3.1h28.5v5.3H2194.2z"/>
    </g>
</g>
  
</svg>


<div class="alphabet-selector">
  <div class="row">
    <div class="letter">A</div>
    <div class="letter">B</div>
    <div class="letter">C</div>
    <div class="letter">D</div>
    <div class="letter">E</div>
    <div class="letter">F</div>
    <div class="letter">G</div>
  </div>
  <div class="row">
    <div class="letter">H</div>
    <div class="letter">I</div>
    <div class="letter">J</div>
    <div class="letter">K</div>
    <div class="letter">L</div>
    <div class="letter">M</div>
    <div class="letter">N</div>
  </div>
  <div class="row">
    <div class="letter">O</div>
    <div class="letter">P</div>
    <div class="letter">Q</div>
    <div class="letter">R</div>
    <div class="letter">S</div>
    <div class="letter">T</div>
    <div class="letter">U</div>
  </div>
  <div class="row">
    <div class="letter">V</div>
    <div class="letter">W</div>
    <div class="letter">X</div>
    <div class="letter">Y</div>
    <div class="letter">Z</div>
  </div>
</div>

Свободный перевод вопроса How to animate group of svg objects along an svg path от участника @Corey Bush.

1

3 ответа 3

5

Вам нужно будет анимировать каждую букву, используя ту же анимацию и задержку, объявленную с помощью атрибута begin. В следующем примере я анимирую только буквы A B и C.

Если вы используете тот же путь для своей анимации, вы можете использовать элемент <mpath xlink: href = "# path"> </mpath>, чтобы указать путь, который вы хотите использовать, и сохранить исходный путь в defs

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">

  <style type="text/css">
    .st0 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-miterlimit: 10;
    }

    .st1 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke-dasharray: 11.9626, 11.9626;
    }

    .st2 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke-dasharray: 11.9189, 11.9189;
    }

    .st3 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke-dasharray: 6.0125, 6.0125;
    }
  </style>

  <defs>

    <path id="path" d="M1214.7,330.9L1214.7,330.9C1214.7,148.2,1047.5,0,841.1,0L373.6,0C167.2,0,0,148.2,0,330.9v0" />
  </defs>
  <path class="st0" d="M1215.7,395c0-147.7-135.7-267.9-302.4-267.9H445.7C279,127.1,143.3,247.2,143.3,395H1
    c0-53.2,11.8-104.8,35-153.4c22.4-46.9,54.5-89,95.3-125.2S219.6,51.8,272.6,32C327.5,11.4,385.7,1,445.7,1h467.6
    c60,0,118.3,10.4,173.1,31c53,19.8,100.5,48.2,141.3,84.4s72.9,78.3,95.3,125.2c23.2,48.6,35,100.2,35,153.4L1215.7,395z" />
  <g>
    <g>
      <path class="st0" d="M1230.6,395c0-2,0-4-0.1-6" />
      <path class="st1" d="M1230,377c-10.2-156-152.9-263.4-316.7-263.4H445.7c-165.9,0-310.1,110.2-317,269.4" />
      <path class="st0" d="M128.5,389c0,2-0.1,4-0.1,6" />
    </g>
  </g>
  <g>
    <g>
      <path class="st0" d="M16.5,395c0.1-2,0.2-4,0.3-6" />
      <path class="st2" d="M17.6,377.1c3.6-43,14.5-92.7,32.4-130.2c21.6-45.3,52.6-86,92-120.9c39.4-34.9,85.3-62.3,136.5-81.5
            c53-19.9,109.2-29.9,167.2-29.9h467.6c58,0,114.2,10.1,167.2,29.9c51.1,19.2,97.1,46.6,136.5,81.5c39.4,34.9,70.4,75.6,92,120.9
            c18.7,39.2,29.7,91.8,32.9,136.2" />
      <path class="st0" d="M1342.2,389c0.1,2,0.2,4,0.3,6" />
    </g>
  </g>
  <g>
    <g>
      <path class="st0" d="M1286.9,395L1286.9,395c0-1,0-2,0-3" />
      <path class="st3" d="M1286.7,385.9C1281.3,207.3,1116.2,64,913.3,64H445.7C241.7,64,75.8,209,72.2,388.9" />
      <path class="st0" d="M72.2,392c0,1,0,2,0,3v0" />
    </g>
  </g>

  <!-- Alphabet  -->
  <g>

    <g id="a" transform="translate(-35,-35)">
      <animateMotion dur="10s" repeatCount="indefinite">
        <mpath xlink:href="#path"></mpath>
      </animateMotion>
      <rect x="1" y="1" class="st0" width="69.2" height="69.2" />
      <path d="M14.7,52.2L31.8,7.6h6.4l18.3,44.6h-6.7l-5.2-13.5H25.9L21,52.2H14.7z M27.6,33.9h15.1L38,21.5c-1.4-3.8-2.5-6.8-3.2-9.3
            c-0.6,2.9-1.4,5.7-2.4,8.5L27.6,33.9z" />
    </g>

    <g id="b" transform="translate(-121,-35)">
      <animateMotion dur="10s" repeatCount="indefinite" begin="1s">
        <mpath xlink:href="#path"></mpath>
      </animateMotion>
      <rect x="85.9" y="1" class="st0" width="69.2" height="69.2" />
      <path d="M104.2,52.3V7.7h16.7c3.4,0,6.1,0.5,8.2,1.4c2.1,0.9,3.7,2.3,4.8,4.2c1.2,1.9,1.8,3.8,1.8,5.9c0,1.9-0.5,3.7-1.6,5.4
            s-2.6,3-4.7,4.1c2.7,0.8,4.8,2.1,6.2,4c1.4,1.9,2.2,4.2,2.2,6.8c0,2.1-0.4,4-1.3,5.8c-0.9,1.8-2,3.2-3.3,4.2
            c-1.3,1-2.9,1.7-4.9,2.2c-2,0.5-4.4,0.7-7.2,0.7H104.2z M110.1,26.5h9.6c2.6,0,4.5-0.2,5.6-0.5c1.5-0.4,2.6-1.2,3.4-2.2
            c0.8-1,1.1-2.3,1.1-3.9c0-1.5-0.4-2.8-1.1-3.9s-1.7-1.9-3-2.3S122.2,13,119,13h-8.9V26.5z M110.1,47.1h11.1c1.9,0,3.2-0.1,4-0.2
            c1.4-0.2,2.5-0.6,3.4-1.2s1.7-1.4,2.3-2.5c0.6-1.1,0.9-2.3,0.9-3.8c0-1.7-0.4-3.1-1.3-4.3s-2-2.1-3.5-2.6s-3.7-0.7-6.5-0.7h-10.3
            V47.1z" />
    </g>

    <g id="c" transform="translate(-209.4,-35)">
      <animateMotion dur="10s" repeatCount="indefinite" begin="2s">
        <mpath xlink:href="#path"></mpath>
      </animateMotion>
      <rect x="174.4" y="1.1" class="st0" width="69.2" height="69.2" />
      <path d="M224.8,36.7l5.9,1.5c-1.2,4.8-3.5,8.5-6.7,11.1c-3.2,2.5-7.1,3.8-11.8,3.8c-4.8,0-8.7-1-11.7-2.9c-3-2-5.3-4.8-6.9-8.5
            c-1.6-3.7-2.4-7.7-2.4-12c0-4.6,0.9-8.7,2.7-12.2c1.8-3.5,4.3-6.1,7.6-7.9S208.4,7,212.3,7c4.5,0,8.2,1.1,11.3,3.4
            c3,2.3,5.2,5.5,6.4,9.6l-5.8,1.4c-1-3.2-2.5-5.6-4.5-7.1c-2-1.5-4.4-2.2-7.4-2.2c-3.4,0-6.3,0.8-8.6,2.5s-3.9,3.8-4.9,6.6
            c-0.9,2.8-1.4,5.6-1.4,8.6c0,3.8,0.6,7.1,1.7,9.9c1.1,2.8,2.8,4.9,5.2,6.3c2.3,1.4,4.9,2.1,7.6,2.1c3.3,0,6.1-1,8.4-2.9
            C222.4,43.3,224,40.4,224.8,36.7z" />
    </g>

  </g>

</svg>

Свободный перевод ответа от участника @enxaneta .

1
3

Для решения можно использовать SVG: textPath

Это позволит значительно сократить код, так как будет только один path и одна и та же анимация для движения букв вдоль этого path.

  • Каждая буква алфавита обернута в теги - <tspan dx="0" dy="30"> A</tspan>

  • Дистанцию между буквами можно регулировать с помощью параметра dx или с помощью letter-spacing="0.18em"

Я выбрал letter-spacing, так как Firefox и Chrome по разному выполняют регулировку расстояния с помощью dx и dy

  • Так как изначально все буквы алфавита не умещаются на трассе движения, то её необходимо сделать длиннее:

введите сюда описание изображения

Ниже полный код, анимация движения букв начнется после клика:

.container {
     width:100vw;
     height:100vh;
     }
    .st0 {
      fill: none;
      stroke: #000000;
      stroke-width: 3;
      stroke-miterlimit: 10;
    }

    .st1 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke-dasharray: 11.9626, 11.9626;
    }

    .st2 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke-dasharray: 11.9189, 11.9189;
    }

    #st3 {
      fill: none;
      stroke: #565656;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke-dasharray: 6.0125, 6.0125;
    }
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">
  
    <path  id="st3"  d="m73.1 2823.3 0-2367.5L72.2 388.9c0 0 6.7-64.1 17.1-94.2 10.2-29.6 24.9-58 43.6-83.1 19-25.4 42.8-47.4 68.1-66.5 25-18.8 52.8-33.9 81.4-46.5 29.6-13.1 79.6-27.3 92.5-29.8 8.5-1.7 568.1-7.2 597.3-1.8 30.1 5.5 64 14.6 94.4 26.7 25.5 10.2 50.3 22.8 73.1 38.2 25.4 17.2 49.5 36.9 69.8 59.8 21.2 23.9 40.8 50.3 53.2 79.7C1277.7 307.4 1286.7 385.9 1286.7 385.9" />
   
  <!-- Alphabet  -->
   <text font-size="100px" fill="#565656" letter-spacing="0.18em">
     <textPath xlink:href="#st3" startOffset="100%" >
        <tspan  dx="0" dy="30"> A</tspan>
         <tspan dx="0" dy="0"> B</tspan>
           <tspan   dx="0" dy="0"> C</tspan>
            <tspan  dx="0" dy="0"> D</tspan> 
             <tspan dx="0" dy="0"> E</tspan>   
              <tspan dx="0" dy="0"> F</tspan>
               <tspan dx="0" dy="0"> G</tspan>
                <tspan dx="0" dy="0"> H</tspan>  
                 <tspan dx="0" dy="0"> I</tspan>
                  <tspan dx="0" dy="0"> J</tspan>
                 <tspan dx="0" dy="0"> K</tspan>
                <tspan dx="0" dy="0"> L</tspan> 
               <tspan dx="0" dy="0"> M</tspan>  
              <tspan dx="0" dy="0"> N</tspan>
             <tspan dx="0" dy="0"> O</tspan>
            <tspan dx="0" dy="0"> P</tspan>
           <tspan dx="0" dy="0"> Q</tspan> 
          <tspan dx="0" dy="0">R</tspan> 
         <tspan dx="0" dy="0"> S</tspan>
        <tspan dx="0" dy="0"> T</tspan>
       <tspan dx="0" dy="0"> U</tspan> 
      <tspan dx="0" dy="0"> V</tspan>      
     <tspan dx="0" dy="0"> W</tspan>
      <tspan dx="0" dy="0"> X</tspan>
       <tspan dx="0" dy="0"> Y</tspan>
        <tspan dx="0" dy="0"> Z</tspan>    
        <animate  attributeName="startOffset" from="100%" to="-20%" begin="svg1.click" dur="20s" repeatCount="indefinite"/>
        </text>
    </textPath> 
    
  <path class="st0" d="M1215.7,395c0-147.7-135.7-267.9-302.4-267.9H445.7C279,127.1,143.3,247.2,143.3,395H1     c0-53.2,11.8-104.8,35-153.4c22.4-46.9,54.5-89,95.3-125.2S219.6,51.8,272.6,32C327.5,11.4,385.7,1,445.7,1h467.6     c60,0,118.3,10.4,173.1,31c53,19.8,100.5,48.2,141.3,84.4s72.9,78.3,95.3,125.2c23.2,48.6,35,100.2,35,153.4L1215.7,395z" />
     
      <path class="st1" d="M1230,377c-10.2-156-152.9-263.4-316.7-263.4H445.7c-165.9,0-310.1,110.2-317,269.4" />
         
      <path class="st2" d="M17.6,377.1c3.6-43,14.5-92.7,32.4-130.2c21.6-45.3,52.6-86,92-120.9c39.4-34.9,85.3-62.3,136.5-81.5c53-19.9,109.2-29.9,167.2-29.9h467.6c58,0,114.2,10.1,167.2,29.9c51.1,19.2,97.1,46.6,136.5,81.5c39.4,34.9,70.4,75.6,92,120.9
            c18.7,39.2,29.7,91.8,32.9,136.2" /> 
     <rect x="0" y="398" width="1400" height="800" fill="white" />      
    </svg>

В вопросе каждая буква обернута в рамку.
Решить это можно с помощью применения символов Юникода, которые будут заменять латинские буквы с рамкой вокруг буквы &#9398; - Так как это по сути шрифт, то можно его стилизовать: устанавливая размер, цвет и т.д

Остальное всё, как в первом примере. Только буквы заменены на символы юникода.

.container {
     width:100vw;
     height:100vh;
     }
    .st0 {
      fill: none;
      stroke: #000000;
      stroke-width: 3;
      stroke-miterlimit: 10;
    }

    .st1 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke-dasharray: 11.9626, 11.9626;
    }

    .st2 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke-dasharray: 11.9189, 11.9189;
    }

    #st3 {
      fill: none;
      stroke: #565656;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke-dasharray: 6.0125, 6.0125;
    }
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">
  
    <path  id="st3"  d="m73.1 2823.3 0-2367.5L72.2 388.9c0 0 6.7-64.1 17.1-94.2 10.2-29.6 24.9-58 43.6-83.1 19-25.4 42.8-47.4 68.1-66.5 25-18.8 52.8-33.9 81.4-46.5 29.6-13.1 79.6-27.3 92.5-29.8 8.5-1.7 568.1-7.2 597.3-1.8 30.1 5.5 64 14.6 94.4 26.7 25.5 10.2 50.3 22.8 73.1 38.2 25.4 17.2 49.5 36.9 69.8 59.8 21.2 23.9 40.8 50.3 53.2 79.7C1277.7 307.4 1286.7 385.9 1286.7 385.9" />
   
  <!-- Alphabet  -->
   <text font-size="100px" fill="#565656">
     <textPath xlink:href="#st3" startOffset="100%" >
        <tspan  dx="0" dy="30"> &#9398;</tspan>
         <tspan dx="0" dy="0"> &#9399;</tspan>
           <tspan   dx="0" dy="0"> &#9400;</tspan>
            <tspan  dx="0" dy="0"> &#9401;</tspan> 
             <tspan dx="0" dy="0"> &#9402;</tspan>   
              <tspan dx="0" dy="0"> &#9403;</tspan>
               <tspan dx="0" dy="0"> &#9404;</tspan>
                <tspan dx="0" dy="0"> &#9405;</tspan>  
                 <tspan dx="0" dy="0"> &#9406;</tspan>
                  <tspan dx="0" dy="0"> &#9407;</tspan>
                 <tspan dx="0" dy="0"> &#9408;</tspan>
                <tspan dx="0" dy="0"> &#9409;</tspan> 
               <tspan dx="0" dy="0"> &#9410;</tspan>    
              <tspan dx="0" dy="0"> &#9411;</tspan>
             <tspan dx="0" dy="0"> &#9412;</tspan>
            <tspan dx="0" dy="0"> &#9413;</tspan>
           <tspan dx="0" dy="0"> &#9414;</tspan> 
          <tspan dx="0" dy="0"> &#9415;</tspan> 
         <tspan dx="0" dy="0"> &#9416;</tspan>
        <tspan dx="0" dy="0"> &#9417;</tspan>
       <tspan dx="0" dy="0"> &#9418;</tspan> 
      <tspan dx="0" dy="0"> &#9419;</tspan>    
     <tspan dx="0" dy="0"> &#9420;</tspan>
      <tspan dx="0" dy="0"> &#9421;</tspan>
       <tspan dx="0" dy="0"> &#9422;</tspan>
        <tspan dx="0" dy="0"> &#9423;</tspan>      
        <animate  attributeName="startOffset" from="100%" to="-20%" begin="svg1.click" dur="20s" repeatCount="indefinite"/>
        </text>
    </textPath> 
    
  <path class="st0" d="M1215.7,395c0-147.7-135.7-267.9-302.4-267.9H445.7C279,127.1,143.3,247.2,143.3,395H1     c0-53.2,11.8-104.8,35-153.4c22.4-46.9,54.5-89,95.3-125.2S219.6,51.8,272.6,32C327.5,11.4,385.7,1,445.7,1h467.6     c60,0,118.3,10.4,173.1,31c53,19.8,100.5,48.2,141.3,84.4s72.9,78.3,95.3,125.2c23.2,48.6,35,100.2,35,153.4L1215.7,395z" />
     
      <path class="st1" d="M1230,377c-10.2-156-152.9-263.4-316.7-263.4H445.7c-165.9,0-310.1,110.2-317,269.4" />
         
      <path class="st2" d="M17.6,377.1c3.6-43,14.5-92.7,32.4-130.2c21.6-45.3,52.6-86,92-120.9c39.4-34.9,85.3-62.3,136.5-81.5c53-19.9,109.2-29.9,167.2-29.9h467.6c58,0,114.2,10.1,167.2,29.9c51.1,19.2,97.1,46.6,136.5,81.5c39.4,34.9,70.4,75.6,92,120.9
            c18.7,39.2,29.7,91.8,32.9,136.2" /> 
     <rect x="0" y="398" width="1400" height="800" fill="white" />      
    </svg>

Пример стилизации отдельных букв

Для символа юникода буквы A в круге -

.container {
     width:100vw;
     height:100vh;
     }
    .st0 {
      fill: none;
      stroke: #000000;
      stroke-width: 3;
      stroke-miterlimit: 10;
    }

    .st1 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke-dasharray: 11.9626, 11.9626;
    }

    .st2 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke-dasharray: 11.9189, 11.9189;
    }

    #st3 {
      fill: none;
      stroke: #565656;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke-dasharray: 6.0125, 6.0125;
    }
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">
  
    <path  id="st3"  d="m73.1 2823.3 0-2367.5L72.2 388.9c0 0 6.7-64.1 17.1-94.2 10.2-29.6 24.9-58 43.6-83.1 19-25.4 42.8-47.4 68.1-66.5 25-18.8 52.8-33.9 81.4-46.5 29.6-13.1 79.6-27.3 92.5-29.8 8.5-1.7 568.1-7.2 597.3-1.8 30.1 5.5 64 14.6 94.4 26.7 25.5 10.2 50.3 22.8 73.1 38.2 25.4 17.2 49.5 36.9 69.8 59.8 21.2 23.9 40.8 50.3 53.2 79.7C1277.7 307.4 1286.7 385.9 1286.7 385.9" />
   
  <!-- Alphabet  -->
   <text font-size="100px" fill="#565656">
     <textPath xlink:href="#st3" startOffset="100%" >
        <tspan  dx="0" dy="30"  style="fill:red; font-size:120px;"> &#9398;</tspan>
         <tspan dx="0" dy="0"> &#9399;</tspan>
           <tspan   dx="0" dy="0"> &#9400;</tspan>
            <tspan  dx="0" dy="0"> &#9401;</tspan> 
             <tspan dx="0" dy="0"> &#9402;</tspan>   
              <tspan dx="0" dy="0"> &#9403;</tspan>
               <tspan dx="0" dy="0"> &#9404;</tspan>
                <tspan dx="0" dy="0"> &#9405;</tspan>  
                 <tspan dx="0" dy="0"> &#9406;</tspan>
                  <tspan dx="0" dy="0" style="fill:dodgerblue; font-size:120px;"> &#9407;</tspan>
                 <tspan dx="0" dy="0"> &#9408;</tspan>
                <tspan dx="0" dy="0"> &#9409;</tspan> 
               <tspan dx="0" dy="0"> &#9410;</tspan>    
              <tspan dx="0" dy="0" style="fill:yellowgreen; font-size:120px;"> &#9411;</tspan>
             <tspan dx="0" dy="0"> &#9412;</tspan>
            <tspan dx="0" dy="0"> &#9413;</tspan>
           <tspan dx="0" dy="0"> &#9414;</tspan> 
          <tspan dx="0" dy="0"> &#9415;</tspan> 
         <tspan dx="0" dy="0"> &#9416;</tspan>
        <tspan dx="0" dy="0" style="fill:gold; font-size:120px;"> &#9417;</tspan>
       <tspan dx="0" dy="0"> &#9418;</tspan> 
      <tspan dx="0" dy="0"> &#9419;</tspan>    
     <tspan dx="0" dy="0"> &#9420;</tspan>
      <tspan dx="0" dy="0"> &#9421;</tspan>
       <tspan dx="0" dy="0"> &#9422;</tspan>
        <tspan dx="0" dy="0" style="fill:crimson; font-size:120px;"> &#9423;</tspan>       
        <animate  attributeName="startOffset" from="100%" to="-20%" begin="svg1.click" dur="20s" repeatCount="indefinite"/>
        </text>
    </textPath> 
    
  <path class="st0" d="M1215.7,395c0-147.7-135.7-267.9-302.4-267.9H445.7C279,127.1,143.3,247.2,143.3,395H1     c0-53.2,11.8-104.8,35-153.4c22.4-46.9,54.5-89,95.3-125.2S219.6,51.8,272.6,32C327.5,11.4,385.7,1,445.7,1h467.6     c60,0,118.3,10.4,173.1,31c53,19.8,100.5,48.2,141.3,84.4s72.9,78.3,95.3,125.2c23.2,48.6,35,100.2,35,153.4L1215.7,395z" />
     
      <path class="st1" d="M1230,377c-10.2-156-152.9-263.4-316.7-263.4H445.7c-165.9,0-310.1,110.2-317,269.4" />
         
      <path class="st2" d="M17.6,377.1c3.6-43,14.5-92.7,32.4-130.2c21.6-45.3,52.6-86,92-120.9c39.4-34.9,85.3-62.3,136.5-81.5c53-19.9,109.2-29.9,167.2-29.9h467.6c58,0,114.2,10.1,167.2,29.9c51.1,19.2,97.1,46.6,136.5,81.5c39.4,34.9,70.4,75.6,92,120.9
            c18.7,39.2,29.7,91.8,32.9,136.2" /> 
     <rect x="0" y="398" width="1400" height="800" fill="white" />      
    </svg>

<tspan dx="0" dy="30" style="fill:red; font-size:120px;"> &#9398;</tspan>

Свободный перевод ответа от участника @Alexandr_TT.

2

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
   <!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 900 400" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <path id="motion" d="m 119.81679,209.71055 -1.74551,1.62083 -1.99487,0.74808 -1.87019,0.12468 -1.74551,0.24936 h -1.74551 -1.87019 -1.37147 -0.74808 l -1.24679,0.24935 h -0.99743 l -1.74551,0.12468 -0.74808,-0.24936 h -0.37404 -0.87275 l -0.997435,-0.12467 h -1.246793 l -1.246793,-0.12468 -2.244228,-0.37404 -1.37147,-0.37404 h -0.748078 l -0.498716,-0.12468 -0.498718,-0.49872 -1.246791,-0.49871 -0.374039,-0.37404 -0.374038,-0.37404 -0.249357,-0.74808 v -0.87275 l 0.124677,-0.87275 0.12468,-0.87276 -0.12468,-1.24679 v -0.74808 -0.74808 l 0.12468,-0.49871 -0.12468,-0.6234 h -0.124677 v -0.37404 l 0.374036,-0.49871 0.374039,-1.24679 0.12468,-44.75987 0.249356,-16.8317 -0.498716,-0.99743 -0.249359,-0.87276 0.249359,-2.36891 0.12468,-1.74551 0.249359,-0.87275 0.249357,-1.37147 0.249359,-0.99744 0.997434,-1.62083 0.872755,-2.49358 0.623398,-1.62083 0.249356,-0.87276 0.498719,-1.49615 0.623395,-1.24679 0.374039,-0.87276 0.623395,-1.24679 0.374039,-1.24679 0.374039,-1.2468 0.623395,-0.99743 0.374039,-1.49615 0.12468,-0.6234 0.249356,-1.37147 0.872755,-0.99743 0.124679,-2.61827 V 85.405308 l 3.116983,-0.872754 1.87019,-0.24936 1.99487,0.24936 h 1.74551 0.87275 l 1.49615,0.623395 v 22.442271 l 7.10672,19.94869 1.37147,2.9923 0.49872,1.62083 v 1.24679 l 0.24936,2.49358 -0.12468,1.62084 -0.49872,0.37403 0.49872,63.58644 0.49872,0.49871 z" />
    </defs>
    <path
      fill="none"
      stroke="lightgrey"
      d="m 119.81679,209.71055 -1.74551,1.62083 -1.99487,0.74808 -1.87019,0.12468 -1.74551,0.24936 h -1.74551 -1.87019 -1.37147 -0.74808 l -1.24679,0.24935 h -0.99743 l -1.74551,0.12468 -0.74808,-0.24936 h -0.37404 -0.87275 l -0.997435,-0.12467 h -1.246793 l -1.246793,-0.12468 -2.244228,-0.37404 -1.37147,-0.37404 h -0.748078 l -0.498716,-0.12468 -0.498718,-0.49872 -1.246791,-0.49871 -0.374039,-0.37404 -0.374038,-0.37404 -0.249357,-0.74808 v -0.87275 l 0.124677,-0.87275 0.12468,-0.87276 -0.12468,-1.24679 v -0.74808 -0.74808 l 0.12468,-0.49871 -0.12468,-0.6234 h -0.124677 v -0.37404 l 0.374036,-0.49871 0.374039,-1.24679 0.12468,-44.75987 0.249356,-16.8317 -0.498716,-0.99743 -0.249359,-0.87276 0.249359,-2.36891 0.12468,-1.74551 0.249359,-0.87275 0.249357,-1.37147 0.249359,-0.99744 0.997434,-1.62083 0.872755,-2.49358 0.623398,-1.62083 0.249356,-0.87276 0.498719,-1.49615 0.623395,-1.24679 0.374039,-0.87276 0.623395,-1.24679 0.374039,-1.24679 0.374039,-1.2468 0.623395,-0.99743 0.374039,-1.49615 0.12468,-0.6234 0.249356,-1.37147 0.872755,-0.99743 0.124679,-2.61827 V 85.405308 l 3.116983,-0.872754 1.87019,-0.24936 1.99487,0.24936 h 1.74551 0.87275 l 1.49615,0.623395 v 22.442271 l 7.10672,19.94869 1.37147,2.9923 0.49872,1.62083 v 1.24679 l 0.24936,2.49358 -0.12468,1.62084 -0.49872,0.37403 0.49872,63.58644 0.49872,0.49871 z" />
    
<g  style="fill:blue;  font-size:15; font-weight:bold";>
   
   <text>
   <animateMotion dur="10s"   repeatCount="indefinite" rotate="auto" begin="4.3s">
    <mpath href="#motion" />
    </animateMotion>
     <tspan dy="-3">Д</tspan>
    </text>

      <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="3.9s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan dy="-3">а</tspan>
    </text>

      <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="3.3s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan dy="-3">н</tspan>
    </text>

      <text>
    <animateMotion dur="10s"   repeatCount="indefinite" rotate="auto" begin="3.0s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan dy="-3">а</tspan>
   </text>

    <text>
    <animateMotion dur="10s"   repeatCount="indefinite" rotate="auto" begin="2.7s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan dy="-3">л</tspan>
   </text>

    <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="2.4s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan dy="-3">и</tspan>
  </text>

    <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="2.1s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan dy="-3">в</tspan>
    </text>

    <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="1.8s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan dy="-3">а</tspan>
    </text>
    
    <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="1.5s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan dy="-3">й</tspan>
    </text>

    <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="0.9s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan dy="-3">у</tspan>
    </text>

    <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="0.6s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan dy="-3">ж</tspan>
    </text>

    <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="0.3s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan dy="-3">е</tspan>
    </text>
   
     <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto">
        <mpath href="#motion" />
      </animateMotion>
      <tspan dy="-3">!</tspan>
    </text>

</g>

  </svg>
 
</body>
</html>

2
  • Поздравляю с первым ответом! Добро пожаловать на Ruso. Много лишнего в вашем ответе, но работает. Посмотрите повнимательней мой ответ выше, тогда не придется писать команду анимации animateMotion для каждой буквы. За ответ (+) 13 ноя 2023 в 6:27
  • Теперь, с поднятием репутации вы можете плюсовать понравившиеся ответы 13 ноя 2023 в 11:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.