JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<div class="container">
  Наведите мышку
  <svg viewBox="0 0 800 600">
    <path id="e-dashed" fill="none" stroke="#7AACF9" stroke-width="2" stroke-miterlimit="10" d="M798.877,154.009v252.774
				c0,21.682-17.639,39.32-39.32,39.32h-719c-21.683,0-39.32-17.639-39.32-39.32V193.33c0-21.682,17.638-39.32,39.32-39.32H798.877z
				" />
    <path id="e-cover" fill="none" stroke="#999" stroke-width="4" stroke-miterlimit="10" d="M798.877,154.009v252.774
				c0,21.682-17.639,39.32-39.32,39.32h-719c-21.683,0-39.32-17.639-39.32-39.32V193.33c0-21.682,17.638-39.32,39.32-39.32H798.877z
				" />
  </svg>
</div>

CSS

.container {
  background-color: #FFF
}

.container:hover {
  cursor: pointer
}

#e-dashed {
  stroke-dasharray: 10, 10;
}

#e-cover {
  transition: stroke-dashoffset 1s;
  stroke-dashoffset: 0;
  stroke-dasharray: 2200, 2200;
  stroke: #FFF;
}

.container:hover #e-cover {
  stroke-dashoffset: -2200
}

JavaScript

/**
 * для вопроса https://toster.ru/q/455629
 * Как отрисовать контур в SVG?
 */