For some reason the svg animation in my code below does not complete correctly. I'm animating the stroke-dashoffset however when the animation completes there is still a missing piece in the outer circle. Although I'm setting the stroke-dashoffset back to zero it still appears to be finishing the animation with it set.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.path {
stroke-dasharray: 400;
}
</style>
</head>
<body>
<svg id="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 144 144" style="enable-background:new 0 0 144 144;" xml:space="preserve">
<g id="Layer_1">
<path class="path"
fill="none"
stroke="#009FD4"
stroke-width="1"
stroke-miterlimit="10"
d="M142.2,72.6c0,38.6-31.3,69.9-69.9,69.9S2.5,111.2,2.5,72.6S33.8,2.8,72.4,2.8S142.2,34,142.2,72.6z M81,128.1
c12.6-1.9,23.9-8,32.4-16.8 M123,98c4.1-7.8,6.4-16.7,6.4-26.2c0-31.5-25.5-57-57-57s-57,25.5-57,57c0,7.8,1.6,15.3,4.5,22.1
M31.3,111.3C39.6,119.9,50.6,126,63,128 M88.4,50.7h8.2v-10h-8.2V50.7z M46.9,50.7H55v-10h-8.1V50.7z M95.8,39L71.7,22.8L47.3,39
M94.5,40.8h-6v25.8 M91.9,39L71.7,25.4L51.5,39 M55,66.7V40.8h-6.1 M19.9,68.6v42.7h93.6h9.5V98V68.6 M19.9,64 M102.8,104.3h9.6
V84.5h-9.6V104.3z M103,90h9.4 M103,94.9h9.4 M103,99.8h9.4 M107.4,104.3V84.5 M99.7,104.3h3.1V84.5h-3.1V104.3z M99.7,97.2h1.7
M101.4,92.1h-1.7 M101.4,87h-1.7 M99.7,102.3h1.7 M113.8,97.2h1.7 M115.5,92.1h-1.7 M115.5,87h-1.7 M113.8,102.3h1.7 M112.4,104.3
h4.5V84.5h-4.5V104.3z M31.4,104.3h9.6V84.5h-9.6V104.3z M31.7,90h9.4 M31.7,94.9h9.4 M31.7,99.8h9.4 M36.1,84.5v19.8 M26.9,104.3
h4.5V84.5h-4.5V104.3z M28.3,97.2H30 M30,92.1h-1.7 M30,87h-1.7 M28.3,102.3H30 M42.5,97.2h1.7 M44.2,92.1h-1.7 M44.2,87h-1.7
M42.5,102.3h1.7 M41.1,104.3h3.2V84.5h-3.2V104.3z M67.1,62.7l4.6-1.5l5,1.7V43.9h-9.6V62.7z M76.8,49.4h-9.4 M76.8,54.3h-9.4
M76.8,59.2h-9.4 M71.8,43.9v17.3 M62.6,63.7l1.4,0l3.1-0.9V43.9h-4.5V63.7z M65.7,56.5H64 M64,51.5h1.7 M64,46.4h1.7 M65.7,61.6
H64 M79.9,56.5h-1.7 M78.2,51.5h1.7 M78.2,46.4h1.7 M79.9,61.6h-1.7 M79.4,63.7h1.9V43.9h-4.5v18.9L79.4,63.7z M99.7,75.2H44.3
v36.1h55.4V75.2z M94.5,68.6H125l0.7-4.8H88.4 M55,63.8H17.5l0.7,4.8h31.1 M78.4,80.5H65.5v30.8h12.9V80.5z M51.4,106.7h7V80.5h-7
V106.7z M58.4,89.1h-6.8 M58.4,98h-6.8 M84.7,106.7h7V80.5h-7V106.7z M91.7,89.1H85 M91.7,98H85 M71,95.7h-3.4v12.3H71V95.7z
M76.4,95.7H73v12.3h3.4V95.7z M76.4,89.4H73v3.3h3.4V89.4z M76.4,83.4H73v3.3h3.4V83.4z M71,89.4h-3.4v3.3H71V89.4z M71,83.4h-3.4
v3.3H71V83.4z M103.8,71.7l-9.3-3.1l-22.6-7.5l-22.9,7.5l-9,3 M89.9,69.8l-18.3-6.1l-18.4,6.1H89.9z M103.8,72H39.9l0.7,3.2h62.5
L103.8,72z M76.1,37c-0.4-2.2-2.1-3.9-4.1-3.9c-2.1,0-3.8,1.7-4.1,3.9H76.1z M77.8,39.4H66.2l0.7,1.1h10.3L77.8,39.4z M57.9,39
H45.6l0.7,1.7h10.9L57.9,39z M98,39H85.7l0.7,1.7h10.9L98,39z M92.3,51.2 M123.9,63.6l-15.3-12.9H88.9 M54.5,50.7H34.8L19.5,63.6
M83.1,141.7l-4.7-30.4H65.5L61,141.6"/>
</g>
</svg>
<!-- scripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/velocity/velocity.js"></script>
<script src="bower_components/velocity/velocity.ui.js"></script>
<script>
window.onload = function() {
function animate() {
$('.path')
.velocity({ 'stroke-dashoffset': 400 }, {duration: 0})
.velocity({ 'stroke-dashoffset': 0 }, { duration: 1500, delay: 10 });
}
animate();
};
</script>
</body>
</html
>
For now you can fix this using
<style>
.path {
stroke-dasharray: 500;
}
</style>
and
function animate() {
$('.path')
.velocity({ 'stroke-dashoffset': 500 }, {duration: 0})
.velocity({ 'stroke-dashoffset': 0 }, {duration: 1500, delay: 10});
}
I am not quite sure why this fixes it, but probably with the new information and this website (https://css-tricks.com/svg-line-animation-works/) you should be able to figure it out.
[EDIT @Corey] It is actually not strange, the 500 was a random guess but apparently your path group contains 439 "dashes". Play with the number and you'll see that you need to set the number to exactly 439 to load all paths in your group. [/EDIT]