Waves in CSS or Svg

Waves in CSS or SVG

I would suggest using an inline handcoded SVG. Your shapes are pretty simple an making the waves with the SVG <path> element is easy.

All you need to know about the SVG path on MDN. In the following example, I used two path elements with quadratic bezier curves to make the waves :

svg {  background: url('https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg') no-repeat center center;  background-size: cover;  width: 100%;  display: block;}

<svg viewbox="0 0 100 25">  <path fill="#9EAFFD" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z" />  <path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" /></svg>

full width wave in CSS, SVG

1. You need to add a wrapper for the SVGs
2. Add preserveAspectRatio="none" to every one of the SVGs elements
3. Add position absolute with 100% width and hight to the SVG elements

Like the following:

<div class="svg-wrapper">
  <svg viewbox="0 0 100 25" preserveAspectRatio="none">
    <path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
  </svg>

CSS

body{
  padding:0;
  margin:0;
}
.svg-wrapper{
  display:block;
  position: relative;
  width: 100%;
  height: 80px;
  background: rgba(0,0,0,0.1)
}
.svg-wrapper svg{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height: 100%;
}

SVG to make a wave effect border and allow it to stretch horizontally only

Simply add preserveAspectRatio="none"

.page {
  height: 400px;
  width: 100%;
  background: green;
}

.pls-sticky-header {
  position: relative;
  height: 150px;
  background-color: red;
}

.wave {
  position: absolute;
  bottom: 0;
  height:30%;
  left: 0;
  width: 100%;
}

<div class="page">
  <div class="pls-sticky-header">
    <svg viewBox="0 0 1440 200" class="wave" preserveAspectRatio="none">
        <path fill="#ffffff" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,90.7C320,96,400,128,480,154.7C560,181,640,203,720,192C800,181,880,139,960,106.7C1040,75,1120,53,1200,58.7C1280,64,1360,96,1400,112L1440,128L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
    </svg>
  </div>
  <div class="content"></div>

SVG Wave animation at the bottom of a video background hero

The class .waves has a background-color you need to remove. Then you can use a negative margin in order to pull the waves up. I also added position:relative to .waves so it applies the z-index.

.newHero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: linear-gradient(160deg, rgba(46, 59, 78,1), rgba(255, 64, 64,0.3));
  /*background: rgba(46, 59, 78, 0.85);*/
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 70vh;
}
.newHero h2 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
  max-width: 550px;
}
.newHero p {
  max-width: 550px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: 30px;
}

.newHero a {
  font-size: 20px;
  transition: 0.5s;
  margin-left: 25px;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
}

.newHero a:hover i {
  color: #fff;
}   

.newHero i {
  color: rgba(255, 255, 255, 0.5);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 12px;
}

.video-bg {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

.waves {
  height: 60px;
  width: 100%;
  margin-top: -30px;
  z-index: 10;
  position: relative;
}

.wave1 use {
  -webkit-animation: move-forever1 10s linear infinite;
  animation: move-forever1 10s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.wave2 use {
  -webkit-animation: move-forever2 8s linear infinite;
  animation: move-forever2 8s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.wave3 use {
  -webkit-animation: move-forever3 6s linear infinite;
  animation: move-forever3 6s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

@-webkit-keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@-webkit-keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@-webkit-keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

<div class="newHero">
  <h2>Using Sail Training to Inspire & Change Lives</h2>
  <p>Morvargh Sailing Project is a youth development organisation that helps young people become more confident, more resilient, more motivated and better able to communicate though volunteer led, life-changing sail training voyages.</p>
  <a href="tel:xxxx" class="d-flex align-items-center"><i class="fa-solid fa-phone-volume"></i>Contact Us</a>
  <video class="video-bg" autoplay muted loop>
    <source src="frontend/vid/MSP.mp4" type="video/mp4" >
  </video>
</div>
<div class="waves">
  <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none">
    <defs>
      <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">
    </defs>
    <g class="wave1">
      <use xlink:href="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)">
    </g>
    <g class="wave2">
      <use xlink:href="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)">
    </g>
    <g class="wave3">
      <use xlink:href="#wave-path" x="50" y="9" fill="#fff">
    </g>
  </svg>
</div>

CSS 3 or svg wave in a background

I slightly improved version of akshay's answer. This includes two separate options.

OPTION 1

If aspect ratio doesn't have to be preserved, then the curve will change with width.

http://jsfiddle.net/f6n73avk/2/

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100%" viewBox="0 0 90 20" preserveAspectRatio="none">
    <path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>

OPTION 2

If the aspect ratio has to be preserved, then we have to use same units value for height and width of svg element.

http://jsfiddle.net/o1eghm7v/1/

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 90 20" >
    <path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>

See here I used width and height both as 100%. To change the colour you have to change the value of fill attribute.
Also, I have used absolute path commands as they are simpler to edit.

Explanation

M - command moves the drawing point to the the coordinates specified after it, or 0,5 (SVG coordinate system)

H draws Horizontal line to specified X-coordinate from the current point (0,5)

C draws cubic bezier, with first point coords as first handle, second second handle, and third is the end point.

S draws a cubic bezier, but its first handle is the reflection of the last handle of last C command about the end point of last C.

V draws vertical line to specified Y-coordinate.

Z closes the path, ie draws a straight line from current point to last M point.

How to put texts in svg waves

If you just want the text above the svg wave, what you can do is:

HTML:

<div class="wave-container">
  <div class="text-container">
    <h1>Hello, world!</h1>
    <p>Check out my awesome waves!</p>
  </div>
  <svg>the svg wave</svg>
</div>

CSS:

.wave-container{
    position: relative;
}
.text-container{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Just try this, hope this will help ;-)

What is the best way to make background waves in an html page?

There are websites that can help you create waves as a background, they give you several options on how to create waves.

You just need to enter the website, see how you want your waves to be created, and they will give you HTML and CSS code to add to your document, and it is responsive!

In the example below I created the div wave, it will simply fill 100% of the page with skyblue color and will center all elements in the center. You don't really need it, don't worry about it.

You can just ignore the div wave, and if you want to add color to the element's background, use body { background-color: your_color;}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Waves</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .custom-shape-divider-bottom-1608219034 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
            transform: rotate(180deg);
        }

        .custom-shape-divider-bottom-1608219034 svg {
            position: relative;
            display: block;
            width: calc(100% + 1.3px);
            height: 150px;
        }

        .custom-shape-divider-bottom-1608219034 .shape-fill {
            fill: #000000;
        }

        .wave {
            background-color: skyblue;
            /* position: relative; */
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
        }
        .wave .box h1 {
            color: white;
            display: flex;
            justify-content: center;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
    </style>
</head>

<body>
    <div class="wave">
        <div class="box">
            <h1>Hello World</h1>
        </div>
        <div class="custom-shape-divider-bottom-1608219034">
            <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"
                preserveAspectRatio="none">
                <path
                    d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
                    opacity=".25" class="shape-fill"></path>
                <path
                    d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
                    opacity=".5" class="shape-fill"></path>
                <path
                    d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
                    class="shape-fill"></path>
            </svg>
        </div>
    </div>
</body>

</html>

---

Related Topics