Image Distortion Effects with SVG Filters

In our recent articles series on SVG Filter Effects, Sara has shown how powerful and versatile SVG filters can be. They allow for a plethora of unique effects. Today we would like to share three animated distortion effects that we apply to an image when hovering a text link. We use feTurbulence and feDisplacementMap to create different kinds of fragment and wave-like distortions. These kind of effects have become quite popular and there are many variations. Menu hover animations showing an image in the background have also been around for a while and you can see an example that we’re based upon on Sara Marandi’s website.

If you’d like to understand how SVG filters work and learn how to create your own effects, we highly recommend you read Sara’s series:

• SVG Filters 101
• Outline Text with <feMorphology>
• Poster Image Effect with <feComponentTransfer>
• Duotone Images with <feComponentTransfer>
• Conforming Text to Surface Texture with <feDisplacementMap>
• Creating Texture with <feTurbulence>

Have a look at the effects we’ve created for the demos:

We hope you like these effects and find them useful!

References and Credits

• Charming by Yuan Qing
• TweenMax by Greensock
• Images from Unsplash.com