<svg width="300" height="350"
viewport="0 0 200 200">
<defs>
<g id="circles">
<circle cx="100" cy="80" r="30" fill="#035464"/>
<circle cx="100" cy="80" r="20" fill="#1A3E46"/>
</g>
</defs>
<use href="#circles" transform="translate(0,0)"/>
<use href="#circles" transform="translate(100,0)" filter="url(#hueRotate)"/>
<use href="#circles" transform="translate(0,100)" filter="url(#saturate)"/>
<use href="#circles" transform="translate(100,100)" filter="url(#luminanceToAlpha)"/>
<use href="#circles" transform="translate(0,200)" filter="url(#matrix)"/>
<!-- filter declaration -->
<filter id="hueRotate" height="3" width="3">
<feColorMatrix in="SourceGraphic" type="hueRotate" values="200"/>
</filter>
<filter id="saturate" height="3" width="3">
<feColorMatrix in="SourceGraphic" type="saturate" values="50"/>
</filter>
<filter id="luminanceToAlpha" height="3" width="3">
<feColorMatrix in="SourceGraphic" type="luminanceToAlpha" values="10"/>
</filter>
<filter id="matrix">
<feColorMatrix
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 1 1 0 0
0 0 0 1 0" />
</filter>
<!-- targeted elements without filtering -->
<!-- targeted elements with filtering -->
<text x="79" y="130">No filter</text>
<text x="170" y="130">hueRotate</text>
<text x="75" y="230">saturate</text>
<text x="150" y="230">luminanceToAlpha</text>
<text x="79" y="330">Matrix</text>
</svg>
<style>
svg {
display: block;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
background: #CFE9EE;
}
</style>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.