Revealing a circularish path with clipping

[EJ29]

Hi, I know this should be straightforward, but hey ho I can't work it out. 

 

Looking at the attached simplified pen. The red border of the full circle represents a more complex roughly circular path that I need to be revealed in a similar manner to how the green path is appearing. Because of the complexities of this path, I thought clipping would be the best approach to have it appear, but I'm struggling to get it to work. The following line of code doesn't seem to do anything:

 

TweenMax.set($("#arcPath"), { drawSVG: '0% 50%' });

 

and nor does it animate if I insert the drawSVG into a TimeLine or Tween.

 

Can someone please point me in the right direction of how it should be done?

 

(In "real life", the circle isn't filled, it's just the outline that needs the clipping applying to)

 

Thanks

See the Pen deLwKR by xyza (@xyza) on CodePen

[Carl]

Checkout @PointC's sage advice on using DrawSVG on a mask to reveal non-solid strokes

 

 

[EJ29]

Just what I was looking for, thanks!