Я пытаюсь воссоздать следующую анимацию:
У меня проблемы с правильной анимацией линии вокруг углов.
Я пробовал использовать такой элемент анимации - animateMotion:
<line class="testLine" x1="10" y1="10" x2="100" y2="10" stroke="white">
<animateMotion dur="1.6s" repeatCount="indefinite"
path="M 10 10 L 390 10
M 390 10 L 390 290
M 390 290 L 10 290
M 10 290 L 10 10">
</animateMotion>
</line>
Но линия не плавно закругляет углы.
Есть идеи, как заставить её плавно перемещаться по углам, как показано в GIF выше?
Свободный перевод вопроса Smoothly move an SVG line along a rectangular path от участника @HaakonFlaar.