Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Design Wave Image in HTML ?

  • Difficulty Level : Hard
  • Last Updated : 06 Aug, 2021

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: 

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

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!