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.
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!