Tracing vectors and circular mask with progressBar.js

I needed to create an animated circular mask and some animated circles. I found progressBar.js, and it fit my needs well. I think this technique could trace any simple vector in a circular reveal. (according to the progressBar.js docs)

This is a similar problem to to Need help creating radial wipe mask

I didn’t see the VIVUS solution earlier. I haven’t tested the VIVUS version, so I’m not sure which is better.

My solution has significant overhead, to say the least… My target was a GIF, so overhead was less of a concern.

Also, since this is partially a Javascript animation, it isn’t visible when playing the animation in Hype. It has to be previewed in a browser.

tracing vectors with progressBar.hype.zip (46.2 KB)