<svg width="300" height="200"
viewport="0 0 200 200">
<!-- filter declaration -->
<filter id="feDropShadow" height="3" width="3">
<feDropShadow
dx="4" dy="4"
stdDeviation="2"
flood-color="#000"
flood-opacity="0.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(#feDropShadow)">
<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 feDropShadow</text>
<text x="60" y="160"> After feDropShadow ↑</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.