<svg width="200" height="200"
viewport="0 0 200 200">
<!-- filter declaration -->
<filter id="offset" height="3" width="3">
<feOffset dx="60" dy="60" in="SourceAlpha"/>
</filter>
<!-- targeted elements without filtering -->
<g>
<circle cx="35" cy="35" r="30" fill="#035464"/>
<circle cx="35" cy="35" r="20" fill="#1A3E46"/>
</g>
<!-- targeted elements with filtering -->
<g filter="url(#offset)">
<circle cx="35" cy="35" r="30" fill="#035464"/>
<circle cx="35" cy="35" r="20" fill="#1A3E46"/>
</g>
<!-- Just elements for explanation -->
<text x="70" y="40"> ← Before feOffset</text>
<text x="90" y="150"> ↑ After feOffset</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.