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

← prev next →