Scaling an SVG shape from the center of the shape

index.html

<svg viewbox="0 0 300 300">
  <rect id="my-rect" x="50" y="50" width="100" height="80" />
</svg>;

styles.css

#my-rect {
  transform: scale(1);
  transform-box: fill-box; // <- This is the magical property that makes it work
  transform-origin: center;
  
  animation: scaleBox 1s infinite alternate ease-in-out;
}

@keyframes scaleBox {
  to {
    transform: scale(2);
  }
}