<svg width="300" height="350"
    viewport="0 0 200 200">
  
  <defs>
    <g id="circles">
      <circle cx="100" cy="80" r="30" fill="#035464"/>
   <circle cx="100" cy="80" r="20" fill="#1A3E46"/>
    </g>
  </defs>
  
  <use href="#circles" transform="translate(0,0)"/>
  <use href="#circles" transform="translate(100,0)" filter="url(#hueRotate)"/>
  <use href="#circles" transform="translate(0,100)" filter="url(#saturate)"/>
  <use href="#circles" transform="translate(100,100)" filter="url(#luminanceToAlpha)"/>
  <use href="#circles" transform="translate(0,200)" filter="url(#matrix)"/>
  

  <!-- filter declaration -->
  <filter id="hueRotate" height="3" width="3">
    <feColorMatrix in="SourceGraphic" type="hueRotate" values="200"/>
  </filter>
  
  <filter id="saturate" height="3" width="3">
    <feColorMatrix in="SourceGraphic" type="saturate" values="50"/>
  </filter>
  
 <filter id="luminanceToAlpha" height="3" width="3">
    <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" values="10"/>
  </filter>
  
 <filter id="matrix">
  <feColorMatrix
        type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0
                0 1 1 0 0
                0 0 0 1 0" />
 </filter>
  
  
 <!-- targeted elements without filtering -->
  
  
  <!-- targeted elements with filtering -->

  <text x="79" y="130">No filter</text>
  <text x="170" y="130">hueRotate</text>
  <text x="75" y="230">saturate</text>
  <text x="150" y="230">luminanceToAlpha</text>
  <text x="79" y="330">Matrix</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.