<svg width="300" height="200"
viewport="0 0 200 200">
<!-- filter declaration -->
<filter id="feGaussianBlur" height="3" width="3">
<feGaussianBlur stdDeviation="3"/>
</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(#feGaussianBlur)">
<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 feGaussianBlur</text>
<text x="60" y="160"> After feGaussianBlur ↑</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.