Studio
GithubDribbbleTwitter
Richard Zimerman

August 19, 2019

How to add svg waves to your next web project

SVG waves can add some softness to section breaks in html, but creating naturally looking waves can be tricky. That’s where getwaves.io comes in!

Share
waves and blobs
Design with waves and blobs

With getwaves.io you can easily create smooth and unique SVG waves. By using the randomizer you can be sure that you don’t create repetitive designs. You can then either download your wave as an SVG, or copy the SVG code directly. In this tutorial, I will focus on how to get those waves into your html design and make them look good.

Here are some examples of what waves can look like:

banner
Waves in web design examples

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:

result
Result

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:

Animated result

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:

Have fun making 🌊🌊🌊!

Get our latest articles on design, UX, data visualisation, and code in your inbox.

Have a project in mind? Get in touch and let's make something cool. 

hello@zcreativelabs.comGet in touch

Newsletter

Sign up to get our latest articles on design, data visualization, and code directly in your inbox.

z creative labs GmbH
Sihlquai 131, 8005 Zurich
Switzerland

GithubDribbbleTwitterEmail

© 2020 z creative labs GmbH