CODEWITHSUNDEEP
javascriptanimationd3.jssvg
user6867266
user6867266

Reputation: 71

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 hiccups in its flowing process. Here's the original implmentation:

https://jsbin.com/hodoseb/edit?html,output

Here's my code:

https://jsbin.com/jitufih/edit?html,output

Here's my SVG:

https://www.dropbox.com/s/kfroff5fyidd0ay/map-path-1213.svg?dl=0

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

Upvotes: 1

Views: 236

Answers (1)

Diego
Diego

Reputation: 18349

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.

Upvotes: 1

Related Questions