DrawSVG - Circle stroke starting point

[Guest Nickzilla]

I'm trying to start a circular progress indicator. How would I go about starting the circle path at the top center position and draw to 25%, 50%, etc. 

See the Pen Kgqzgy by nickmuth (@nickmuth) on CodePen

[PointC]

Hi Nickzilla 

 

SVG circles always start at the 3 o'clock position so you'll need to rotate it by -90 degrees. You could do that by transforming the circle like this:

<circle class="circle-fill" cx="50" cy="50" r="40" transform="rotate(-90 50 50)" stroke="blue" stroke-width="4" fill="none" />

or rotate the entire SVG like this:

TweenMax.set("svg", {rotation:-90});

Hopefully that helps a bit.

 

Happy tweening.