Scroll-based SVG Filter Animations on Text
In Playground, by Manoela Ilic
A small set of scroll-based SVG filter animations on HTML text.
In Playground, by Manoela Ilic
A small set of scroll-based SVG filter animations on HTML text.
In Playground, by Manoela Ilic
Some experiments with on-scroll typography effects using SVG clip-paths.
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 Marlène Bruhat
Several interactive cursor effects made with JavaScript and SVG.
In Playground, by Manoela Ilic
A little menu effect with an SVG overlay and an infinite background CSS animation.
In Playground, by Manoela Ilic
A simple thumbnail hover effect with an SVG filter distortion.
In Playground, by Manoela Ilic
Exploring some experimental circular SVG text effects for an intro animation.
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
Three distortion effects powered by SVG filters that are applied to an image when hovering a link.
In Playground, by Alaric Baraou
A creative strokes animation of a bike illustration powered by SVG and GSAP.
In Playground, by Manoela Ilic
An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles.
In Playground, by Yoichi Kobayashi
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.
In Playground, by Manoela Ilic
A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content reveal effect.
In Playground, by Manoela Ilic
Some shape morphing hover effects on images using SVG clipPath. The idea is to create an organic, fluid feel by animating several elements on hover.
In Playground, by Manoela Ilic
An experimental SVG letter animation based on the Dribbble shot “Shading Letters in Illustrator” by Jake Bartlett. Powered by Julian Garnier’s anime.js.
In Playground, by Manoela Ilic
An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js.
In Playground, by Adrien Denat
A set of inspirational, highly experimental distortion effects for buttons using SVG filters.