spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/hover/star-spin.html7  Desc   : Star that spins and scales up on hover8  ============================================================9-->10<!--svgarden11title: Star spin12slug: star-spin13category: hover14tags: [hover, star, rotate, transition]15difficulty: beginner16techniques: [transition, transform-box, rotate, scale, focus-visible]17how_it_works: >18  No keyframes here — just a transition on transform. Hovering (or keyboard-19  focusing) the button rotates the polygon 72°, exactly one point of a20  five-pointed star, so it lands looking identical to where it started while21  clearly having moved. transform-box: fill-box makes the star rotate around22  its own center; without it, SVG children rotate around the top-left of the23  viewport and fly off in an arc.24customizable:25  - { var: "--sg-color",    label: "Color", type: color, default: "#EFBB33" }26  - { var: "--sg-size",     label: "Size",  type: range, min: 24, max: 120, default: 56, unit: px }27  - { var: "--sg-duration", label: "Speed", type: range, min: 0.1, max: 1.5, step: 0.05, default: 0.4, unit: s }28created: 2026-08-1029-->30<button class="sg-star-spin" type="button" aria-label="Favorite" style="--sg-color:#EFBB33; --sg-size:56px; --sg-duration:0.4s;">31  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">32    <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" />33  </svg>34</button>35<style>36  .sg-star-spin {37    appearance: none;38    border: 0;39    padding: 0;40    background: transparent;41    cursor: pointer;42    width: var(--sg-size);43    height: var(--sg-size);44    display: inline-grid;45    place-items: center;46  }47  .sg-star-spin svg {48    width: 100%;49    height: 100%;50    overflow: visible;51  }52  .sg-star-spin polygon {53    fill: var(--sg-color);54    stroke: var(--sg-color);55    stroke-width: 1;56    stroke-linejoin: round;57    transform-box: fill-box;58    transform-origin: center;59    transition: transform var(--sg-duration) cubic-bezier(0.35, 1.6, 0.6, 1);60  }61  .sg-star-spin:hover polygon,62  .sg-star-spin:focus-visible polygon {63    transform: rotate(72deg) scale(1.18);64  }65</style>66