<svg width="300" height="200"
viewport="0 0 200 200">
<!-- filter declaration -->
<filter id="feMerge" height="3" width="3">
<feOffset in="SourceAlpha" result="offset" dx="5" dy="5"/>
<feGaussianBlur in="offset" result="blur" stdDeviation="3"/>
<feColorMatrix in="SourceGraphic" result="colored" type="saturate" values="100"/>
<feFlood flood-color="black" result="flood" flood-opacity="0.95" width="75" height="36"/>
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
<feMergeNode in="colored" />
<feMergeNode in="flood" />
</feMerge>
</filter>
<!-- targeted elements without filtering -->
<g>
<circle cx="100" cy="100" r="30" fill="#035464"/>
<circle cx="100" cy="100" r="20" fill="#1A3E46"/>
</g>
<!-- targeted elements with filtering -->
<g filter="url(#feMerge)">
<circle cx="200" cy="100" r="30" fill="#035464"/>
<circle cx="200" cy="100" r="20" fill="#1A3E46"/>
</g>
<text x="90" y="50">↓ Before feMerge</text>
<text x="100" y="160"> After feMerge ↑</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.