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
Top comments (0)