JSFiddle - React, Tailwind, and code Playground

by Dominic Myers

HTML

<!--

M = Move to x  y
C = Curve to x1 y1, x2 y2, x y
S = Curve but assumes that the 
    'C's x2 and y2 are the first 
    set of co-ordinates then 
    x1 and y2 of the 'S' and 
    this one's x2 and y2 and the 
    line finishes at x y

-->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 80 
           C 40 10, 65 10, 95 80 
           S 150 150, 180 80
           L 180 180
           H 10
           Z"/>
</svg>

SCSS

svg {
  path {
    fill: black;
    stroke-width: 10px;
    stroke: #000;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: 2s;
  }
  &:hover path {
    d: path("M 10 80 \
            C 42.5 80, 42.5 80, 95 80 \
            S 137.5 80, 180 80 \
            L 180 180 \
            H 10 \
            Z");
  }
}