<svg width="200" height="200"
    viewport="0 0 200 200">

  <!-- filter declaration -->
  <filter id="offset" height="3" width="3">
    <feOffset dx="60" dy="60"/>
  </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>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.