CSS design a worksheet fan
Designing a Worksheet Fan with CSS
CSS is a style sheet language that can be used to style HTML elements on a website (Cascading Style Sheets). It’s used to give your website greater visual appeal. It gives developers the freedom to decide how your website functions. CSS improves the responsiveness and interactivity of our websites. Web designers use CSS to create dynamic and attractive websites. By using CSS, a user-friendly website with a large number of visitors can be created. It provides various properties such as animations and shadows for styling elements.
In this article, we will learn how to create a spreadsheet using simple HTML and CSS. We will use the following HTML tags:
- Polyline – The
<polyline>element allows us to build HTML<svg>element, which is a container element for SVG graphics. With the help of the<polyline>element, any shape composed entirely of straight lines can be created.
-
Svg – It is used as a container element for SVG graphics.
-
Circle – This element allows us to create circles.
HTML SVG Graphics
HTML SVG is an acronym that stands for Scalable Vector Graphics. Graphics are described in XML using a modular language called HTML SVG. Two-dimensional vector and mixed vector/raster graphics are described using XML. It is a W3C recommendation. SVG https://coder-cafe.com/wp-content/uploads/2025/09/images and their behavior are described in XML text files. As XML files, SVG https://coder-cafe.com/wp-content/uploads/2025/09/images can be designed and edited using a text editor, but are typically created using a drawing program like Inkspace.
Pie charts, two-dimensional graphics with X and Y coordinates, and other vector-based graphics are commonly used in SVG. The root of an SVG fragment is specified by the <svg> element. Every attribute and element in an SVG file can be animated.
Syntax
<svg height= "value" width= "value"></svg>
SVG Circle
We can create circular graphics using the <circle> tag. Other attributes within the <circle> tag are as follows –
- Stroke – Specifies the circle’s border color.
-
Cy – This specifies the Y coordinate of the circle’s center.
-
Cx – This specifies the X coordinate of the circle’s center.
-
R – This specifies the circle’s radius.
-
Fill – This specifies the circle’s color.
-
Stroke-width – This specifies the width of the circle’s border.
Grammar
<svg>
<circle cx= "value" cy= "value" r= "value" stroke= "value" stroke-width= "value" fill= "value" />
</svg>
Example
<!DOCTYPE html>
<html>
<body>
<h1> Tutorialspoint </h1>
<h2> SVG Circles </h2>
<svg height= "150" width= "150">
<circle cx= "60" cy= "60" r= "50" stroke= "yellow" stroke-width= "4" fill= "green" />
</svg>
</body>
</html>
SVG Polyline
<polyline> The element enables developers to create shapes or graphics consisting solely of straight lines.
Syntax
<polyline points= "Pair of points used to determine the shape" stroke= "color of the stroke" fill= "fill color for colored closed shapes">
Attributes
- points – Allows us to determine the shape
-
pathLength – Specifies the total length of the path.
Example
<!DOCTYPE html>
<html>
<body>
<h1> Tutorialspoint </h1>
<h2> SVG Polylines </h2>
<svg height= "300" width= "500">
<polyline points= "20,20 50,25 40,40 90,100 120,160 200,170" style= "fill:none; stroke:red; stroke-width:4" />
</svg>
</body>
</html>
Working Table The following example demonstrates how to create a worksheet fan using HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<title> Working Table Fan </title>
<style>
h1{
text-align: center;
text-decoration: underline;
color: green;
}
.blade_container{
width: 180px;
height: 180px;
animation: motion .5s ease-in infinite;
margin: auto;
margin-top: 40px;
}
@keyframes motion{
0%{
transform: rotate(360deg);
}
}
.stick{
margin: auto;
margin-top: 0px;
width: 20px;
height: 150px; background-color: brown;
}
.stand{
width: 150px;
height: 20px;
background-color: brown;
margin: auto;
}
</style>
</head>
<body>
<h1> Working Table Fan </h1>
<section class="blade_container">
<svg width= "100%" height= "100%" >
<polyline style= "stroke-linejoin:miter; stroke:brown; stroke-width:14; fill: brown;" points= "90 90, 0 90, 90 90, 90 0,90 90,180 90,90 90,90 180" />
<polyline style= "stroke-linejoin:miter; stroke:brown; stroke-width:14; fill: brown;" points= "90 90,30 30,90 90,160 27,90 90,27 160,90 90,160 160" />
<circle cx= "50%" cy= "50%" r= "15%" fill= "brown" >
</animate>
</circle>
</svg>
</section>
<div class="stick"> </div>
<div class="stand"> </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> Working Table Fan </title>
<style>
h1{
text-align: center;
text-decoration: underline;
color: green;
}
.blade_container{
width: 180px;
height: 180px;
animation: motion .5s ease-in infinite;
margin: auto;
margin-top: 40px;
}
@keyframes motion{
0%{
transform: rotate(360deg);
}
}
.stick{
margin: auto;
margin-top: 0px;
width: 20px;
height: 150px; background-color: brown;
}
.stand{
width: 150px;
height: 20px;
background-color: brown;
margin: auto;
}
</style>
</head>
<body>
<h1> Working Table Fan </h1>
<section class="blade_container">
<svg width= "100%" height= "100%" >
<polyline style= "stroke-linejoin:miter; stroke:brown; stroke-width:14; fill: brown;" points= "90 90, 0 90, 90 90, 90 0,90 90,180 90,90 90,90 180" />
<polyline style= "stroke-linejoin:miter; stroke:brown; stroke-width:14; fill: brown;" points= "90 90,30 30,90 90,160 27,90 90,27 160,90 90,160 160" />
<circle cx= "50%" cy= "50%" r= "15%" fill= "brown" >
</animate>
</circle>
</svg>
</section>
<div class="stick"> </div>
<div class="stand"> </div>
</body>
</html>