A Pen by ezos86.

index.html

<h1>SVG Animation - Moving Icons into Box</h1>
<div class="normal">
  <svg id="box-bottom"><g>
	<polygon fill="#39B54A" points="43.301,75.001 86.603,50.001 86.603,0 43.301,25.001 	"/>
	<polyline fill="#22B573" points="43.301,25.001 43.301,75.002 0,50.001 0,0.001 43.301,25 	"/>
</g></svg>
<svg id="icon">
<circle id="icon-1" fill="#3FA9F5" stroke="#000000" stroke-miterlimit="10" cx="20" cy="20" r="17.667"/>
</svg>
<svg id="box-top" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="86.602px" height="49.998px" viewBox="0 0 86.602 49.998" enable-background="new 0 0 86.602 49.998" xml:space="preserve">
<polygon fill="#009245" points="0,25 43.301,0 86.602,24.999 43.301,49.998 "/>
</svg>
</div>

style.scss

@import "compass/css3";
@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

h1{
  text-align:center;
  font-size:70px;
  
}

@include keyframes(move) {
  0%   { top:0px; }
  100% { top:250px;}
}

#icon{
  position:absolute;
  left:420px;
  -webkit-animation: move 2s infinite;
 -moz-animation: move 2s infinite;
}

.normal{
  position:relative;
}
#box-top{
  position:absolute;
  left:400px;
  top:200px;
  z-index:-1;
}
#box-bottom{
  position:absolute;
  top:225px;
  left:400px;
  z-index:999;
  -webkit-filter: drop-shadow( 0px 2px 7px #888 );
  //filter: drop-shadow( 0px 0px 5px #000 );
  //filter:url(#dropshadow);
}

SVG-Animation---Moving-Icons-into-Box.markdown

SVG Animation - Moving Icons into Box

Wanted to move icons into a box and needed to build an example.

A Pen by ezos86 on CodePen.

License.