Эффект для кнопки — как реализовать без библиотеки?

Question

[Максим]

Я хочу создать точно такой же эффект при наведении на объект svg, как на этом сайте animejs.com/.

Для этого я открыл inkscape, нарисовал контур и сохранил два состояния до и после наведения.

первое состояние:

<svg viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
  <path d="m11 103c64-2.5 123-1.5 178 0v42c-61 3.5-120 0.43-178 0z"
 style="fill:none; stroke:#ff17ff;"/>
</svg>

второе состояние

<svg viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
 <path d="m11 103c62-7.8 121-6.3 178 0v42c-61 9.7-120 6.3-178 0z" 
       style="fill:none;stroke:#ff17ff"/>
</svg>

скорее всего нужно сделать в js / jquery , подскажите как можно реализовать этот эффект ?как я могу изменить путь таким гибким способом ?

Answer 1

[Максим]

Ответов получил два: https://stackoverflow.com/a/53458006/10697995