I didn't know about this. Thank you, Jack! It works when the tween is one sided, as in it's a one time or a looped tween. However, if I do a yoyo:true, progress goes from 0 to 1, then back to 0, thus making this solution nonfunctional. What I mean is if I invalidate the tween on it's way back, instead of continuing with the animation it starts going forward again. I made a codepen example here: One sided progress (try changing window width when animation goes forward and then backward, you will see that when you change it on the way back, it jumps to forward animation). Maybe when yoyo is true, the progress should count to 0.5 when going forward and 0.5 to 1 when going back?
Sahil, this is great stuff! However as you mentioned, Path2D isn't fully supported everywhere, specially still behind on mobile devices. Also, it goes back to using raster graphics where we have to worry about scalability, and I like how crispy svg vectors look on any display/size.
Offtopic question: how do you embed a codepen in a forum reply?