Как можно сделать такую анимацию на js?

Question

[Kipsi]

Здравствуйте. Подскажите как можно сделать такую же анимацию обводки круга на js. Только нужно что бы при наведении на круг как бы применялся :hover и круг начинал заполняться как сейчас, а когда мышку убираешь он начинал с того же места до которого успел заполнится обратно уходить?

Comments

[Виталий Воронов]

Она же и сделана на js, нет? JS изменяет CSS свойство SVG элемента.
Сейчас js обрабатывает событие наведения мыши на элемент. Чтобы получился эффект :hover, нужно обработать событие ухода мыши с элемента "mouseleave".
Подробно об этих событиях: здесь

Answer 1

[Михаил]

Answer 2

[WbICHA]

let btn = document.querySelector('.btn')
let circle = document.querySelector('.inner-circle')

let interval;
let fill = 433;
btn.addEventListener('mouseenter', () => {
  clearInterval(interval);
  interval = setInterval(() => {
    if(fill < 5) {
      fill = 0;
      circle.style.strokeDashoffset = fill;
      clearInterval(interval);
      return;
    }
    fill -= 5;
    circle.style.strokeDashoffset = fill;
  }, 10);
});

btn.addEventListener('mouseleave', () => {
  clearInterval(interval);
  interval = setInterval(() => {
    if(fill > 428) {
      fill = 433;
      circle.style.strokeDashoffset = fill;
      clearInterval(interval);
      return;
    }
    fill += 5;
    circle.style.strokeDashoffset = fill;
  }, 10);
});

Answer 3

[Алексей Ярков]

Обработчик на mouseover и анимацию в обратном порядке