Arrows

Анимация стрелки с увеличением ее длины

• https://codepen.io/nxworld/pen/boRVKR
• https://codepen.io/shuta/pen/dXbyWz — без SVG в коде
• https://codepen.io/georgiacobrien/pen/BajydKz — похожая версия
• https://codepen.io/ChrisBup/pen/xLgobW — без SVG в коде

Пример на основе https://codepen.io/malavigne/pen/vodKrP

<!-- Right to left -->
<div class="arrow__animate left">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 74.5 7.3" style="enable-background:new 0 0 74.5 7.3;" xml:space="preserve">
    <path class="arrow__tip" d="M74.3,4.1c0.2-0.2,0.2-0.5,0-0.7l-3.2-3.2c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l2.8,2.8l-2.8,2.8c-0.2,0.2-0.2,0.5,0,0.7 s0.5,0.2,0.7,0L74.3,4.1z"></path>
    <rect class="arrow__handle" y="3.1" width="30" height="1.1"></rect>
  </svg>
</div>

/* 
  Анимированная стрелка состоит из двух SVG элементов:
  — rect — линия
  — path — острие
  В CSS меняем только длину линии.
*/

.arrow__animate.left {
  @apply brdr py-4 px-8 cursor-pointer text-white rotate-180;
  & svg {
    @apply w-[100px] fill-current transition-transform translate-x-0;
    transition: 0.3s;
    /* 
      В начальном состоянии уменьшаем длину линии.
      Устанавливаем точку отсчета анимаций - относительно правого конца линии.
    */
    & rect {
      @apply origin-right duration-300 scale-x-[85%];
    }
  }
  /* 
    При наведении одновременно изменяем размер линии до исходного 
    и смещаем линию по горизонтали.
  */
  &:hover {
    @apply bg-gray-800;
    & svg {
      @apply translate-x-[15%];
      & rect {
        @apply scale-x-100;
      }
    }
  }
}

Пример на основе https://codepen.io/jsomai/pen/GRNNvYV — выглядит наиболее ок

<svg id="left">
  <path d="M0.5 9.35772H20.9956L14.2001 2.29941L16.4134 0L27 11L16.4134 22L14.2001 19.7006L20.9956 12.6423H0.5V9.35772Z" fill="currentColor"></path>
</svg>
<svg id="right">
  <path d="M0.5 9.35772H20.9956L14.2001 2.29941L16.4134 0L27 11L16.4134 22L14.2001 19.7006L20.9956 12.6423H0.5V9.35772Z" fill="currentColor"></path>
</svg>

& svg {
  @apply brdr cursor-pointer;
  height: 22px;
  width: 60px;
  /* opacity: 0.5; */
  transition: 250ms all ease;
  & path {
    transition: 250ms all ease;
  }
  &:hover {
    opacity: 1;
  }
}
& svg#left{
  transform:rotate(180deg);
}
& svg:hover path {
  d: path("M0 9.35772H50.9956L44.2001 2.29941L46.4134 0L57 11L46.4134 22L44.2001 19.7006L50.9956 12.6423H0V9.35772Z");
}

Версия с Tison.com.ua

<button class="link-back">
  <svg xmlns="http://www.w3.org/2000/svg" width="70" height="33.403" viewBox="0 0 70 33.403">
    <path d="m19.999 15.775 13.85-15.775 2.2856 2.0077-10.739 12.231h44.603v3.042h-44.959l11.154 14.247-2.3961 1.8749z" stroke-width="1.014"/>
  </svg>
</button>

button.link-back {
  @apply cursor-pointer;
  & svg {
    @apply w-[70px] h-[33.403px] fill-current;
    & path {
      transition: 250ms all ease;
    }
  }
  &:hover svg path {
    d: path("m0 15.775 13.85-15.775 2.2856 2.0077-10.739 12.231h64.603v3.042h-64.959l11.154 14.247-2.3961 1.8749z");
  }
}