Example feComposite - Examples of feComposite operations
Four rows of six pairs of overlapping triangles depicting
the six different feComposite operators under different
opacity values and different clearing of the background.
Define two sets of six filters for each of the six compositing operators.
The first set wipes out the background image by flooding with opaque white.
The second set does not wipe out the background, with the result
that the background sometimes shines through and is other cases
is blended into itself (i.e., "double-counting").
Render the examples using the filters that draw on top of
an opaque white surface, thus obliterating the background.
opacity 1.0
(with feFlood)
opacity 0.5
(with feFlood)
over
in
out
atop
xor
arithmetic
Render the examples using the filters that do not obliterate
the background, thus sometimes causing the background to continue
to appear in some cases, and in other cases the background
image blends into itself ("double-counting").
opacity 1.0
(without feFlood)
opacity 0.5
(without feFlood)
over
in
out
atop
xor
arithmetic