SVG <feBlend> Element

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. 

<feBlend> element is used to combines two images or SVG fragments into a single graphic. It executes a pixel-wise combination of two input SVG fragments or images. 

Syntax:

 <feBlend in="" in2="" mode=""/>

Attributes:

• in - It identifies input for the given filter primitive.
• in2 - It identifies the second input for the given filter primitive. It takes on the same values as the ‘in’ attribute.
• mode -  It defines the blending mode on the <feBlend> filter primitive. If mode is not specified, the normal value is executed.

Example 1:

Output:

Example 2:

Output: