SVG Filter Effects: Moving Forward
By Sara Soueidan on
In this last article of our SVG Filter Effects series, we share a list of useful resources to learn more about SVG Filters.
svg
SVG Filter Effects: Outline Text with <feMorphology>
By Sara Soueidan on
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.
Freebie: Emojious Icons (AI, SVG, PNG)
By Emojious on
A set of 50 vector icons from the quirky Emojious icon set exclusively for Codrops readers.
SVG Filters 101
By Sara Soueidan on
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.
Creative SVG Strokes Animation
By Alaric Baraou on
A creative strokes animation of a bike illustration powered by SVG and GSAP.
Dynamic Shape Overlays with SVG
By Yoichi Kobayashi on
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
By Mary Lou on
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
Morphing Page Transition
By Mary Lou on
A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.
Freebie: Hand-drawn Geek’s Treasure Chest (AI, EPS, PDF, SVG, PNG)
By Tatiana Lapina on
A set of 60 hand-drawn, playful illustrations all around tech and Web perfect for giving that unique touch to your next project.
First Person Sunglasses Try-On Experiment
By Mary Lou on
A fun "try-on" experiment that shows a first person view through the colored lenses of sunglasses, mimicking the movement of putting them on and off.
Freebie: Drone Icons (AI, Sketch, SVG, PNG, Iconjar)
By Round Icons on
A free drone icon set in solid and line style with 50 easy-to-adjust icons in AI, Sketch, SVG, PNG and Iconjar format. An exclusive set from the gigantic Native Line
Freebie: Smoothies Icon Set (AI, SVG, PNG)
By Manuela Langella on
A free icon set of 12 yummy smoothies made with soft shading and modern shapes. The illustrations come in SVG, AI and ready-to-use optimized PNG format in three diff
Interactive Musical Instruments
By Mary Lou on
Experimental ideas for playful musical interactions powered by MIDI.js and the Web Audio API. Play instruments or make sounds by interacting with content.
Surf Report Template
By Mary Lou on
A simple template of a weekly surf report with an animated SVG graph and a sliding content panel. The layout is powered by flexbox and viewport units. Highly experim
Fancy SVG Letter Animation
By Mary Lou on
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
By Mary Lou on
An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js.
Interactive Record Player
By Mary Lou on
An experimental template with an interactive old school record player powered by the Web Audio API.
Distorted Button Effects with SVG Filters
By Adrien Denat on
A set of inspirational, highly experimental distortion effects for buttons using SVG filters.