user6867266 user6867266 - 10 months ago 51
Javascript Question

trying to get svg paths to flow smoothly

I'm working on an svg with flowing animated svg paths. This svg implementation is based on another reference svg implementation. My problem is that the lines on the reference implementation flow smoothly forever. However, my implementation appears to encounter subtle but noticeable hickups in its flowing process. Here's the original implmentation:,output

Here's my code:,output

Here's my svg:

Any idea why my version has hickups in its flow animation?

Answer Source

Your dashed path NortheastSoutheastFlow is overwriting the flowline CSS class' stroke-dasharray attribute. So instead of using 10,4, it uses 12,4 (search for stroke-dasharray="12,4" in your SVG). That causes each line dash and it's space after to have a length of 16, not 14. Therefore, you should be interpolating to animate from 0 to 16 in your animateThis function:

return d3.interpolate(0, 16);

With that change, the animation is smooth. Alternatively, you can just change the stroke-dasharray attribute in the SVG to be 10,4, as in the original implementation. Your flowline CSS class is being ignored, as is not referenced in the SVG.