<svg class="posabs">
  <defs>
    <path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z" 
          "/>
  
    <path id="heart" d="M100 34.976c0 8.434-3.635 16.019-9.423 21.274h0.048l-31.25 31.25c-3.125 3.125-6.25 6.25-9.375 6.25s-6.25-3.125-9.375-6.25l-31.202-31.25c-5.788-5.255-9.423-12.84-9.423-21.274 0-15.865 12.861-28.726 28.726-28.726 8.434 0 16.019 3.635 21.274 9.423 5.255-5.788 12.84-9.423 21.274-9.423 15.865 0 28.726 12.861 28.726 28.726z"/>

    <path id="cog" d="M100 59.384v-18.768l-14.333-2.389c-0.582-1.771-1.291-3.483-2.119-5.127l8.443-11.82-13.271-13.271-11.799 8.428c-1.651-0.835-3.373-1.552-5.153-2.139l-2.383-14.298h-18.768l-2.383 14.298c-1.78 0.587-3.502 1.304-5.153 2.139l-11.8-8.428-13.271 13.271 8.443 11.82c-0.827 1.644-1.537 3.356-2.118 5.127l-14.333 2.389v18.768l14.367 2.395c0.582 1.755 1.29 3.452 2.113 5.081l-8.471 11.86 13.271 13.271 11.88-8.486c1.621 0.815 3.31 1.516 5.055 2.093l2.4 14.402h18.768l2.4-14.402c1.746-0.577 3.434-1.278 5.055-2.093l11.88 8.486 13.271-13.271-8.471-11.86c0.823-1.629 1.531-3.326 2.113-5.081l14.367-2.394zM50 62.5c-6.904 0-12.5-5.596-12.5-12.5 0-6.904 5.596-12.5 12.5-12.5 6.904 0 12.5 5.596 12.5 12.5 0 6.904-5.596 12.5-12.5 12.5z"/>

    <path id="camera" d="M29.688 59.375c0 11.218 9.094 20.313 20.313 20.313s20.313-9.094 20.313-20.313-9.094-20.313-20.313-20.313-20.313 9.094-20.313 20.313zM93.75 25h-21.875c-1.563-6.25-3.125-12.5-9.375-12.5h-25c-6.25 0-7.813 6.25-9.375 12.5h-21.875c-3.438 0-6.25 2.813-6.25 6.25v56.25c0 3.438 2.813 6.25 6.25 6.25h87.5c3.438 0 6.25-2.813 6.25-6.25v-56.25c0-3.438-2.813-6.25-6.25-6.25zM50 87.109c-15.317 0-27.734-12.417-27.734-27.734 0-15.317 12.417-27.734 27.734-27.734 15.318 0 27.734 12.417 27.734 27.734 0 15.318-12.417 27.734-27.734 27.734zM93.75 43.75h-12.5v-6.25h12.5v6.25z"/>

    <path id="bubble" d="M50 6.25c27.614 0 50 18.188 50 40.625 0 22.437-22.386 40.625-50 40.625-2.652 0-5.255-0.169-7.795-0.493-10.74 10.74-23.56 12.666-35.955 12.949v-2.629c6.693-3.279 12.5-9.252 12.5-16.078 0-0.953-0.074-1.888-0.211-2.802-11.308-7.448-18.539-18.824-18.539-31.573 0-22.437 22.386-40.625 50-40.625z"/>
    
    <!-- Filters  -->
    
    <g>
      <filter id="blur" filterUnits="userSpaceOnUse" x="0" y="0" 
              width="300" height="300">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
      </filter>
      <!--        -->
      <filter id="shadow" filterUnits="userSpaceOnUse" x="0" y="0"
              width="300" height="300">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
        <feOffset in="blur" dx="1" dy="1" result="offsetBlr" />
        <feFlood flood-color="rgba(0,0,0,.6)"/>
        <feComposite operator="in" in2="offsetBlr" result="colBlur"/>
        <feMerge>
          <feMergeNode in="colBlur"/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
      <!--        -->
      <filter id="striped_shadow">
        <!--<feGaussianBlur stdDeviation="0" in="SourceAlpha" />-->
        <feOffset dx="1" dy="2" in="SourceGraphic" result="offset"/>
        <feFlood flood-color="#F2385A"/>
        <feComposite operator="in" in2="offset" result="res"/>
        
        <feOffset dx="2" dy="4" in="SourceGraphic" result="offset2"/>
        <feFlood flood-color="#F5A503"/>
        <feComposite operator="in" in2="offset2" result="res2"/>
        
        <feOffset dx="3" dy="6" in="SourceGraphic" result="offset3"/>
        <feFlood flood-color="#E9F1DF"/>
        <feComposite operator="in" in2="offset3" result="res3"/>
        
        <feOffset dx="4" dy="8" in="SourceGraphic" result="offset4"/>
        <feFlood flood-color="#4AD9D9"/>
        <feComposite operator="in" in2="offset4" result="res4"/>
        
        <feOffset dx="5" dy="10" in="SourceGraphic" result="offset5"/>
        <feFlood flood-color="#36B1BF"/>
        <feComposite operator="in" in2="offset5" result="res5"/>
        
        <feMerge>
          <feMergeNode in="res5"/>
          <feMergeNode in="res4"/>
          <feMergeNode in="res3"/>
          <feMergeNode in="res2"/>
          <feMergeNode in="res"/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
      
      <filter id="Saturate40" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="saturate" in="SourceGraphic" values="0.4"/>
    </filter>
      
    <filter id="comp">
      <feOffset dx="10" dy="10" in="SourceGraphic" result="offsetC"/>
<!--      over | in | out | atop | xor  -->
      <feComposite 
        in="offsetC"
          in2="SourceGraphic"
    operator="out"/>
    </filter>  
      
      <!-- Shadow offset -->
      <filter id='inset-shadow'>
        <!-- Shadow offset -->
        <feOffset dx='0' dy='0'/>
        <!-- Shadow blur -->
        <feGaussianBlur stdDeviation='5' result='offset-blur'/>
        <!-- Invert drop shadow to make an inset shadow -->
        <feComposite operator='out' in='SourceGraphic' in2='offset-blur' result='inverse'/>
        <!-- Cut color inside shadow -->
        <feFlood flood-color='#000' result='color'/>
        <feComposite operator='in' in='color' in2='inverse' result='shadow'/>
        <!-- Placing shadow over element -->
        <feComposite operator='over' in='shadow' in2='SourceGraphic'/>
      </filter>
    </g>
    
    <!-- Patterns  -->
    
    <linearGradient id="stripes" 
                    x1="0" y1="0" x2="100%" y2="0%">
          <stop stop-color="hsl(45,100%,65%)" offset="0"/>
          <stop stop-color="hsl(320,100%,65%)" offset="50%"/>
          <stop stop-color="hsl(200,100%,60%)" offset="100%"/>  
      </linearGradient>
    
      <linearGradient id="stripes2" 
                    x1="0" y1="0" x2="40" y2="40"
                    gradientUnits="userSpaceOnUse"
                    spreadMethod="repeat">
          <stop stop-color="#F2385A" offset="0"/>
        <stop stop-color="#F2385A" offset="20%"/>
          <stop stop-color="#F5A503" offset="20%"/>
        <stop stop-color="#F5A503" offset="40%"/>
          <stop stop-color="#E9F1DF" offset="40%"/>  
        <stop stop-color="#E9F1DF" offset="60%"/>  
        <stop stop-color="#4AD9D9" offset="60%"/>  
        <stop stop-color="#4AD9D9" offset="80%"/>  
        <stop stop-color="#36B1BF" offset="80%"/>  
        <stop stop-color="#36B1BF" offset="100%"/>  
    </linearGradient>
  </defs>
</svg>

<div class="wrapper">
  <ul class="icons icons--blur">
    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#home">
      </svg>
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#heart">
      </svg>  
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#cog">
      </svg>  
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#camera">
      </svg>  
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#bubble">
      </svg>    
    </li>  
  </ul>
  
  <ul class="icons icons--shadow">
    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#home">
      </svg>
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#heart">
      </svg>  
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#cog">
      </svg>  
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#camera">
      </svg>  
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#bubble">
      </svg>    
    </li>  
  </ul>

  <ul class="icons icons--stripes">
    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#home">
      </svg>
    </li>  
      
    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#heart">
      </svg>  
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#cog">
      </svg>  
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#camera">
      </svg>  
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#bubble">
      </svg>    
    </li>  
  </ul>       

  <ul class="icons icons--innershadow">
    <li class="icon">  
      <svg viewbox="0 0 100 100">
<!--         <circle r="50" cx="20" filter="url(#comp)"/> -->
        <use xlink:href="#home">
      </svg>
    </li>  
      
    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#heart">
      </svg>  
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#cog">
      </svg>  
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#camera">
      </svg>  
    </li>  

    <li class="icon">  
      <svg viewbox="0 0 100 100">
        <use xlink:href="#bubble">
      </svg>    
    </li>  
  </ul> 
  
</div>  
HTML {
    font-size: 10px;
}

BODY {
  font-size: 10px;
  background: #444 url(https://img-fotki.yandex.ru/get/4131/5091629.86/0_7429e_65318a7d_L.jpg);
  }

svg {
  overflow: visible;
  }
use {
  transform:translate(10px, 0) scale(.75);
}
.posabs {
  position: absolute;
  }
.wrapper {
  width: 600px;
  margin: 30px auto;
  text-align: center;
  }
.icons {
  margin-bottom: 1.5em;
  }
.icon {
  display: inline-block;
  position: relative;
  top: 0;
  width: 8.5rem;
  height: 8.5rem;
  margin: 0;
  transition: .2s;
  fill: url(#stripes2);
  }

.icons--blur use {
  filter: url(#blur);
  }

.icons--shadow use {
  filter: url(#shadow);
  }

.icons--stripes .icon use {
  fill: rgba(255,255,255,0);
  stroke: rgba(255,255,255,1);
  stroke-width: 3;
  filter: url(#striped_shadow);
  }
.icons--innershadow .icon use {
  filter: url(#inset-shadow);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.