Button effect - how to implement it without a library?

Question

Animation

I want to create exactly the same effect when hovering over an svg object like on this site animejs.com/.
To do this, I opened inkscape, drew a path and saved two states before and after hover.
first state :

<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>

second state

<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>

most likely it needs to be done in js / jquery , tell me how can I implement this effect ? how can I change the path in such a flexible way ?

Answer 1

Got two answers: https://stackoverflow.com/a/53458006/10697995