Hi Guys, I'm currently creating an animation that requires me to animate an arrow which looks like its being drawn, the arrow itself has a zig-zag before the arrow head. The arrow SVG is in the codepen link below. So to explain in detail, I want the first circle at the bottom left to be filled left to right with the colour white and then the rectangle next to it and then to the next circle and so on, this colour goes all the way to the tip of the arrow head. I'm going to implement this on page with a black background and I'm planning to fill the arrow in white so it looks like its being drawn very quickly when animated with it being filled white.
I have 2 versions of the arrow, one that is has a single path the other hasn't.
Compound path:
http://codepen.io/anon/pen/MymvpG
Single Path: (Codepen URL attached to this post)
I'm just really confused on how to approach this problem, do i use clipping path or a mask? Do I use Draw SVG?