In Articles
SVGator introduces Lottie file support, offering an easy-to-use platform for creating and exporting Lottie animations for free. Learn how to create, edit, and benefit from Lottie animations in this guide.
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 Tutorials by Louis Hoebregts
In this tutorial, you’ll learn how to recreate a captivating motion type effect using SVG and GreenSock.
In Playground by Marlène Bruhat
Several interactive cursor effects made with JavaScript and SVG.
In Tutorials by Manoela Ilic
A short tutorial on how to animate SVG paths while smooth scrolling a page.
In Tutorials by Louis Hoebregts
Learn how to code creative animations using SVG paths and the getPointAtLength() function.
In Playground by Manoela Ilic
A little menu effect with an SVG overlay and an infinite background CSS animation.
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
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 Tutorials by Kyle Wetton
Learn a simple technique for adding a color swap functionality to your product images by creating an SVG and applying a mix-blend-mode to the composition.
In Tutorials by Paul Henschel
Learn how to pull apart SVGs in 3D space with Three.js and React, using abstractions that allow us to break the scene graph into reusable components.
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.
In Articles by Sara Soueidan
Learn how you can use the powerful SVG filter primitive <feTurbulence> to create your own textures and distortion effects.