From the course: SVG: Clipping, Masking, and Filters
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
A basic filter example
From the course: SVG: Clipping, Masking, and Filters
A basic filter example
- [Instructor] Let's take a look at a practical example to see how filters work in real life. We are now in chapter two and this is the filterDemo example. Looking at the html document here, you'll see this time I'm applying the filter using a style rule, so we have a style rule declared here up in the html document, that has the filter property commented out. The filter property is targeting something with the ID theFilter. And if we scroll down into the SVG, you'll see here we have a filter element with the id theFilter. Inside this filter element we have a single filter primitive, feGaussianBlur, which applies gaussian blur to any element that we target. And inside feGaussianBlur, we have the standard deviation attribute, which allows us to control how much blur we apply. Now let's see how this affects the different elements we have in the graphic. We have two SVG elements here, we have an image, which is this image of a rock in the background, and then we have a rectangle. So…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.