Skip to content
Related Articles

Related Articles

Improve Article

Designing a Working Table Fan using HTML and CSS

  • Difficulty Level : Basic
  • Last Updated : 21 Sep, 2021

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

List of HTML tags used:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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:

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :