SVG Filters are just amazing!
So, lately, I have been exploring Haley Park’s website and it’s pretty cute and well designed. What caught my attention, though, was this water ripple effect on one of the text snippets.
Here’s what it looks like.
Breathe
As you can see, the text features a beautiful water ripple effect. I dug through the source code and found out that it’s done using the SVG filters!
So, I learned a bit about SVG filters, and here’s what I found out.
SVG filters are a powerful way to apply graphical effects to SVG elements. They can also be applied to HTML elements using the filter CSS property. Without SVG filters, achieving complex visual effects like the water ripple effect would require using images or complex JavaScript animations.
To recreate the water ripple effect, first, define the element you want to apply the effect to. In this case, it’s a simple paragraph with the text “Breathe”.
<p class="ripple-text">
Breathe
</p>
Next, define the SVG filter that you want to apply.
<svg style="position: absolute; width: 0px; height: 0px; pointer-events: none;">
<filter id="water-ripple">
<feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="2" result="ripple">
<animate attributeName="baseFrequency" dur="10s" values="0.02;0.05;0.02" repeatCount="indefinite"></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="ripple" scale="5"></feDisplacementMap>
</filter>
</svg>
As you can tell, we can define a filter using the <filter> element with id water-ripple.
Inside the filter, we use two filter primitives:
- The
<feTurbulence>element - It’s used to create a noise texture, which is then animated to simulate the water ripple effect. - The
<feDisplacementMap>element - It’s used to apply the turbulence effect to the text.
There are a bunch of parameters on these filters that you can tweak to achieve different effects.
For instance, in the <feTurbulence> element, we set the type to fractalNoise, which creates a fractal noise pattern. The baseFrequency controls the frequency of the noise, and numOctaves controls the complexity of the noise.
Similarly, for the <feDisplacementMap> element, the in attribute specifies the input image (in this case, the original text), and the in2 attribute specifies the turbulence effect created by <feTurbulence>. The scale attribute controls the amount of displacement applied to the text.
Also, the SVG is hidden from viewing by setting its width and height to 0 and positioning it absolutely.
Fun fact: The
fein the filter primitive names stands for “filter effect”.
Finally, apply the filter to the text by using the id of the filter in the CSS.
.ripple-text {
filter: url(#water-ripple);
font-size: 3rem;
font-weight: bold;
}
And that’s it! You now have a beautiful water ripple effect applied to your text using SVG filters.
I found this cool SVG filter playground where you can experiment with different filter primitives and see the effects in real-time. You can stack multiple filter primitives, change their parameters, and create complex effects.
And if you want to learn more about SVG filters, check out the MDN documentation on SVG filters for a comprehensive guide on how to use them.
👋 Hi there! This is Amit, again. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!
