Ten animated circle with same centre

Animation of circle in a sqence with the help of html5 and inline css

---

Use the following code to make the above animation with any note pad and save the the text file with ".html" extension .
example if you have file with name index then save it as index.html


<div dir="ltr" style="text-align: left;" trbidi="on"> <br /></div> <svg width="600" height="600"> <circle cx="300" cy="300" r="5" fill="blue"> <animate attributeName="r" from="5" to="215" dur="6s" repeatCount="30000"> </circle> <circle cx="300" cy="300" r="3" fill="red"> <animate attributeName="r" from="3" to="175" dur="6s" repeatCount="30000" > </circle> <circle cx="300" cy="300" r="2" fill="orange"> <animate attributeName="r" from="2" to="145" dur="6s" repeatCount="30000"> </circle> <circle cx="300" cy="300" r="1" fill="pink"> <animate attributeName="r" from="2" to="110" dur="6s" repeatCount="30000"> </circle> <circle cx="300" cy="300" r="5" fill="gray"> <animate attributeName="r" from="5" to="215" dur="3s" repeatCount="30000"> </circle> <circle cx="300" cy="300" r="3" fill="red"> <animate attributeName="r" from="3" to="175" dur="3s" repeatCount="30000" > </circle> <circle cx="300" cy="300" r="5" fill="orange"> <animate attributeName="r" from="1" to="145" dur="3s" repeatCount="30000"> </circle> <circle cx="300" cy="300" r="1" fill="yellow" > <animate attributeName="r" from="1" to="110" dur="3s" repeatCount="30000" > </circle> </svg>

Check my blog for more animation and you can easily get html code of animation for free.