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
How to Design Wave Images in HTML?
HTML has an SVG element that can be used for designing wave images. The wave image shows the unique style of the webpage and it becomes more user interactive while adding the property of animation and transitions to it. The wave design is generally used in the landing page, button, and webpage image. To create the wave image, the SVG element is the best way to design the wave formation.
Syntax
<svg viewBox="min-x min-y width height"> <path d="create_path" style="stroke: value_name; fill: value_name;"></path> </svg>
The SVG element is used to draw the graphics.
The viewbox attribute defines the position and dimension of the graphics. The min-x and min-y represent the coordinate of left and right respectively. The height defines the height of the graphics and the width defines the graphics' width.
Path − It defines the path to be drawn.
stroke − The property applies to any kind of line.
fill − To fill the color into graphics.
Properties Used
The following properties used in both examples are −
color − Define the color of the text.
text-align − Definte the text to be centered.
font-size − Define the size of the text.
background − Define the color of the body.
overflow − To set the value as hidden which defines the unwanted horizontal scrolling.
position − To set the value as relative which defines the normal position.
bottom − To set the vertical position on the downside.
left − To set the length of the horizontal position.
top − To set the length of the upside position.
animation − To change one style from another.
transform − This property allows us to move and rotate the graphics.
margin-left − Define the left margin of the element.
Visual Representation of Wave Image
Example 1
In this example, we will first set the body background color to yellow using an inline CSS that turns the whole page into a single color. Secondly, it will use the division element to specify the particular section. Then use the SVG element to set the attribute named viewbox and define all the values i.e. min_x, min_y, width, and height. Next, use the path tag and set all of its attributes, and get the output.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body style="background-color: yellow;">
<div>
<svg viewBox="0 0 500 500">
<path d="M0,20 C120,150 180,0 500,100, L500,00 L0,0 Z" style="stroke: none; fill:blue;"></path>
</svg>
</div>
</body>
</html>
Example 2
In this example, we will create the two division elements to set the two different classes i.e. ocean and wave. The ocean class styles the settlement of waves by defining some properties of its. Then wave class uses the properties of the background image, animation, transform, and @keyframe to build the dynamic flow of waves in the webpage.
<!DOCTYPE html>
<html>
<title>Wave Image</title>
<head>
<style>
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: powderblue;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: relative;
top: -198px;
width: 3000px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0); }
@keyframes wave {
0% {
margin-left: 0; }
100% {
margin-left: -1200px;
}
}
</style>
</head>
<body>
<div class="ocean">
<div class="wave"></div>
</div>
</body>
</html>
Conclusion
We saw there are two different types of wave images using HTML. In example 1, the SVG tag draws the graphics of the wave image by using some references in it. But in example 2, the CSS properties like animation, transform, position, etc. are used to create the beautiful wave image. The wave images website looks better visibility to the user.
391 Views
