How can I change the starting point of the svg circle for an animation that gradually starts at 0 o’clock? By default, the svg circle starts at 3 o’clock.
My current lap (hovering 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"/>
source share