javascriptanimationsvganime.jsline-drawing

SVG path drawing animation - line drawing with anime.js, how to stop lines from overlapping

I have the following SVG line drawing using anime.js but for some reason the lines seem to overlap during the animation. I have played around with all the settings including removing the loop, changing the direction etc etc but nothing I change seems to make a difference to this. According to the documentation the strokeDashoffset parameter is the setting for this type of animation but there is no other documentation that I can find in relation ot this.

Could it be the SVG itself?

https://codepen.io/lol4000/pen/VwzpBVL

Code below:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>A Basic HTML5 Template</title>
<style>
body { 
background-color:black
}
.svg_container { 
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; 
  max-width:464.145px;
    vertical-align: right; 
    overflow: hidden; 
}
#demo_svg { 
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
}

  
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
window.onload = function() {
    anime({
      targets: '#demo_svg path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'linear',
  duration: 5000,
  delay: anime.stagger(100),
  direction: 'alternate',
  loop: true
    });
}
</script>
</head>

<body>


<div class="svg-container">
<svg id="demo_svg" preserveAspectRatio="xMinYMin meet" width="464.145" height="880.76" viewBox="0 0 464.145 880.76">
  <g id="Groupe_2" data-name="Groupe 2" transform="translate(-1456.318 -9.18)">
  <path id="Tracé_559" stroke="#ffffff" fill="none" stroke-width="1" data-name="Tracé 559" d="M17388.053,2171.939h-1v-42.691l.24-.146,108.744-66.334-108.984-66.207V1865.485l.24-.146,105.926-64.153V1291.18h1v510.569l-.24.146-105.926,64.153V1996l109.906,66.768-109.906,67.043Z" transform="translate(-15604 -1282)"/>
    <path id="Tracé_560" stroke="#ffffff" fill="none" stroke-width="1" data-name="Tracé 560" d="M17523.959,1819.568l-30.465-17.819.5-.863,30.465,17.819Z" transform="translate(-15604 -1282)" />
    <path id="Tracé_561" stroke="#ffffff" fill="none"  stroke-width="1" data-name="Tracé 561" d="M17523.74,2079.5,17496,2062.711l.705-.428,27.031-16.359.52.855-26.326,15.932,26.326,15.932Z" transform="translate(-15604 -1282)"/>
    <path id="Tracé_562" stroke="#ffffff" fill="none"  stroke-width="1" data-name="Tracé 562" d="M17387.3,2129.958l-109.549-65.217.691-.435,108.832-68.449.531.846-108.141,68.014,108.146,64.381Z" transform="translate(-15604 -1282)"/>
    <path id="Tracé_563" stroke="#ffffff" fill="none"  stroke-width="1" data-name="Tracé 563" d="M17171.338,2130.1l-.258-.153-110.762-65.927v-131.3l.242-.146,218.141-130.829.256.149,109,63.556-.5.864-108.748-63.407-217.391,130.379v130.166l110.016,65.482,107.113-64.567.516.856Z" transform="translate(-15604 -1282)"/>
    <path id="Tracé_564" stroke="#ffffff" fill="none"  stroke-width="1" data-name="Tracé 564" d="M17278.451,2064.991l-111.012-65.538v-130.82h1v130.25l110.52,65.247Z" transform="translate(-15604 -1282)"/>
  </g>
</svg>
</div>

  
</body>
</html>
Solution

  • There’s nothing wrong with your js, the issue is the svg.

    I opened your SVG in illustrator and as you can see from the zoomed in screenshot, each path is actually a very thin closed path, so anime is "correctly" drawing around the outside of each of them!

    enter image description here