Search
Case Study: Duten’s 2024 Website
17.10.2024
Explore the dynamic collaboration between designer Sébastien Salord and the talented team at Incredibles Development Studio as they join forces to take Duten’s digital presence to the next level
Scroll-based SVG Filter Animations on Text
22.8.2024
A small set of scroll-based SVG filter animations on HTML text
On-Scroll SVG Filter Effect
5.7.2023
Combining GSAP's Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani
Superhero Animation Effect with SVG Filters
9.8.2021
Learn how to create an interactive superhero-like illustration effect for the web using SVG filters and masks.
The post Superhero Animation Effect with SVG Filters appeared first on Codrops
Adding Shadows to SVG Icons With CSS and SVG Filters
11.6.2021
Why would we need to apply shadows to SVG?
Shadows are a common design feature that can help elements, like icons, stand out. They could be persistent, or applied in different states (e.g. :hover, :focus, or :active)
…
The post Adding Shadows to SVG Icons With CSS and SVG Filters appeared...
Thumbnail Hover Effect with SVG Filters
9.6.2021
A simple thumbnail hover effect with an SVG filter distortion.
The post Thumbnail Hover Effect with SVG Filters appeared first on Codrops
Creating Patterns With SVG Filters
15.3.2021
For years, my pain has been not being able to create a somewhat natural-looking pattern in CSS. I mean, sometimes all I need is a wood texture. The only production-friendly solution I knew of was to use an external image, …
The post Creating Patterns With SVG Filters appeared first...
Distorted Link Effects with SVG Filters
4.3.2020
A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
Distorted Link Effects with SVG Filters was written by Mary Lou and published on Codrops
Image Distortion Effects with SVG Filters
12.3.2019
Three distortion effects powered by SVG filters that are applied to an image when hovering a link.
Image Distortion Effects with SVG Filters was written by Mary Lou and published on Codrops
SVG Filter Effects: Moving Forward
26.2.2019
In this last article of our SVG Filter Effects series, we share a list of useful resources to learn more about SVG Filters.
SVG Filter Effects: Moving Forward was written by Sara Soueidan and published on Codrops
SVG Filter Effects: Creating Texture with <feTurbulence>
19.2.2019
Learn how you can use the powerful SVG filter primitive <feTurbulence> to create your own textures and distortion effects.
SVG Filter Effects: Creating Texture with <feTurbulence> was written by Sara Soueidan and published on Codrops
SVG Filter Effects: Conforming Text to Surface Texture with <feDisplacementMap>
12.2.2019
Learn how to make text conform to the texture of a surface using feDisplacementMap in this fifth article of our SVG Filter series.
SVG Filter Effects: Conforming Text to Surface Texture with <feDisplacementMap> was written by Sara Soueidan and published on Codrops
SVG Filter Effects: Duotone Images with <feComponentTransfer>
5.2.2019
This fourth article in our SVG Filter series will show you how to use feComponentTransfer to create a duotone filter effect.
SVG Filter Effects: Duotone Images with <feComponentTransfer> was written by Sara Soueidan and published on Codrops
SVG Filter Effects: Poster Image Effect with <feComponentTransfer>
29.1.2019
Learn how feComponentTransfer works and how you can posterize images with this powerful SVG filter primitive.
SVG Filter Effects: Poster Image Effect with <feComponentTransfer> was written by Sara Soueidan and published on Codrops
SVG Filter Effects: Outline Text with <feMorphology>
22.1.2019
In this second part of our SVG Filter series you'll learn all about the feMorphology filter, how it works and how you can use it to create interesting effects.
SVG Filter Effects: Outline Text with <feMorphology> was written by Sara Soueidan and published on Codrops
SVG Filters 101
15.1.2019
The first article in a series on SVG filters. This guide will help you understand what they are and show you how to use them to create your own visual effects.
SVG Filters 101 was written by Sara Soueidan and published on Codrops