Open In App

Designing a Working Table Fan using HTML and CSS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In this article, we will design a Working Table-fan using HTML and CSS.

List of HTML tags used:

  • Polyline: The <polyline> element is used to create the HTML <svg> element which is a container for SVG graphics any shape that consists of only straight lines
  • div: The <div> tag defines a division or a section in an HTML document.
  • svg: The HTML <svg> element is a container for SVG graphics
  • circle: The HTML <circle> element is used to create circle
  • style: The HTML <style> element is used to provide internal CSS.

Example: Here is the implementation of the above method.

HTML




<!DOCTYPE html>
<html>
<head>
    <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;
        }
 
        .main_container {
            background-color: #308D46;
            border-radius: 50%;
            height: 180px;
            width: 180px;
            margin: auto;
        }
    </style>
</head>
<body>
    <center>
        <h3 style="color:green">Its Geek Time</h3>
     
 
        <div class="main_container">
            <div class="blade_container">
                <svg width="100%" height="100%">
                    <polyline style="stroke-linejoin:miter;
                    stroke:white; stroke-width:12;
                    fill:white;" points=
                    "90 90, 0 90, 90 90,
                    90 0,90 90,180 90,
                    90 90,90 180,90 90,
                    27 27,90 90,
                    153 27,90 90,
                    27 153,
                    90 90,
                    153 153" />
                </svg>
            </div>
        </div>
         
        <img src=
            style="z-index:-1;">
    </center>
</body>
</html>


Output:



Last Updated : 24 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads