Make a table fan with html and css

Animate html tag to make a table fan with the help of css and html.

What you need to make this animation with coding.
# Basic knowledge of html and css.
# Text editor like Notepad. Better if you use any code editor.

List of html tags used

1. polyline
2. animate
3. div
4. svg
5. circle
6. style

Method to make this table fan animation
First Step : Create an div tag and define its height and width with value so the blade of the fan can cover almost the entire area. Because we will rotate the whole div tag so the blades appear to be rotating. Give an class name to this div. After creating div tag create an svg element inside this tag and define its height and width with value of 100%

Step second : Second Step : Now write a new tag polyline inside the svg and make a plus symbol with center. Again create polyline tag and make another plus symbol so the line of both sing make 45° angle.

The look like this after completing the above Step:
<div class="blade_container"> <svg width="100%" height="100%" > <polyline style="stroke-linejoin:miter; stroke:red; stroke-width:12; fill: red;" points="90 90, 0 90, 90 90, 90 0,90 90,180 90,90 90,90 180" /> <polyline style="stroke-linejoin:miter; stroke:green; stroke-width:12; fill: green;" points="90 90,27 27,90 90,153 27,90 90,27 153,90 90,153 153" /> <circle cx="50%" cy="50%" r="10%" fill="red" > <animate attributeName="fill" to="yellow" dur="5s" repeatCount="1000"></animate> </circle> </svg> </div>

Step third : Now create another two div elements and give class name rode and stand.
Step fourth: Lets complete the last step , in this step you have to create an style sheet or create style tag in the above code file. As in below code:--

<style> .blade_container{ width:180px; height:180px; margin:auto; margin-top:50px; animation: blade 1s linear infinite; } @keyframes blade{ 0%{transform:rotate(360deg);} } .rode{ width:15px; height:150px; background-color:black; margin:auto; margin-top:0px; } .stand{ width:100px; height:15px; background-color:black; margin:auto; } </style>

Now save this text file in html format and run it on your browser.
Download this animation html file