SVG <feMerge> Filter

Last Updated:

What is <feMerge> Filter?

The <feMerge> SVG element allows filter effects to be applied concurrently instead of sequentially.

 

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg rect{ stroke: red; fill: green; } </style> </head> <body> <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <filter id="point" x="-40" y="-20" width="100" height="200"> <feOffset in="SourceGraphic" dx="60" dy="60" /> <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" /> <feMerge> <feMergeNode in="blur2" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <rect x="5" y="5" width="100" height="100" filter="url(#point)" /> </svg>  </body> </html>

Share this Page

Meet the Author