JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<svg width="300" height="300">
  <rect x="50" y="50" width="100" height="100"/>
</svg>

CSS

rect {
  stroke: #ba55da;
  fill: none;
  stroke-width: 4;
  stroke-dasharray: 5 390 5 0;
  stroke-dashoffset: 70;
  transition: stroke-dashoffset 2s linear, stroke-dasharray 2s linear, x 2s linear, y 2s linear, width 2s linear, height 2s linear;
}
svg:hover rect{
  stroke-dashoffset: 840;
  stroke-dasharray: 400 0 400 0;
  width: 200px;
  height: 200px;
  x: 10px;
  y: 10px;
}