Scroll-based SVG Filter Animations on Text
In Playground, by Manoela Ilic
A small set of scroll-based SVG filter animations on HTML text.
Searching for "svg"
We've found 244 results.
Experimental On-Scroll Text Animations with SVG Clip-Path
In Playground, by Manoela Ilic
Some experiments with on-scroll typography effects using SVG clip-paths.
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.
Custom SVG Cursors with an Interactive Emitter Effect
In Playground, by Marlène Bruhat
Several interactive cursor effects made with JavaScript and SVG.
SVG Overlay and Infinite Menu Background Animation
In Playground, by Manoela Ilic
A little menu effect with an SVG overlay and an infinite background CSS animation.
Thumbnail Hover Effect with SVG Filters
In Playground, by Manoela Ilic
A simple thumbnail hover effect with an SVG filter distortion.
Circular SVG Text Animation
In Playground, by Manoela Ilic
Exploring some experimental circular SVG text effects for an intro animation.
Distorted Link Effects with SVG Filters
In Playground, by Manoela Ilic
A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
Animating SVG Text on a Path
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.
Image Distortion Effects with SVG Filters
In Playground, by Manoela Ilic
Three distortion effects powered by SVG filters that are applied to an image when hovering a link.
Creative SVG Strokes Animation
In Playground, by Alaric Baraou
A creative strokes animation of a bike illustration powered by SVG and GSAP.
Animated SVG Frame Slideshow
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.
Dynamic Shape Overlays with SVG
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.
Organic SVG Shape Morph Ideas
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.
Organic Shape Animations with SVG clipPath
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.
Fancy SVG Letter Animation
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.
Item Reveal Animations with SVG
In Playground, by Manoela Ilic
An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js.
Distorted Button Effects with SVG Filters
In Playground, by Adrien Denat
A set of inspirational, highly experimental distortion effects for buttons using SVG filters.
