SVG circle starting point

Question

How can I change the starting point of a svg circle for animate it progressively begining at 0 o'clock? the default circle svg begin at 3 o'clock.

My current circle ( hover for animation):

 #timeline{ position:fixed; width:500px; height:500px; top:50%; left:50%; margin-top:-250px; margin-left:-250px; overflow:hidden; pointer-events: all; z-index:99999; } #bluecircle{ stroke-dasharray:1510; stroke-dashoffset:1510; -webkit-transition:all 1s ease; transition:all 1s ease; } #bluecircle:hover{ stroke-dashoffset:0; } 

 <div id="timeline"> <svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500"> <circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/> <circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/> 

Answer 1

Rotate the circle with a transformation?

 #timeline{ position:fixed; width:500px; height:500px; top:50%; left:50%; margin-top:-250px; margin-left:-250px; overflow:hidden; pointer-events: all; z-index:99999; } #bluecircle{ stroke-dasharray:1510; stroke-dashoffset:1510; -webkit-transition:all 1s ease; transition:all 1s ease; } #bluecircle:hover{ stroke-dashoffset:0; } 

 <div id="timeline"> <svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500"> <circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/> <circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/> </svg> 

Edit: Updated with CSS