CODEWITHSUNDEEP
jqueryhtmlcsssvg
Gaurav
Gaurav

Reputation: 341

Need to animate the circle border clock wise

I need to rotate the dashed stroke circle clock wise, currently its rotation "anti clock wise". I think it can we done using PATH, but don't know how i can create it, 

<svg preserveAspectRatio="none" viewBox="0 0 500 500" >
    <circle cx="200" cy="200" r="167" stroke-dasharray="2,4" stroke-width="2"  stroke="red" fill="white" stroke-linecap="round" />
    <circle cx="200" cy="200" r="167" stroke-dasharray="1200,1200" stroke-width="3" stroke-dashoffset="0" stroke-linecap="round" stroke="white" fill="none" >
       <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="1200" dur="4s" repeatCount="1" fill="freeze" />
    </circle>
</svg>

Here is link,

https://jsfiddle.net/y492v144/

Thanks in advance!

Upvotes: 1

Views: 876

Answers (1)

Amar Singh
Amar Singh

Reputation: 5622

check out this DEMO

<svg preserveAspectRatio="none" viewBox="0 0 500 500" >
    <circle cx="200" cy="200" r="167" stroke-dasharray="2,4" stroke-width="2"  stroke="red" fill="white" stroke-linecap="round" />
    <circle cx="200" cy="200" r="167" stroke-dasharray="1200,1200" stroke-width="3" stroke-dashoffset="0" stroke-linecap="round" stroke="white" fill="none" >
       <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="-1200" dur="4s" repeatCount="1" fill="freeze" />
    </circle>
</svg>

Just give to coordinate a negative value

Upvotes: 1

Related Questions