JSFiddle - React, Tailwind, and code Playground

svg squircle

by Travis Almand

HTML

<svg viewbox="0 0 50 50" height="100" width="100">
  <path d="M25,2 C48,2 48,2 48,25  C48,48 48,48 25,48 C2,48 2,48 2,25 C2,2 2,2 25,2 Z" />
</svg>

SCSS

svg {
  fill: gainsboro;
  stroke: rebeccapurple;
  stroke-width: 2px;
  stroke-dasharray: var(--dashArray);
  stroke-dashoffset: var(--dashOffset);
  
  &:hover {
    --dashOffset: 0 !important;
    transition: stroke-dashoffset 200ms;
  }
}

JavaScript

let svg = document.querySelector('svg');
let length = svg.querySelector('path').getTotalLength();

svg.style.setProperty('--dashArray', `${length}px`);
svg.style.setProperty('--dashOffset', `${length}px`);