JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<svg viewBox="0 0 460.3 46.2"> 
<path class="path" d="M-.333 28.333h35.633c.458 0 .909-.121 1.305-.351l8.131-4.721c.956-.555 2.159-.445 2.998.276l9.999 8.589c.932.801 2.298.839 3.274.092l5.458-4.18c.455-.349 1.013-.537 1.586-.536l75.172.163c.61.001 1.201-.212 1.669-.602l1.356-1.13c1.072-.893 2.658-.781 3.593.255l1.732 1.919c1.281 1.419 3.603 1.017 4.332-.751l4.171-10.117c.836-2.027 3.652-2.172 4.691-.241l9.375 17.426c.961 1.786 3.506 1.832 4.531.082l2.964-5.061c.805-1.374 2.645-1.708 3.881-.703l.398.323c1.313 1.067 3.278.615 3.994-.918l.786-1.685c.682-1.461 2.515-1.955 3.839-1.034l4.464 3.105c.436.303.953.465 1.484.465h55.904c.703 0 1.373-.28 1.861-.785 1.27-1.315 3.761-3.794 4.253-3.548.321.161 1.803 1.482 3.252 2.808 1.422 1.301 3.716.653 4.25-1.199l5.193-18.03c.72-2.499 4.257-2.508 4.99-.014l8.714 29.629c.694 2.36 3.975 2.524 4.901.245l2.437-5.998c.639-1.574 2.592-2.121 3.956-1.109 1.293.959 3.138.524 3.866-.911l2.667-5.257c.842-1.659 3.103-1.922 4.303-.501l3.022 3.578c.496.587 1.226.925 1.994.922l46.629-.159c.721-.002 1.406-.305 1.897-.833.569-.612 1.305-1.338 1.595-1.338.201 0 .887.619 1.635 1.36 1.217 1.205 3.243.938 4.093-.549l5.927-10.372c1.017-1.779 3.597-1.737 4.554.075l9.903 18.745c.884 1.673 3.202 1.871 4.356.372l3.494-4.535c.98-1.272 2.867-1.36 3.961-.185l.101.109c1.165 1.251 3.2 1.056 4.106-.393l2.538-4.06c.807-1.291 2.545-1.615 3.763-.702l5.044 3.783c.45.337.997.52 1.559.52h38.967"/>
</svg>

CSS

.path {
  stroke :#EE463B;
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 579.118;
  stroke-dashoffset: 0;
  animation: dash 5s infinite linear;
}
@keyframes dash {
  from {
    stroke-dashoffset: 579.118;
  }
}

JavaScript

/*
 
 Ответ на вопрос: https://toster.ru/q/429047
 
 */