From the course: SVG: Clipping, Masking, and Filters

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

feBlend

feBlend

From the course: SVG: Clipping, Masking, and Filters

Start my 1-month free trial

feBlend

“

- [Morten] The feBlend filter primitive allows us to blend two layers together using one of several blending modes. You can think of this like the blend option in a graphic application like Photoshop or Illustrator, where we take two layers and we set a blend mode between them to get a new effect. Well you can do that to a limited degree in your browser using feBlend. In the example for feBlend, we are applying the filter to the image element, that's the large picture in the background, and I've also taken away the other elements 'cause they're just distracting for this example. Right now in the filer, we have feFlood, which just floods the entire space with the solid color green, and then down here, we have the feBlend filter primitive. FeBlend has three attributes, the first one is in, this is the original graphic you want to bring in. In this case, SourceGraphic, which is the original image here. Then we have in2, which is the other graphic element you want to blend with. You need…

Contents