Distorted Link Effects with SVG Filters

A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
DistortedLink_featured

From our sponsor: Grow with Mailchimp's All-in-One Marketing Platform

Today we’d like to share some ideas for distorted link effects with you. Inspired by Adrien Denat’s Distorted Button Effects with SVG Filters, we wanted to explore some effects on links, specifically lines, using SVG Filters. There’s lots to explore here, so we’d made a simple demo that shows a couple of these effects.

If you’d like to understand the underlying mechanism of how an SVG filter effect works, we recommend checking out Adrien’s article. And as always, we highly recommend Sara’s series on SVG filters.

Using underlines, circles and squares creates fun results. You can apply the SVG filter to any HTML elements, including the link text itself (see the last example).

We hope you enjoy these effects and get inspired!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.