<svg viewBox="0 0 20 20">
  <path d="
     M 8 0
     L 12 0
     L 12 8
     L 20 8
     L 20 12
     L 12 12
     L 12 20
     L 8 20
     L 8 12
     L 0 12
     L 0 8
     L 8 8
     L 8 0
  "></path>
</svg>

svg:hover path {
    /* Careful with line-breaks in here, Chrome 90 didn't like them and broke this so I removed them */
    d: path("M 10 0 L 10 0 L 13 7  L 20 10 L 20 10 L 13 13 L 10 20 L 10 20 L 7 13 L 0 10 L 0 10 L 7 7 L 10 0");
}
path {
  transition: 0.2s;
}

svg {
  fill: red;
  width: 200px;
  height: 200px;
}

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center;
}