Star spin

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/hover/star-spin.html
  Desc   : Star that spins and scales up on hover
  ============================================================
-->
<button class="sg-star-spin" type="button" aria-label="Favorite" style="--sg-color:#EFBB33; --sg-size:56px; --sg-duration:0.4s;">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <polygon points="12,2.5 14.9,9 22,9.7 16.7,14.5 18.2,21.5 12,17.8 5.8,21.5 7.3,14.5 2,9.7 9.1,9" />
  </svg>
</button>
<style>
  .sg-star-spin {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    width: var(--sg-size);
    height: var(--sg-size);
    display: inline-grid;
    place-items: center;
  }
  .sg-star-spin svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .sg-star-spin polygon {
    fill: var(--sg-color);
    stroke: var(--sg-color);
    stroke-width: 1;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--sg-duration) cubic-bezier(0.35, 1.6, 0.6, 1);
  }
  .sg-star-spin:hover polygon,
  .sg-star-spin:focus-visible polygon {
    transform: rotate(72deg) scale(1.18);
  }
</style>