JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" class="svg" id="svg1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
  <set id="xxx" xlink:href="#yyy" attributeName="visibility" to="hidden" begin="0s" dur="1s" />

  <g id="yyy">
    <path d="
             M 20,20 
             L 200,20 
             L 200,110 
             L 20,110 
             z"
          fill="none" 
          stroke="black" 
          stroke-width="2" 
          stroke-dasharray="540"
          stroke-dashoffset="0">

      <animate id="p1" 
               attributeName="stroke-dashoffset" 
               values="540; 0" 
               calcMode="linear"
               dur="5s"
               begin="xxx.end">
      </animate>
    </path>

    <path d="
             M 23,23
             L 197,23
             L 197,107
             L 23,107
             z"
          fill="none" 
          stroke="black" 
          stroke-width="2"
          stroke-dasharray="516"
          stroke-dashoffset="0">

      <animate id="p2" 
               attributeName="stroke-dashoffset" 
               values="516; 0" 
               repeatCount="1"
               fill="remove"
               calcMode="linear"
               dur="5s"
               begin="xxx.end">
      </animate>
    </path>

    <path d="
             M 90,110
             L 90,170"
          fill="none" 
          stroke="black" 
          stroke-width="2"
          stroke-dasharray="60"
          stroke-dashoffset="0">

      <animate id="p3" 
               attributeName="stroke-dashoffset" 
               values="60; 0" 
               repeatCount="1"
               fill="remove"
               calcMode="linear"
               dur="5s"
               begin="xxx.end">
      </animate>
    </path>

    <path d="
             M 120,110
             L 120,170"
          fill="none" 
          stroke="black" 
          stroke-width="2"
          stroke-dasharray="60"
          stroke-dashoffset="0">

      <animate id="p4" 
              ...

CSS

svg {
  width: auto;
  margin: auto;
  position: absolute;
  top: 25%;
  left: 25%;
}