Attributes
Vachmi
The <feBlend> SVG filter primitive composes two objects together ruled by a certain blending mode.
This is in a way similar to putting one object as a layer on top of another.
Attribute
Description
in
Identifies the input for the given filter primitive
in2
Identifies the second input for the given filter primitive
mode
Specifies the blending mode on the <feBlend> filter primitive.
Possible values are
• normal (default)
• multiply
• screen
• darken
• lighten
Possible values are
• normal (default)
• multiply
• screen
• darken
• lighten
Here is the SVG code to draw this filter.
<svg id='feBlend1' fill='none' xmlns='http://www.w3.org/2000/svg' width="120" height="120" viewBox='0 0 240 240'>
<defs>
<filter id="filter1" x="-20%" y="-20%" width="140%" height="140%" >
<feFlood x="50" y="30" width="150" height="150" flood-color="#FFD700" flood-opacity="1" result="img1"/>
<feFlood x="100" y="70" width="150" height="150" flood-color="#8A2BE2" flood-opacity="1" result="img2"/>
<feBlend mode="normal" x="0%" y="0%" width="100%" height="100%" in="img1" in2="img2" result="blend"/>
</filter>
</defs>
<use style="filter: url(#filter1)">
</svg>
<defs>
<filter id="filter1" x="-20%" y="-20%" width="140%" height="140%" >
<feFlood x="50" y="30" width="150" height="150" flood-color="#FFD700" flood-opacity="1" result="img1"/>
<feFlood x="100" y="70" width="150" height="150" flood-color="#8A2BE2" flood-opacity="1" result="img2"/>
<feBlend mode="normal" x="0%" y="0%" width="100%" height="100%" in="img1" in2="img2" result="blend"/>
</filter>
</defs>
<use style="filter: url(#filter1)">
</svg>