Magnetic arrow

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/hover/magnetic-arrow.html
  Desc   : Link arrow that stretches forward on hover
  ============================================================
-->
<a class="sg-magnetic-arrow" href="#sg-demo" style="--sg-color:#7F77DD; --sg-size:18px; --sg-duration:0.35s;">
  Read the story
  <svg viewBox="0 0 24 16" aria-hidden="true" focusable="false">
    <line class="sg-magnetic-arrow-shaft" x1="2" y1="8" x2="15" y2="8" />
    <polyline class="sg-magnetic-arrow-head" points="10,2.5 15.5,8 10,13.5" />
  </svg>
</a>
<style>
  .sg-magnetic-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: var(--sg-size);
    font-weight: 600;
    color: var(--sg-color);
    text-decoration: none;
  }
  .sg-magnetic-arrow svg {
    width: 1.35em;
    height: 0.9em;
    overflow: visible;
  }
  .sg-magnetic-arrow line,
  .sg-magnetic-arrow polyline {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--sg-duration) cubic-bezier(0.3, 1.5, 0.5, 1);
  }
  .sg-magnetic-arrow-shaft {
    transform-origin: left center;
    transform-box: fill-box;
  }
  .sg-magnetic-arrow:hover .sg-magnetic-arrow-shaft,
  .sg-magnetic-arrow:focus-visible .sg-magnetic-arrow-shaft {
    transform: scaleX(1.45);
  }
  .sg-magnetic-arrow:hover .sg-magnetic-arrow-head,
  .sg-magnetic-arrow:focus-visible .sg-magnetic-arrow-head {
    transform: translateX(6px);
  }
</style>