JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<svg width="200" height="100" viewPort="0 0 200 100">
  <path d="M10,10L100,10L10,20L100,20L10,30L100,30">
    <animate attributeName="d"
      from="M10,10L11,10"
      to="M10,10L100"
      dur="3s"
      values="M10,10L11,10;M10,10L100,10"
      repeatCount="1"
      id="l1"/>
     <animate attributeName="d"
      from="M10,10L100,10L10,20"
      to="M10,10L100,10L10,20L100,20"
      dur="3s"
      values="M10,10L100,10L10,20L11,20;M10,10L100,10L10,20L100,20"
      repeatCount="1"
      id="l2"
      begin="l1.end"/>
     <animate attributeName="d"
      from="M10,10L100,10L10,20L100,20L10,30"
      to="M10,10L100,10L10,20L100,20,L10,30L100,30"
      dur="3s"
      values="M10,10L100,10L10,20L100,20L10,30L11,30;M10,10L100,10L10,20L100,20L10,30L100,30"
      repeatCount="1"
      id="l3"
      begin="l2.end"/>
     
  </path>
</svg>

SCSS

svg {
  stroke-width: 9px;
  stroke: red;
  stroke-dasharray: 90 91 89 91 90 91;
  fill: transparent;
}

JavaScript

const imgStr =...