SVG feComposite Filter

by Online Tutorials Library July 14, 2022

The <feComposite> Filter

The <feComposite> is used to intersect two images. It takes two inputs, “in” and “in2”. By default, in is the SourceGraphic. The “in” attribute of operator is used to show the result of combining.

Example

  <!DOCTYPE html>  <html>  <body>  <svg height=”900″ width=”900″>    <filter id=”composite” y=”0″ x=”0″ width=”100%” height=”100%”>  <feTurbulence baseFrequency=”.05″ numOctaves=”3″ result=”B”/>  <feComposite in2=”B” in=”SourceGraphic” operator=”in” />  </filter>  <ellipse cx=”100″ cy=”87″ rx=”75″ ry=”87″ fill=”red” filter=”url(#composite)”/>    </svg>  </body>  </html>  

Test it Now

Next TopicSVG feBlend Filter

SVG feComposite Filter

The <feComposite> Filter

Example

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like