JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<svg width="300" height="300">
  <rect x="50" y="50" width="100" height="100" stroke-dasharray="0 400 0 0" stroke-dashoffset="70"/>
</svg>
<button id='manual'>
click me!
</button>

CSS

rect {
  stroke: #ba55da;
  fill: none;
  stroke-width: 4;
}
rect#trans {
  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: 140;
  stroke-dasharray: 400 0 400 0;
  width: 200px;
  height: 200px;
  x: 10px;
  y: 10px;
}
button {
  position: absolute;
  top: 350px;
}

JavaScript

var dir;
function beep() {
    var snd = new...