On-Scroll SVG Filter Effect
In Playground by Manoela Ilic
Combining GSAP’s Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani.
In Playground by Manoela Ilic
Combining GSAP’s Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani.
In Playground by Manoela Ilic
A fun gooey cursor background effect with SVG filters and CSS blend modes.
In Playground by Manoela Ilic
Some ideas for hover effects using clip-path animations where the same image gets revealed in a creative way.
In Playground by Marlène Bruhat
Several interactive cursor effects made with JavaScript and SVG.
In Playground by Manoela Ilic
A simple layout switch example where we go from a typography row view with inline images to a large image preview with more content.
In Playground by Manoela Ilic
An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor.
In Playground by Manoela Ilic
A slideshow page layout with a filter enhanced navigation effect.
In Tutorials by Abner Nascimento
Learn how to create an interactive superhero-like illustration effect for the web using SVG filters and masks.
In Playground by Manoela Ilic
A simple thumbnail hover effect with an SVG filter distortion.
In Playground by Manoela Ilic
A couple of ideas for creative menu hover animations with images.
In Playground by Manoela Ilic
Some ideas for interactive custom cursor animations using SVG filters.
In Playground by Manoela Ilic
Some examples of how to use decorative distortion effects on big typography menu links.
In Playground by Manoela Ilic
A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
In Playground by Manoela Ilic
A demo that shows how to animate SVG text on a path on scroll using the Intersection Observer API and SVG filters.
In Playground by Manoela Ilic
A set of playful dragging effects for images using various techniques.
In Playground by Manoela Ilic
A set of brutalist effects for mouse-following image trails that show a random series of images.
In Playground by Manoela Ilic
Three distortion effects powered by SVG filters that are applied to an image when hovering a link.
In Articles by Sara Soueidan
In this last article of our SVG Filter Effects series, we share a list of useful resources to learn more about SVG Filters.