Animate irregular SVG fill path

Question

I'm trying to create a neat little animation based on the video game Life is Strange. So far, I've been able to at least somewhat simulate the in-game text animation, but I'm stuck on the second part.

What I want to do is animate this spiral from "full" to "empty" in a motion which follows the spiral's path, like the in-game original.

Given that this is,

1. not using strokes, and
2. is using a d path,

how would you go along creating this animation? I'm fairly new to manipulating and animating SVG's, so all I've been able to think of so far is SVG.js and Vivus, neither of which works (SVG.js because it's a d path, Vivus because it's not using stroke).

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 227.3 209.5">
    <path id="Spiral" d="M81.4,68.2c-0.4,8.5,1.7,16.4,6.7,23.3c4.6,6.4,10.8,11.1,18.1,14.3c4.6,2,9.4,3.7,14.5,3.9 c6.4,0.2,12.8-0.3,18.2-3.9c6.6-4.3,12.1-9.6,14.6-17.4c0.8-2.5,2.1-4.8,2.4-7.5c0.5-4.2-0.1-8.2-1.7-12.1 c-4.1-9.6-10.8-16.8-20.8-20.2c-11.6-4-22.9-3-33.1,4.5c-4.4,3.2-7.2,7.6-8.4,12.9c-0.5,2.2-1.3,4.3-1.4,6.5 c-0.2,7.4,2.5,13.6,7.8,18.7c7.3,7.1,16,9.4,25.6,6.9c9.3-2.4,13.8-9.7,13-19.3c-0.7-8.7-6.2-14.9-15.1-17.5c-2.4-0.7-4.9-1.5-7.5-1 c-3.1,0.6-5.5,2.3-6.9,5.2c-3.8,8.3,0.7,17.3,9.4,19.2c4.1,0.9,8.4-1.5,9.9-5.5c0.4-1.1,0.8-2.2,1.1-3.4c0.5-2.1-0.4-3.3-2.6-3.5 c-2-0.1-3.9,0-5.9,0.2c-1.4,0.2-2.1,1.5-1.6,2.9c0.4,1.1,1.1,1.9,1.8,2.8c0.5,0.6,0.9,1.2,0.3,1.9c-0.6,0.7-1.3,1-2.2,0.7 c-0.5-0.2-1-0.5-1.4-0.9c-1.2-1.3-2-2.8-2.4-4.5c-0.6-2.2,1.4-5,3.9-5.7c2.7-0.7,5.6-1.2,8.4-0.8c3.5,0.4,5.4,2.6,5.3,6.1 c-0.1,4.6-2.3,8.2-5.5,11c-2.8,2.5-6.5,3-10,2c-6.8-1.8-11.7-6.1-13.5-13.1c-1.5-5.8,1.2-13.9,8.1-17.2c2.6-1.2,5.2-1,7.9-0.8 c6.2,0.4,11.2,3.4,15.7,7.5c3.8,3.6,5.6,8.2,6.3,13.2c0.5,3.2,0.1,6.3-0.6,9.4c-1.2,5.7-5.1,9.4-9.8,12.3c-3.5,2.2-7.4,3-11.4,3.1 c-9,0.3-16.8-2.8-23.3-8.9c-4.5-4.2-6.7-9.6-7.9-15.4c-2.7-13,6-27.1,15.7-31.3c19.5-8.4,38.4-3.2,50.4,13c3.6,4.9,5.6,10.6,6,16.7 c0.3,4.6-0.8,9.1-2.7,13.3c-3,6.7-7.4,12.5-13.2,17c-5.7,4.5-12.3,6.2-19.6,6.5c-10.1,0.3-19-2.9-27.2-8.6c-4-2.8-7.8-5.8-10.9-9.6 c-4.7-5.7-6.9-12.4-7.8-19.7c-0.5-4-0.8-8-0.5-12.1c0.6-8.2,3.4-15.6,8.6-22c5.2-6.5,11.3-11.8,18.8-15.5c1.6-0.8,3.3-1.3,5-1.7 c0.4-0.1,0.8-0.1,0.9-0.8c0.4-4.5,4.8-8.1,10.6-7.3c3.9,0.5,5.8,2.8,5.7,6.7c0,1.1,0.4,1.5,1.3,1.8c5.9,2,11.6,4.6,16.5,8.5 c4.2,3.3,8.7,6.2,12.4,10c4.1,4.2,7.9,8.6,11.6,13.1c3.5,4.3,4.8,9.5,5.7,14.8c1.3,7.3-0.4,14.2-2.3,21.1 c-2.1,7.8-5.7,15.1-10.1,21.9c-4.1,6.2-9.9,10.6-16.7,13.7c-2.7,1.2-5.6,1.4-8.5,1.8c-5.1,0.6-10.2,0.7-15.3-0.2 c-12.6-2.2-24.7-5.8-36.2-11.7c-7.7-3.9-14.3-9-20-15.4c-3.1-3.5-5.1-7.9-7.5-11.8c-4.4-7.2-5.9-15.1-5.8-23.3 c0.1-7.2,2.4-13.8,5.6-20.2c2-3.9,4.1-7.7,6.2-11.5c1-1.8,2.4-3.3,3.8-4.7c1.4-1.4,2.8-2.7,4.2-4.1c0.5-0.4,1-0.8,1.6-1.1 c0.9-0.4,1.7-0.3,2.3,0.6c0.6,0.9,0.4,1.6-0.3,2.2c-0.7,0.6-1.5,1.2-2.2,1.9c-3.8,3.3-6.7,7.3-9,11.8c-2.9,5.7-5.9,11.2-7.5,17.5 c-2.3,8.8-1.4,17.4,2.3,25.6c2.6,5.8,6,11.2,10.1,16.1c4.4,5.2,9.7,9.1,15.8,12.1c9.4,4.6,19,8.7,29.2,11.1 c7.6,1.8,15.4,2.4,23.2,1.6c6-0.6,10.9-3.6,15.6-7.2c3-2.3,5.3-5.1,7.1-8.3c3.3-5.8,6.6-11.5,8.5-17.9c1.5-5.2,2.9-10.5,2.8-16 c-0.1-3-0.4-5.9-1-8.8c-0.8-4-2.9-7.2-5.3-10.4c-5.2-7-11.8-12.6-18.2-18.4c-5.5-4.9-12-8-18.8-10.6c-0.3-0.1-0.7-0.2-1-0.3 c-0.5-0.2-0.9-0.2-1.2,0.5c-0.7,2-2.2,3-4.3,3.3c-2.2,0.3-4.4,0.3-6.5-0.6c-1.6-0.7-2.8-1.7-3.5-3.2c-0.2-0.5-0.5-0.7-1.1-0.5 c-12.1,5-21.5,12.7-27.2,24.7c-1.4,3-1.7,6.3-2,9.6C81.6,63.9,81.5,66,81.4,68.2z M124.5,23.5c0.1-2.1-0.5-3.1-1.8-3.8 c-2.3-1.2-5.5-0.6-7.2,1.3c-1.8,2.1-2.1,6,1.8,7.4c0.9,0.3,1.8,0.5,2.8,0.7c1.4,0.2,2.3-0.3,3-1.4C124,26.3,124.4,24.6,124.5,23.5z" />
</svg>

Answer 1

One easy way is to mask your path with a stroked version from which you'll animate the stroke-dashoffset.
Since your path is quite dirty, it will be hard to make this programmatically, so I made it quickly by hand using a dedicated software, but feel free to make it better:

polyline {
  fill: none;
  stroke: white;
  stroke-width: 10px;
  stroke-dasharray: 824px 824px;
  stroke-dashoffset: 0px;
  animation: stroke 5s linear forwards;
}
:checked ~ svg polyline {
  animation: none;
}
:checked ~ svg polyline,
 :hover polyline {
  stroke: red;
  opacity: 0.9;
}

@keyframes stroke {
  0% {stroke-dashoffset: 0;}
  100% {stroke-dashoffset: -824px}
}

<label> disable animation</label><input type="checkbox">
<br><span>hover over the frame to change stroke color</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 227.3 209.5">
  <path id="Spiral" d="M81.4,68.2c-0.4,8.5,1.7,16.4,6.7,23.3c4.6,6.4,10.8,11.1,18.1,14.3c4.6,2,9.4,3.7,14.5,3.9 c6.4,0.2,12.8-0.3,18.2-3.9c6.6-4.3,12.1-9.6,14.6-17.4c0.8-2.5,2.1-4.8,2.4-7.5c0.5-4.2-0.1-8.2-1.7-12.1 c-4.1-9.6-10.8-16.8-20.8-20.2c-11.6-4-22.9-3-33.1,4.5c-4.4,3.2-7.2,7.6-8.4,12.9c-0.5,2.2-1.3,4.3-1.4,6.5 c-0.2,7.4,2.5,13.6,7.8,18.7c7.3,7.1,16,9.4,25.6,6.9c9.3-2.4,13.8-9.7,13-19.3c-0.7-8.7-6.2-14.9-15.1-17.5c-2.4-0.7-4.9-1.5-7.5-1 c-3.1,0.6-5.5,2.3-6.9,5.2c-3.8,8.3,0.7,17.3,9.4,19.2c4.1,0.9,8.4-1.5,9.9-5.5c0.4-1.1,0.8-2.2,1.1-3.4c0.5-2.1-0.4-3.3-2.6-3.5 c-2-0.1-3.9,0-5.9,0.2c-1.4,0.2-2.1,1.5-1.6,2.9c0.4,1.1,1.1,1.9,1.8,2.8c0.5,0.6,0.9,1.2,0.3,1.9c-0.6,0.7-1.3,1-2.2,0.7 c-0.5-0.2-1-0.5-1.4-0.9c-1.2-1.3-2-2.8-2.4-4.5c-0.6-2.2,1.4-5,3.9-5.7c2.7-0.7,5.6-1.2,8.4-0.8c3.5,0.4,5.4,2.6,5.3,6.1 c-0.1,4.6-2.3,8.2-5.5,11c-2.8,2.5-6.5,3-10,2c-6.8-1.8-11.7-6.1-13.5-13.1c-1.5-5.8,1.2-13.9,8.1-17.2c2.6-1.2,5.2-1,7.9-0.8 c6.2,0.4,11.2,3.4,15.7,7.5c3.8,3.6,5.6,8.2,6.3,13.2c0.5,3.2,0.1,6.3-0.6,9.4c-1.2,5.7-5.1,9.4-9.8,12.3c-3.5,2.2-7.4,3-11.4,3.1 c-9,0.3-16.8-2.8-23.3-8.9c-4.5-4.2-6.7-9.6-7.9-15.4c-2.7-13,6-27.1,15.7-31.3c19.5-8.4,38.4-3.2,50.4,13c3.6,4.9,5.6,10.6,6,16.7 c0.3,4.6-0.8,9.1-2.7,13.3c-3,6.7-7.4,12.5-13.2,17c-5.7,4.5-12.3,6.2-19.6,6.5c-10.1,0.3-19-2.9-27.2-8.6c-4-2.8-7.8-5.8-10.9-9.6 c-4.7-5.7-6.9-12.4-7.8-19.7c-0.5-4-0.8-8-0.5-12.1c0.6-8.2,3.4-15.6,8.6-22c5.2-6.5,11.3-11.8,18.8-15.5c1.6-0.8,3.3-1.3,5-1.7 c0.4-0.1,0.8-0.1,0.9-0.8c0.4-4.5,4.8-8.1,10.6-7.3c3.9,0.5,5.8,2.8,5.7,6.7c0,1.1,0.4,1.5,1.3,1.8c5.9,2,11.6,4.6,16.5,8.5 c4.2,3.3,8.7,6.2,12.4,10c4.1,4.2,7.9,8.6,11.6,13.1c3.5,4.3,4.8,9.5,5.7,14.8c1.3,7.3-0.4,14.2-2.3,21.1 c-2.1,7.8-5.7,15.1-10.1,21.9c-4.1,6.2-9.9,10.6-16.7,13.7c-2.7,1.2-5.6,1.4-8.5,1.8c-5.1,0.6-10.2,0.7-15.3-0.2 c-12.6-2.2-24.7-5.8-36.2-11.7c-7.7-3.9-14.3-9-20-15.4c-3.1-3.5-5.1-7.9-7.5-11.8c-4.4-7.2-5.9-15.1-5.8-23.3 c0.1-7.2,2.4-13.8,5.6-20.2c2-3.9,4.1-7.7,6.2-11.5c1-1.8,2.4-3.3,3.8-4.7c1.4-1.4,2.8-2.7,4.2-4.1c0.5-0.4,1-0.8,1.6-1.1 c0.9-0.4,1.7-0.3,2.3,0.6c0.6,0.9,0.4,1.6-0.3,2.2c-0.7,0.6-1.5,1.2-2.2,1.9c-3.8,3.3-6.7,7.3-9,11.8c-2.9,5.7-5.9,11.2-7.5,17.5 c-2.3,8.8-1.4,17.4,2.3,25.6c2.6,5.8,6,11.2,10.1,16.1c4.4,5.2,9.7,9.1,15.8,12.1c9.4,4.6,19,8.7,29.2,11.1 c7.6,1.8,15.4,2.4,23.2,1.6c6-0.6,10.9-3.6,15.6-7.2c3-2.3,5.3-5.1,7.1-8.3c3.3-5.8,6.6-11.5,8.5-17.9c1.5-5.2,2.9-10.5,2.8-16 c-0.1-3-0.4-5.9-1-8.8c-0.8-4-2.9-7.2-5.3-10.4c-5.2-7-11.8-12.6-18.2-18.4c-5.5-4.9-12-8-18.8-10.6c-0.3-0.1-0.7-0.2-1-0.3 c-0.5-0.2-0.9-0.2-1.2,0.5c-0.7,2-2.2,3-4.3,3.3c-2.2,0.3-4.4,0.3-6.5-0.6c-1.6-0.7-2.8-1.7-3.5-3.2c-0.2-0.5-0.5-0.7-1.1-0.5 c-12.1,5-21.5,12.7-27.2,24.7c-1.4,3-1.7,6.3-2,9.6C81.6,63.9,81.5,66,81.4,68.2z M124.5,23.5c0.1-2.1-0.5-3.1-1.8-3.8 c-2.3-1.2-5.5-0.6-7.2,1.3c-1.8,2.1-2.1,6,1.8,7.4c0.9,0.3,1.8,0.5,2.8,0.7c1.4,0.2,2.3-0.3,3-1.4C124,26.3,124.4,24.6,124.5,23.5z" />
  <polyline id="mask" points="77.2,26.1 53.2,56.4 
    54.5,84.4 69.6,103.9 95.8,119.9 128.7,128.3 148.2,123.6 159.5,109.5 166.5,95.8 172.1,78.1 168,56.2 132.9,28.8 124.9,26.3 
    120.5,16.9 113.5,20.7 122.7,28.5 112.7,28 105.2,26.5 86.1,45.8 80.6,67.9 82.4,82.2 87.9,93.2 100.1,103.9 116.6,109.7 133.1,111 
    143.6,103.9 150.7,92.7 157,79.2 153.9,61.3 136,50 127.1,45.3 113.7,46.1 99.2,51.9 88.7,72.7 96.3,88.5 105.9,96.1 123.8,101 
    131.9,97.1 138.5,89.4 140,77.3 135.3,65.9 127.7,61.8 107.9,59.5 102.4,69.9 101.5,76.1 116.8,84.3 123.3,85.1 128.2,79.2 
    129.1,74 124.8,70 117.7,69.5 114.6,72.7 114.6,77.1 119.5,79.9 "/>
</svg>

If you need transparency rather than a white hack like I did, then you can use a <mask>:

svg {
  background: lime;
}
polyline {
  fill: none;
  stroke: white;
  stroke-width: 10px;
  stroke-dasharray: 824px 824px;
  stroke-dashoffset: 0px;
  animation: stroke 5s linear forwards;
}

@keyframes stroke {
  0% {stroke-dashoffset: 0;}
  100% {stroke-dashoffset: -824px}
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 227.3 209.5">
    <defs>
      <mask id="mask">
        <polyline points="77.2,26.1 53.2,56.4 
          54.5,84.4 69.6,103.9 95.8,119.9 128.7,128.3 148.2,123.6 159.5,109.5 166.5,95.8 172.1,78.1 168,56.2 132.9,28.8 124.9,26.3 
          120.5,16.9 113.5,20.7 122.7,28.5 112.7,28 105.2,26.5 86.1,45.8 80.6,67.9 82.4,82.2 87.9,93.2 100.1,103.9 116.6,109.7 133.1,111 
          143.6,103.9 150.7,92.7 157,79.2 153.9,61.3 136,50 127.1,45.3 113.7,46.1 99.2,51.9 88.7,72.7 96.3,88.5 105.9,96.1 123.8,101 
          131.9,97.1 138.5,89.4 140,77.3 135.3,65.9 127.7,61.8 107.9,59.5 102.4,69.9 101.5,76.1 116.8,84.3 123.3,85.1 128.2,79.2 
          129.1,74 124.8,70 117.7,69.5 114.6,72.7 114.6,77.1 119.5,79.9 "/>
      </mask>
    </defs>
    <path mask="url(#mask)" id="Spiral" d="M81.4,68.2c-0.4,8.5,1.7,16.4,6.7,23.3c4.6,6.4,10.8,11.1,18.1,14.3c4.6,2,9.4,3.7,14.5,3.9 c6.4,0.2,12.8-0.3,18.2-3.9c6.6-4.3,12.1-9.6,14.6-17.4c0.8-2.5,2.1-4.8,2.4-7.5c0.5-4.2-0.1-8.2-1.7-12.1 c-4.1-9.6-10.8-16.8-20.8-20.2c-11.6-4-22.9-3-33.1,4.5c-4.4,3.2-7.2,7.6-8.4,12.9c-0.5,2.2-1.3,4.3-1.4,6.5 c-0.2,7.4,2.5,13.6,7.8,18.7c7.3,7.1,16,9.4,25.6,6.9c9.3-2.4,13.8-9.7,13-19.3c-0.7-8.7-6.2-14.9-15.1-17.5c-2.4-0.7-4.9-1.5-7.5-1 c-3.1,0.6-5.5,2.3-6.9,5.2c-3.8,8.3,0.7,17.3,9.4,19.2c4.1,0.9,8.4-1.5,9.9-5.5c0.4-1.1,0.8-2.2,1.1-3.4c0.5-2.1-0.4-3.3-2.6-3.5 c-2-0.1-3.9,0-5.9,0.2c-1.4,0.2-2.1,1.5-1.6,2.9c0.4,1.1,1.1,1.9,1.8,2.8c0.5,0.6,0.9,1.2,0.3,1.9c-0.6,0.7-1.3,1-2.2,0.7 c-0.5-0.2-1-0.5-1.4-0.9c-1.2-1.3-2-2.8-2.4-4.5c-0.6-2.2,1.4-5,3.9-5.7c2.7-0.7,5.6-1.2,8.4-0.8c3.5,0.4,5.4,2.6,5.3,6.1 c-0.1,4.6-2.3,8.2-5.5,11c-2.8,2.5-6.5,3-10,2c-6.8-1.8-11.7-6.1-13.5-13.1c-1.5-5.8,1.2-13.9,8.1-17.2c2.6-1.2,5.2-1,7.9-0.8 c6.2,0.4,11.2,3.4,15.7,7.5c3.8,3.6,5.6,8.2,6.3,13.2c0.5,3.2,0.1,6.3-0.6,9.4c-1.2,5.7-5.1,9.4-9.8,12.3c-3.5,2.2-7.4,3-11.4,3.1 c-9,0.3-16.8-2.8-23.3-8.9c-4.5-4.2-6.7-9.6-7.9-15.4c-2.7-13,6-27.1,15.7-31.3c19.5-8.4,38.4-3.2,50.4,13c3.6,4.9,5.6,10.6,6,16.7 c0.3,4.6-0.8,9.1-2.7,13.3c-3,6.7-7.4,12.5-13.2,17c-5.7,4.5-12.3,6.2-19.6,6.5c-10.1,0.3-19-2.9-27.2-8.6c-4-2.8-7.8-5.8-10.9-9.6 c-4.7-5.7-6.9-12.4-7.8-19.7c-0.5-4-0.8-8-0.5-12.1c0.6-8.2,3.4-15.6,8.6-22c5.2-6.5,11.3-11.8,18.8-15.5c1.6-0.8,3.3-1.3,5-1.7 c0.4-0.1,0.8-0.1,0.9-0.8c0.4-4.5,4.8-8.1,10.6-7.3c3.9,0.5,5.8,2.8,5.7,6.7c0,1.1,0.4,1.5,1.3,1.8c5.9,2,11.6,4.6,16.5,8.5 c4.2,3.3,8.7,6.2,12.4,10c4.1,4.2,7.9,8.6,11.6,13.1c3.5,4.3,4.8,9.5,5.7,14.8c1.3,7.3-0.4,14.2-2.3,21.1 c-2.1,7.8-5.7,15.1-10.1,21.9c-4.1,6.2-9.9,10.6-16.7,13.7c-2.7,1.2-5.6,1.4-8.5,1.8c-5.1,0.6-10.2,0.7-15.3-0.2 c-12.6-2.2-24.7-5.8-36.2-11.7c-7.7-3.9-14.3-9-20-15.4c-3.1-3.5-5.1-7.9-7.5-11.8c-4.4-7.2-5.9-15.1-5.8-23.3 c0.1-7.2,2.4-13.8,5.6-20.2c2-3.9,4.1-7.7,6.2-11.5c1-1.8,2.4-3.3,3.8-4.7c1.4-1.4,2.8-2.7,4.2-4.1c0.5-0.4,1-0.8,1.6-1.1 c0.9-0.4,1.7-0.3,2.3,0.6c0.6,0.9,0.4,1.6-0.3,2.2c-0.7,0.6-1.5,1.2-2.2,1.9c-3.8,3.3-6.7,7.3-9,11.8c-2.9,5.7-5.9,11.2-7.5,17.5 c-2.3,8.8-1.4,17.4,2.3,25.6c2.6,5.8,6,11.2,10.1,16.1c4.4,5.2,9.7,9.1,15.8,12.1c9.4,4.6,19,8.7,29.2,11.1 c7.6,1.8,15.4,2.4,23.2,1.6c6-0.6,10.9-3.6,15.6-7.2c3-2.3,5.3-5.1,7.1-8.3c3.3-5.8,6.6-11.5,8.5-17.9c1.5-5.2,2.9-10.5,2.8-16 c-0.1-3-0.4-5.9-1-8.8c-0.8-4-2.9-7.2-5.3-10.4c-5.2-7-11.8-12.6-18.2-18.4c-5.5-4.9-12-8-18.8-10.6c-0.3-0.1-0.7-0.2-1-0.3 c-0.5-0.2-0.9-0.2-1.2,0.5c-0.7,2-2.2,3-4.3,3.3c-2.2,0.3-4.4,0.3-6.5-0.6c-1.6-0.7-2.8-1.7-3.5-3.2c-0.2-0.5-0.5-0.7-1.1-0.5 c-12.1,5-21.5,12.7-27.2,24.7c-1.4,3-1.7,6.3-2,9.6C81.6,63.9,81.5,66,81.4,68.2z M124.5,23.5c0.1-2.1-0.5-3.1-1.8-3.8 c-2.3-1.2-5.5-0.6-7.2,1.3c-1.8,2.1-2.1,6,1.8,7.4c0.9,0.3,1.8,0.5,2.8,0.7c1.4,0.2,2.3-0.3,3-1.4C124,26.3,124.4,24.6,124.5,23.5z" />
</svg>