animated square stroke - css

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

  <path fill="white" stroke="black" stroke-width="4"  class="path" d="M 10 10 H 90 V 90 H 10 L 10 10"/>

  <!-- Points -->
  <circle cx="10" cy="10" r="2" fill="red"/>
  <circle cx="90" cy="90" r="2" fill="red"/>
  <circle cx="90" cy="10" r="2" fill="red"/>
  <circle cx="10" cy="90" r="2" fill="red"/>
</svg>

.path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: dash 8s linear  infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 320;
  }

  to {
    stroke-dashoffset: 0;
  }
}

Screenshot: