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:
Here's my code:
Here's my svg:
Any idea why my version has hickups in its flow animation?
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
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.