Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Designing a Working Table fan using CSS?
CSS is a stylesheet language that may be used to style HTML elements on a website (Cascading Style Sheets). It is employed to provide your website greater visual impact. It provides the developers with the freedom to decide how your website should function. CSS has improved the responsiveness and interactivity of our website. The use of CSS by web designers facilitates the creation of dynamic and engaging websites. A user-friendly website with a large number of visitors is produced by using CSS, which offers a variety of properties, such as animation, shadowing, and others, to style the elements.
In this article, we will be learning about how to create a working table fan by simple use of HTML and CSS. We will be using the following HTML tags −
Polyline – The <polyline> element enables us to construct the HTML <svg> element, which is a container element for SVG graphics. Any shape which consists of solely straight lines is created with the help of <polyline> element.
Svg – It is used as a container element for SVG graphics.
Circle – It enables us to create circle.
HTML SVG Graphics
HTML SVG is an acronym that stands for Scalable Vector Graphics. Graphics in XML are described using HTML SVG, a modular language. Two-dimensional vector and mixed vector/raster graphics are described in XML. It is a W3C suggestion. In XML text files, SVG pictures and their behaviours are described. As XML files, SVG images can be designed and edited with text editors, but typically drawing programmes like Inkspace are used to do so.
Pie charts, 2-Dimensional graphs in an X-axis, Y-axis coordinate system, and other vectortype diagrams are frequently used in SVG. A SVG fragment's root is specified by the <svg> element. Every attribute and element in SVG files can be animated.
Syntax
<svg height= "value" width= "value"></svg>
SVG Circles
We can create circular graphics by using the <circle> tag. Other attributes within the <circle> tag are as follows −
Stroke – Specifies the color of the border of the circle
Cy – It is used for specifying the Y-coordinate of the center of circle
Cx – It is used for specifying the X-coordinate of the center of circle
R – Specifies the radius of the circle
Fill – Specifies the color of the circle
Stroke-width – Specifies the width of the border of circle
Syntax
<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
The <polyline> element enables the developers to create graphics or shapes which are made up of only 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 − Enables 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 Fan
The following example demonstrates the how to create a working table fan by using HTML and CSS.
Example
<!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 attributeName= "fill" to= "brown" dur= "8s" repeatCount= "1500"></animate>
</circle>
</svg>
</section>
<div class= "stick"> </div>
<div class= "stand"> </div>
</body>
</html>
218 Views
