Lines to Content Layout Animation
by Mary Lou
A simple layout switch example where we go from a typography row view with inline images to a large image preview with more content.
+ more#filter
Hover Preview Effect with Mini Map
by Mary Lou
An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor.
+ more
Slideshow with Filter Reveal Effect
by Mary Lou
A slideshow page layout with a filter enhanced navigation effect.
+ 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
Exploring Animations for Menu Hover Effects
by Mary Lou
A couple of ideas for creative menu hover animations with images.
+ 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
Image Dragging Effects
by Mary Lou
A set of playful dragging effects for images using various techniques.
+ more
Image Trail Effects
by Mary Lou
A set of brutalist effects for mouse-following image trails that show a random series of images.
+ 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
SVG Filter Effects: Creating Texture with <feTurbulence>
Learn how you can use the powerful SVG filter primitive <feTurbulence> to create your own textures and distortion effects.
+ more
SVG Filter Effects: Conforming Text to Surface Texture with <feDisplacementMap>
Learn how to make text conform to the texture of a surface using feDisplacementMap in this fifth article of our SVG Filter series.
+ more
SVG Filter Effects: Duotone Images with <feComponentTransfer>
This fourth article in our SVG Filter series will show you how to use feComponentTransfer to create a duotone filter effect.
+ more
SVG Filter Effects: Poster Image Effect with <feComponentTransfer>
Learn how feComponentTransfer works and how you can posterize images with this powerful SVG filter primitive.
+ more