Stroke does not complete on sharp corner

[brycekunkel]

Vivus version: Vivus Instant & 0.4.4 Browser: Chrome Steps to reproduce it: Use an SVG with sharp angle (produced from Illustrator) in Vivus

Reproduced Issue: https://jsfiddle.net/2t1kb9yr/ »Note the top left corner of the left-most part of the "U", and you'll see the break in the corner.

I might be just missing something, but I couldn't find anywhere how to make a more compliant SVG or a setting to pass into Vivus. Thank you for making something so awesome for everyone to use.

[maxwellito]

Hi @brycekunkel, Sorry about the delay, I was AFK for a little while. Thanks for reporting the bug, sadly it's a common problem on many browsers where the line don't close even if it should be.

Here is when the path is not complete.

Here is when the path should be more than complete (knowing that the 'length' of this path is 1863px)

However to fix the final view, I would recommend you to use the constructor option selfDestroy to remove all stroke-dash property after the end of the animation. Which will remove all these potential artifacts.

I hope this helps :)

[Shanti9]

I also noticed this bug! What I have found out is not complete solution but can improve visually and in most of my applications it works good enough. You only have to apply additional CSS rule on all yours CSS stroke classes: stroke-linecap: round; That means that last connecting corner will not be square but round, but it will be connected! Here is an example of that, where you can see closing cap is round, but not really noticeable unless you really look at it, especially not on smaller sizes: https://vindu.agency/wp-content/uploads/2020/05/vindu-logo-color-animated.svg It works for Firefox, Chrome, Edge...