Всем привет.
Помогите пожалуйста сделать анимацию стрелы при наведении, как на Gif и анимацию ссылки. SVG и GIF прилагаются.
Пробовал добавить под стрелку "палку" чтобы просто смещать стрелку которая находилась поверх этой самой "палки", но выглядит это не красиво, ко всему прочему очень бросается в глаза, видно что наложены друг на друга две картинки. Если говорить про ссылку (вторая GIF), там даже представления нет как это сделать.
SVG вертикальной стрелки:
<svg xmlns="http://www.w3.org/2000/svg" width="23.585" height="14.323" viewBox="0 0 23.585 14.323" fill="none" stroke="#07af82" stroke-width="3" transform="rotate(90)">
<path d="M400.156,946h20.7" transform="translate(-400.156 -938.862)"/>
<path d="M399.785,935.5l6.263,5.908-6.263,6.263" transform="translate(-384.616 -934.406)"/>
</svg>
SVG обводки (мышки):
<svg xmlns="http://www.w3.org/2000/svg" width="30.294" height="46.371" viewBox="0 0 30 46" fill="#1160e8">
<path d="M32.347,17A14.953,14.953,0,0,0,17.2,31.754V48.617A14.953,14.953,0,0,0,32.347,63.371,14.953,14.953,0,0,0,47.494,48.617V31.754A14.953,14.953,0,0,0,32.347,17Zm11.54,31.617a11.544,11.544,0,0,1-23.081,0V31.754a11.544,11.544,0,0,1,23.081,0Z" transform="translate(-17.2 -17)"/>
</svg>
SVG стрелки для слайдера:
<svg xmlns="img/svg/arrow-next.svg" width="62.571" height="23.107" stroke="#fff" stroke-width="2" fill="none">
<path d="M400.156,946h60.765" transform="translate(-400.156 -935.497)"/>
<path d="M399.785,935.5l11.152,10.521L399.785,957.17" transform="translate(-349.801 -935.497)"/>
</svg>
Ну и для ссылки SVG стрелки:
<svg xmlns="http://www.w3.org/2000/svg" width="11.992" height="20.056" viewBox="0 0 11.992 20.056" fill="none" stroke="#1160e8" stroke-width="3">
<path d="M1300.558,1952.586l8.819-8.976-8.819-8.977" transform="translate(-1299.488 -1933.581)"/>
</svg>
P.S. Хотелось бы увидеть реализацию на CSS (без использования JavaScript), если это вообще возможно... Но в любом случае все рабочие варианты - это варианты и они нужны.