Как сделать анимация svg?

Question

[Alexander3928]

Как анимировать svg так чтобы поэтапно вырисовывался слева на право? А не сразу все углы

https://codepen.io/Alexxxsander/pen/GRBeqNj

Answer 1

[Максим]

Такие стрелки не так рисуются как в вашем случае.
Берётся обычный path и голочка вставляется через marker но я согласен с тем что код получается грамоздким
Опишите подробнее анимацию

<svg viewBox="0 0 300 50" width="300">
  <defs>
    <style>
      path{
        fill: none;
        stroke: #000;
        stroke-width: 2px;
        transition: 0.34s linear;
      }
    </style>
    <marker id="arrow" 
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="8"
      markerHeight="8"
      orient="auto-start-reverse">
      <path d="M-20,-20 5,5 -14,24"/>
    </marker>
  </defs>
  <path class="js_path" d="M5,24 100,24"  marker-end="url(#arrow)" />
</svg>

Но для анимации используем другой метод



Но можно анимировать path изменяя d



Хотя если вы хотите мелкие координаты в d =>