Free Sample Lesson
Every week Creative Coding Club members get a new lesson.
Enjoy this free sample.
In today's lesson I'll show you how we can drastically alter the appearance of an svg element by applying an SVG filter. SVG filters are made up of filter primitives which in simple terms modify individual pixels.
Understanding filter primitives is a science unto its own and something I'm not terribly familiar with but I'll provide loads of resources below for you.
I'm going to show you how to apply filters in Boxy SVG and explore their source code. We'll then hunt down which attributes we need to to target with GSAP to animate!
A really cool feature of SVG filters is that we can apply them to HTML elements to.
Watch the entire video to see a number of svg filters that can take your artwork to the next level.
If you would love to have new web animation lessons and challenges sent to your inbox each week AND also instantly unlock over 200 lessons for all skill levels check out my Creative Coding Club course bundle.
I absolutely guarantee you're going to love it.
This was 100% designed in Boxy SVG and animated with GSAP on CodePen.
If you get some joy scrubbing through this animation and say "I want to make animations like this", then my course bundle is for you!
The most comprehensive GSAP training on the planet
It can be hard to imagine what "over 200" lessons actually means, so I made a complete course list for you.