There are a couple of approaches to how you can embed these waves in your designs. In this tutorial I will concentrate on a more advanced use case, where you can have an image in the background, and a wave that overlaps with the image.

1. Set up a project

For this project we will only need one index.html file and a styles.css . If you already have a project, just use whichever html file/template you want the wave in. Here’s my project structure 😉:

index.html

styles.css

Here is the outline of index.html :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Make some waves!</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="wave-container">

<!-- Your wave goes here... -->

</div>

</body>

</html>

Here is the outline of styles.css :

html {

box-sizing: border-box;

}

*,*::before,*::after {

box-sizing: inherit;

}

body {

margin: 0;

}

.wave-container {

background: #EEE;

}

.wave-container > svg {

display: block;

}

If you use a background image, you can assign that to the wave-container . It will be automatically masked by the SVG element containing the wave. The rest of the styles are fairly self-explanatory. Make sure that your SVG has display: block; set, otherwise you will have a white space below your SVG element (You can also set display: inline-block; and vertical-align: middle; ).

2. Make some waves!

Now you can go to getwaves.io and make some SVG waves. Once you find a wave you like, copy the SVG code and paste that code into the .wave-container in your index.html file ( <!-- Your wave goes here... --> ).

Your wave will be positioned inside the wave-container, and it will scale proportionately, based on the viewBox attribute. Add some more elements, and you get a pretty nice header.

<div class="wave-container">

<h1>Hello, world!</h1>

<p>Check out my awesome waves!</p>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">

<path fill="#FFF" d="…"></path>

</svg>

</div>

Here are the styles to make this look a little bit better:

body {

margin: 0;

font-family: system-ui, sans-serif;

}

.wave-container {

position: relative;

background: #09F;

color: #FFF;

text-align: center;

overflow: hidden;

}

h1 {

font-size: 5rem;

margin: 7rem 1.25rem 2.5rem 1.25rem;

}

p {

font-size: 1.5rem;

margin: 0 1.25rem 5rem 1.25rem;

}

Here’s the result:

It’s a start…

3. Animate your wave

One cool thing with these kinds of waves is that it is really easy to animate them, and add some nice movement to your website. If you are dreading some advanced javascript tweening, don’t worry, there is a much easier way to get some nice animation going here. All you need are some transforms and css keyframe animations.

@keyframes animateWave {

0% {

transform: scale(1,0);

}

100% {

transform: scale(1,1);

}

}

.wave-container > svg {

display: block;

transform-origin: bottom;

animation: animateWave 1000ms cubic-bezier(0.23, 1, 0.32, 1) forwards;

}

By transforming scale y, we make sure that the wave grows only vertically, not horizontally. By using transform-origin: bottom; you can make the wave “rise” from the bottom, rather than expand from the middle. I added some custom easing just for fun.

And here’s the final result:

Final result with an animated wave.

So there you have it, a simple way to add some animated waves into your next project. You can also hook this animation up to a waypoint trigger (using intersection observer) if you are using waves somewhere further down in your designs. Either way, give it a try. Head on over to getwaves.io, and make some waves!

If waves are not your thing, you can also try the same exercise using the other curve options from getwaves.io (steps or peaks).

Waves + Blobs = ❤️🔥😎

Waves can be paired really nicely with blobs, so if you are looking for unique, natural, and organic blob shapes, check out blobmaker.app. If you combine the two, you can create some really nice designs:

Keep in touch!

If you like using getwaves.io, give us an upvote on Product Hunt.

Check out getwaves.io on Product Hunt

Have fun making 🌊🌊🌊!