I am having a problem with SVG animations not completing even when the stroke-dasharray has been set to exactly the length of the element using javascript.
Here is a codepen of it.
https://codepen.io/shubhkirtisharma/pen/XgVNYj
In it, you can easily see when the animation in the first one completes, it leaves a small gap on the top(unlike the original svg below without animation), even though it has the stroke-dasharray set to the exact width. The same thing is happening with all the elements. I am not able to figure it out. Please help. Thanks in advance.