<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>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.