Animated circle with the help of html and css

 Animated five circle  and each circle has five another circle  with same centre  and all are animated in same sequence.&nbsp

---

---

You can use the following code to make the above animation. The animation is created by html5 and inline css. <svg height="600" width="600"> <circle cx="300" cy="300" fill="orange" r="3"> <animate attributename="r" dur="5" from="3" repeatcount="100" to="300"> </animate></circle> <circle cx="300" cy="300" fill="yellow" r="1"> <animate attributename="r" dur="5" from="1" repeatcount="100" to="300"> </animate></circle> <circle cx="150" cy="150" r="10"> <animate attributename="r" dur="5" from="10" repeatcount="100" to="200"> </animate></circle> <circle cx="450" cy="150" r="10"> <animate attributename="r" dur="5" from="10" repeatcount="100" to="190"> </animate></circle> <circle cx="150" cy="450" r="10"> <animate attributename="r" dur="5" from="10" repeatcount="100" to="190"> </animate></circle> <circle cx="300" cy="300" r="10"> <animate attributename="r" dur="5" from="10" repeatcount="100" to="190"> </animate></circle> <circle cx="450" cy="450" r="10"> <animate attributename="r" dur="5" from="10" repeatcount="100" to="190"> </animate></circle> <circle cx="150" cy="150" fill="red" r="7"> <animate attributename="r" dur="5" from="7" repeatcount="100" to="150"> </animate></circle> <circle cx="450" cy="150" fill="red" r="7"> <animate attributename="r" dur="5" from="7" repeatcount="100" to="150"> </animate></circle> <circle cx="150" cy="450" fill="red" r="7"> <animate attributename="r" dur="5" from="7" repeatcount="100" to="150"> </animate></circle> <circle cx="450" cy="450" fill="red" r="7"> <animate attributename="r" dur="5" from="7" repeatcount="100" to="150"> </animate></circle> <circle cx="300" cy="300" fill="red" r="7"> <animate attributename="r" dur="5" from="7" repeatcount="100" to="150"> </animate></circle> <circle cx="150" cy="150" fill="green" r="5"> <animate attributename="r" dur="5" from="5" repeatcount="100" to="110"> </animate></circle> <circle cx="450" cy="150" fill="green" r="5"> <animate attributename="r" dur="5" from="5" repeatcount="100" to="110"> </animate></circle> <circle cx="150" cy="450" fill="green" r="5"> <animate attributename="r" dur="5" from="5" repeatcount="100" to="110"> </animate></circle> <circle cx="450" cy="450" fill="green" r="5"> <animate attributename="r" dur="5" from="5" repeatcount="100" to="110"> </animate></circle> <circle cx="300" cy="300" fill="green" r="5"> <animate attributename="r" dur="5" from="5" repeatcount="100" to="110"> </animate></circle> <circle cx="150" cy="150" fill="orange" r="3"> <animate attributename="r" dur="5" from="3" repeatcount="100" to="70"> </animate></circle> <circle cx="150" cy="150" fill="yellow" r="1"> <animate attributename="r" dur="5" from="1" repeatcount="100" to="30"> </animate></circle> <circle cx="450" cy="150" fill="orange" r="3"> <animate attributename="r" dur="5" from="3" repeatcount="100" to="70"> </animate></circle> <circle cx="450" cy="150" fill="yellow" r="1"> <animate attributename="r" dur="5" from="1" repeatcount="100" to="30"> </animate></circle> <circle cx="150" cy="450" fill="orange" r="3"> <animate attributename="r" dur="5" from="3" repeatcount="100" to="70"> </animate></circle> <circle cx="150" cy="450" fill="yellow" r="1"> <animate attributename="r" dur="5" from="1" repeatcount="100" to="30"> </animate></circle> <circle cx="450" cy="450" fill="orange" r="3"> <animate attributename="r" dur="5" from="3" repeatcount="100" to="70"> </animate></circle> <circle cx="450" cy="450" fill="yellow" r="1"> <animate attributename="r" dur="5" from="1" repeatcount="100" to="30"> </animate></circle> <circle cx="300" cy="300" fill="orange" r="3"> <animate attributename="r" dur="5" from="3" repeatcount="100" to="70"> </animate></circle> <circle cx="300" cy="300" fill="yellow" r="1"> <animate attributename="r" dur="5" from="1" repeatcount="100" to="70"> </animate></circle> </svg>