This, at least from my experience would be easier that you create the same svg with single line, not shape but single line, that way you can add stroke-dasharray and stroke-dashoffset directly the svg. But not fill, single line. It will require some work to have the expected result but none the less is possible. I would suggest either doing with CSS, or using library like animatejs for this.