JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<svg viewBox="0 0 52 52">
  <path class="animated-path" stroke="#000000" fill="transparent" d="M30.825 12L19.94 28.762c-1.704 2.624-5.213 3.37-7.837 1.665-2.624-1.704-3.37-5.212-1.666-7.837 1.705-2.624 5.213-3.37 7.837-1.665l15.63 10.15c2.625 1.704 6.134.96 7.838-1.665 1.704-2.625.958-6.133-1.666-7.837-2.624-1.704-6.133-.96-7.837 1.665L21.353 40"
  />
</svg>

CSS

.animated-path {
  stroke-dasharray: 113;
  stroke-dashoffset: 226;
  animation: dash 2s linear alternate infinite;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 226;
  }
  50% {
    stroke-dashoffset: 113;
  }
  100% {
    stroke-dashoffset: 226;
  }
}

JavaScript

var path = document.querySelector('.animated-path');
console.log(path.getTotalLength())