CSS Wavy Text Generator

Did you know it's possible to create wavy text with CSS?

In this tutorial I will show you how to use CSS for creating an awesome wavy distorted text with just a few lines of code.

The HTML Code

First we will need the text element that we will transform into a wavy text effect. Let's put it in a h1 tag like this:

<h1 class="wavy-text">Wavy Text</h1>

We will use the wavy-text CSS class name to create the effect using a SVG filter.

SVG Wavy Text using feTurbulence and feDisplacementMap

We’ll use SVG turbulence filter. Basically it’s a filter that creates a turbulence effect on any element which is very useful for creating water and cloud effect.

In our case we will distort the text element with using the SVG turbulence filter together with the displacement filter. Here's the SVG filters definition:

<svg width="100%" height="100%" style="display:none;">
 <defs>
  <filter id="wavy" filterUnits="userSpaceOnUse" x="0" y="0">
   <feTurbulence id="wave-animation" numOctaves="1" seed="1" baseFrequency="0 0.0645034">
   </feTurbulence>
   <feDisplacementMap scale="10" in="SourceGraphic"></feDisplacementMap>
  </filter>
  <animate xlink:href="#wave-animation" 
    attributeName="baseFrequency" 
    dur="3s" 
    keyTimes="0;0.5;1" 
    values="0.0 0.04;0.0 0.07;0.0 0.04"    
    repeatCount="indefinite"></animate>
</defs>
</svg>

So, what do we have here?

We combine feTurbulence and feDisplacementMap to generate the wavy text effect. Then, we animate the effect in an infinite loop of 3 seconds in which we vary the baseFrequency of the turbulence filter.

We apply it to our HTML element using the CSS filter property like this:

    .wavy-text{
      filter:url('#wavy');
    }

Here's the effect we get:

What Can You Do With This Wavy Text Generator?

Using this simple CSS wavy filter you can easily implement an online generator like this wavy text generator on coding-dude.com

Users can input their own text even putting in emojis and text symbols like these: ✬❀☎❆🤠👽🖖 and then copy/paste the wavy text into their own pages.

You can even try using webfonts that are already a bit wavy, like this cool free wavy font from PhotoshopSupply