SVG path animation issue <p>I'm new to CSS animations and I'm struggling to get <a href="http://codepen.io/anon/pen/LENLxM" rel="nofollow">this animation</a> working.</p> <p>I've been following this <a href="http://css-tricks.com/svg-line-animation-works/" rel="nofollow">CSS Tricks post</a>.</p> <p>Currently I don't understand why there are three separate starting point in the animation.</p> <p>I would like to start from one point, follow the path all the way(doesn't matter which direction) and close the animation at the starting point.</p> <p>Is that possible? If it is, can anyone tell what's wrong in what I've tried so far?</p> <p>Any help appreciated, thanks.</p> <p>This is the code in the demo (I've cut some svg code out):</p> <p><strong>HTML</strong></p> <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="3.27778in" height="3.27778in" viewBox="0 0 236 236"&gt; &lt;path class="path" fill="none" stroke="black" stroke-width="2" d="M 236.00,0.00 C 236.00,0.00 236.00,236.00 236.00,236.00 236.00,236.00 0.00,236.00 0.00,236.00 0.00,236.00 0.00,0.00 0.00,0.00 0.00,0.00 236.00,0.00 236.00,0.00 Z M 74.00,34.00 ......... C 212.00,194.00 213.00,195.00 213.00,195.00 213.00,195.00 213.00,194.00 213.00,194.00 213.00,194.00 212.00,194.00 212.00,194.00 Z" /&gt; &lt;/svg&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>.path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 10s linear infinite; } @keyframes dash { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } </code></pre>