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
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
SVG Filter Effects: Outline Text with <feMorphology>
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.
+ more
Freebie: Emojious Icons (AI, SVG, PNG)
by Emojious
A set of 50 vector icons from the quirky Emojious icon set exclusively for Codrops readers.
+ more
SVG Filters 101
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.
+ more
Decorative Letter Animations
by Manoela Ilic
Some decorative shape and letter animations based on the Dribbble shot "Us By Night" by Animography.
+ more
Creative SVG Strokes Animation
A creative strokes animation of a bike illustration powered by SVG and GSAP.
+ more
Animated SVG Frame Slideshow
by Manoela Ilic
An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles.
+ more
Dynamic Shape Overlays with SVG
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.
+ more
Organic SVG Shape Morph Ideas
by Manoela Ilic
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
+ more
Morphing Page Transition
by Manoela Ilic
A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.
+ more
On-Scroll Morphing Background Shapes
by Manoela Ilic
A decorative website background effect where SVG shapes are morphing and transforming on scroll.
+ more
Freebie: Hand-drawn Geek’s Treasure Chest (AI, EPS, PDF, SVG, PNG)
A set of 60 hand-drawn, playful illustrations all around tech and Web perfect for giving that unique touch to your next project.
+ more
First Person Sunglasses Try-On Experiment
by Manoela Ilic
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.
+ more
Freebie: Drone Icons (AI, Sketch, SVG, PNG, Iconjar)
by Round Icons
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
+ more
Freebie: Smoothies Icon Set (AI, SVG, PNG)
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
+ more