Open In App

How to Design Wave Image in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

Waves are simple designs that can be generated on an HTML page which enhances the overall look of the website and make it more attractive and designer. These waves can be used in designing the background of the landing pages, Images, responsive buttons, products, and areas of the web pages with the help of CSS and HTML. There can either be a static wave or an animated wave referring to preferences.  

Waves can be created in two ways: 

Pros and Cons: The ::before and ::after selector method asks for exact pixel locations and so we get the dynamic wave and the patterns of the wave keep getting changed. Whereas, SVGs are the most optimized way to get waves displayed on the webpage. It quickly generates consistent-looking wavy patterns for the websites.

HTML code: The following example demonstrates how to design an SVG wave.

HTML




<!DOCTYPE html>
<html>
      
<head>
    <style>
        body {
            overflow: hidden;
        }
        svg {
            display: inline-block;
            position: absolute;
            top: 0;
            left:0;
            z-index: -1;
        }
        .container {
            display: inline-block;
            position: absolute;
            width: 100%;
            padding-bottom: 100%;
            vertical-align: middle;
            overflow: hidden;
            top: 0;
            left: 0;
        }
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h1 style="color:lawngreen;">
        Geeks For Geeks
    </h1>
      
    <div class="container">
      
        <!-- Creating a SVG image -->
        <svg viewBox="0 0 500 500"
            preserveAspectRatio="xMinYMin meet">
              
            <path d="M0, 100 C150, 200 350,
                0 500, 100 L500, 00 L0, 0 Z"
                style="stroke:none; fill:purple;">
            </path>
        </svg>
    </div>
</body>
  
</html>


Output:

Generated Wave



Last Updated : 06 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads