Hover the mouse on the circle to make it disappeared

Animation of 289 circle arrange in an identical sequence (17×17) have two colour red and blue. Both the color are changing (red to blue and blue to red) with a time interval of 5 seconds. When You place the cursor of your mouse on any circle it becomes disappeared and again appear if you change the cursor position to other circle.(click on the circle if you are using mobile devices) .
Take look to the animation



What you need for creating animation like above.

●Basic knowledge of html and css.
●how to link external css.
●Any text editor, Better if you use html code editors.

Step creating div element and define its height and width by inline css.(i have define height=width=600 because it is best size for my blog page. )

<div style="width:600px;height:600px;" > </div>

Step second: Create an svg (scalable vector graphics) and define its height and width equal to 30 and 30 respectively. Now write circle code between svg opening and closing tag.

<svg height="30" width="30" > <circle fill="red" > <animate attributeName="fill" to="blue" dur="8s" repeatCount="500" /> </circle> <circle fill="blue" > <animate attributeName="fill" to="blue" dur="8s" repeatCount="500" /> </circle> </svg>

step third: Copy the above code and paste it between the code in second step. Paste code 145 times and delete any one svg element. So the animation becomes in square shape(17×17).

Step fourth : Now create an style tag and define circle property and hover property for circle as in below code.

<style> circle { cx:15; cy:15; r:13; transition: r 2s; } circle:hover { r:0; } </style>

Step fifth: Now make an html file of div and style tag you created and run it on any browser.

Download this animation html file