Svg path not completey animated except its stroke only

[sakhisheikh]

I'm trying to animate complete svg as shown in my example but only its stroke part is animated. I have added both actual and expected results in my codesandbox. How can we interpolate the remaining parts of it (filled one) like in this example of react-mvt-svg-lines
PS I have already interpolated strokeDashoffset atribute. What other attributes needs to be interpolated.

Here is my codesandbox: https://codesandbox.io/s/9llxp0zx8o

[drcmda]

I don't know svg good enough to tell you which svg props do what but if you find a resource that tells you how to operate dasharray correctly then you'll be able to animate it like that with react-spring.

[drcmda]

PS. i found this example, someone else made it: https://codesandbox.io/embed/4zppn84yj4 no idea if it helps but it looks like what you want to me.

[sakhisheikh]

Thanks @drcmda for this example. What I've figured out. We need SVGs with stroke along single line path. Here is the issue with my SVG. It's not created as desired to be. Anyways thanks to you. I'll try to make right SVG and would love to make a PR in examples.md.

[drcmda]

sure, looking for good examples ...