How to Animate SVG Shapes on Scroll
by Mary Lou
A short tutorial on how to animate SVG paths while smooth scrolling a page.
+ more#svg
Animate Anything Along an SVG Path
Learn how to code creative animations using SVG paths and the getPointAtLength() function.
+ more
SVG Overlay and Infinite Menu Background Animation
by Mary Lou
A little menu effect with an SVG overlay and an infinite background CSS animation.
+ more
Superhero Animation Effect with SVG Filters
Learn how to create an interactive superhero-like illustration effect for the web using SVG filters and masks.
+ more
Thumbnail Hover Effect with SVG Filters
by Mary Lou
A simple thumbnail hover effect with an SVG filter distortion.
+ more
How to Code a Crosshair Mouse Cursor with Distortion Hover Effect
by Mary Lou
A quick tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion hover effect.
+ more
Circular SVG Text Animation
by Mary Lou
Exploring some experimental circular SVG text effects for an intro animation.
+ more
Simple CSS Line Hover Animations for Links
by Mary Lou
A couple of simple & subtle CSS-based line hover animations for links.
+ more
Morphing Gooey Text Hover Effect
by Mary Lou
Three gooey morphing hover effects using SVG filters for menu links based on a demo by Graham Pyne.
+ more
Animated Custom Cursor Effects
by Mary Lou
Some ideas for interactive custom cursor animations using SVG filters.
+ more
Ideas for Distorted Link Effects on Menus
by Mary Lou
Some examples of how to use decorative distortion effects on big typography menu links.
+ more
Distorted Link Effects with SVG Filters
by Mary Lou
A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
+ more
Animating SVG Text on a Path
by Mary Lou
A demo that shows how to animate SVG text on a path on scroll using the Intersection Observer API and SVG filters.
+ more
Motion Paths – Past, Present and Future
by Cassie Evans
The ability to animate along a motion path is a really useful thing to have in your SVG animation toolkit. Let's explore a few ways to achieve this, including the up
+ more
How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG
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.
+ more
Pulling Apart SVGs with Reusable WebGL Components Using React-three-fiber
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.
+ more
Image Distortion Effects with SVG Filters
by Mary Lou
Three distortion effects powered by SVG filters that are applied to an image when hovering a link.
+ more
SVG Filter Effects: Moving Forward
In this last article of our SVG Filter Effects series, we share a list of useful resources to learn more about SVG Filters.
+ more