spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/hover/magnetic-arrow.html7  Desc   : Link arrow that stretches forward on hover8  ============================================================9-->10<!--svgarden11title: Magnetic arrow12slug: magnetic-arrow13category: hover14tags: [hover, arrow, link, micro-interaction]15difficulty: beginner16techniques: [transition, translateX, scaleX, transform-origin-left]17how_it_works: >18  The arrow is two parts with two different jobs: the shaft is a line that19  scaleX-stretches from its left edge (transform-origin: left keeps the tail20  pinned), while the head is a polyline that translateX-slides forward. Because21  both transitions share one duration and easing, they read as a single elastic22  gesture. A springy cubic-bezier with a y-value above 1 adds the magnetic23  overshoot on arrival.24customizable:25  - { var: "--sg-color",    label: "Color", type: color, default: "#7F77DD" }26  - { var: "--sg-size",     label: "Size",  type: range, min: 14, max: 32, default: 18, unit: px }27  - { var: "--sg-duration", label: "Speed", type: range, min: 0.1, max: 1, step: 0.05, default: 0.35, unit: s }28created: 2026-08-1029-->30<a class="sg-magnetic-arrow" href="#sg-demo" style="--sg-color:#7F77DD; --sg-size:18px; --sg-duration:0.35s;">31  Read the story32  <svg viewBox="0 0 24 16" aria-hidden="true" focusable="false">33    <line class="sg-magnetic-arrow-shaft" x1="2" y1="8" x2="15" y2="8" />34    <polyline class="sg-magnetic-arrow-head" points="10,2.5 15.5,8 10,13.5" />35  </svg>36</a>37<style>38  .sg-magnetic-arrow {39    display: inline-flex;40    align-items: center;41    gap: 0.45em;42    font-size: var(--sg-size);43    font-weight: 600;44    color: var(--sg-color);45    text-decoration: none;46  }47  .sg-magnetic-arrow svg {48    width: 1.35em;49    height: 0.9em;50    overflow: visible;51  }52  .sg-magnetic-arrow line,53  .sg-magnetic-arrow polyline {54    fill: none;55    stroke: var(--sg-color);56    stroke-width: 2.2;57    stroke-linecap: round;58    stroke-linejoin: round;59    transition: transform var(--sg-duration) cubic-bezier(0.3, 1.5, 0.5, 1);60  }61  .sg-magnetic-arrow-shaft {62    transform-origin: left center;63    transform-box: fill-box;64  }65  .sg-magnetic-arrow:hover .sg-magnetic-arrow-shaft,66  .sg-magnetic-arrow:focus-visible .sg-magnetic-arrow-shaft {67    transform: scaleX(1.45);68  }69  .sg-magnetic-arrow:hover .sg-magnetic-arrow-head,70  .sg-magnetic-arrow:focus-visible .sg-magnetic-arrow-head {71    transform: translateX(6px);72  }73</style>74