CSS 3 or Svg Wave in a Background

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.

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>

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>

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>

Wavy shape with css

I'm not sure it's your shape but it's close - you can play with the values:

https://jsfiddle.net/7fjSc/9/

#wave {  position: relative;  height: 70px;  width: 600px;  background: #e0efe3;}#wave:before {  content: "";  display: block;  position: absolute;  border-radius: 100% 50%;  width: 340px;  height: 80px;  background-color: white;  right: -5px;  top: 40px;}#wave:after {  content: "";  display: block;  position: absolute;  border-radius: 100% 50%;  width: 300px;  height: 70px;  background-color: #e0efe3;  left: 0;  top: 27px;}
<div id="wave"></div>

How to invert wave svg with css?

In order to invert the wave you need to scale it. For example your svg is this:

svg{border:1px solid;transform:scale(-1,1)}
<svg viewBox="0 45 64 19" ><path d="M0 48 C30 60 38 40 64 48 L64 64 L0 64 Z"  stroke="red" /></svg>


Related Topics



Leave a reply



Submit