How do I use an animated SVG for navbar link hover, and position it properly?

Question

I’m building my portfolio and it has a theme as if it's been drawn on paper.

When you hover over a link on my navbar, the SVG animates from underneath, it's an arrow that points to the link and it looks like it's been drawn with a sharpie. I would also like to animation to reverse on mouse out, instead of just disappearing.

The animation works awesomely on hover (by itself), exactly as I want, however I cannot figure out how to make it appear on a navbar link hover instead. Also, I'm unsure how to position it. Currently I have the SVG placed after my <a> tags.

Here's the code:

div {
  border: 1px black solid;
  width: 120px;
  height: 150px;
  text-align: center;
}

#arrowSVG:hover path {
  animation: nav_arrow 800ms linear 1 normal forwards;
}

@keyframes nav_arrow {
  0%,
  100% {
    stroke-dashoffset: 228.816432;
  }
  60% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<div>
  <p> Hover me!
    </>
    <svg id="arrowSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
      <path id="eZuEQXWsHpA2" d="M81.33906,95.61239c-2.04913-2.92733-15.33188-23.55344-18.27718-23.9216-2.1176-.2647-6.39806,6.74064-9.13859,
                      5.64442-1.72253-.68901-.23957-19.37568,1.07513-20.42744.35406-.28324,17.10175,10.91579,16.93327,12.09519-.24773,1.73411-10.42713,
                      4.21185-12.09519,4.56929-2.16723.46441-8.43321,2.60391-6.45077,1.61269c3.20375-1.60188,6.85172-2.25839,9.67615-4.56929.39226-.32094,
                      1.55594-1.2354,1.07513-1.07513-.88133.29378-11.28885,4.35372-11.28885,4.30051c0-2.22645,10.47757-5.91321,12.36397-5.91321c1.02153,
                      0-1.18114-1.93573-2.15025-1.61269-2.93453.97818-11.8009,6.50634-9.94494,4.03173c2.11065-2.81419,10.07996-2.15151,11.02006-4.03173.26335-.5267-10.04599,
                      1.11958-10.4825.53757-2.04355-2.72474,8.60103-2.59902,8.60103-3.76295c0-1.26705-8.19827,1.07445-8.86981,0-.76572-1.22515,1.75021-2.86552,
                      2.15026-3.49417.30422-.47805.18968-1.16541.53756-1.61269c1.16554-1.49856,2.42055,6.98982,3.76296,8.33224c4.42514,4.42514,10.96031-4.00183,9.40736,3.76295" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="228.816432" stroke-dasharray="228.816432" />
</div>