SVG: how to calculate stroke-dasharray and stroke-dashoffset for stroke animation?

Question

SVG

I can't figure out how to correctly calculate the exact number in the stroke-dashoffset and stroke-dasharray properties.
For example, here are simple svg animations: codepen.io/kyledws/pen/Gvelt
Here the .outer class in the stroke-dasharray property has the value 534, if you change it as a percentage or to another number, then there will not be that effect. That is, I don’t understand how I can calculate the exact number that is needed to animate the filling of the stroke from beginning to end, it’s only possible to calculate by hand, but for me it’s stupid. I can’t bang 100%, because the stroke will be filled in different ways, in general, some kind of tin (((

Answer 1

It might help...

var path = document.querySelector('.squiggle-container path');
console.log(path.getTotalLength());

Link to proof