SVG icon three ways

index.html

<svg width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg" fill="#FFF">
    <g transform="matrix(1 0 0 -1 0 80)">
        <rect width="10" height="20" rx="2">
            <animate attributeName="height"
                 begin="0s" dur="4.3s"
                 values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear"
                 repeatCount="indefinite" />
        </rect>
        <rect x="15" width="10" height="80" rx="3">
            <animate attributeName="height"
                 begin="0s" dur="2s"
                 values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear"
                 repeatCount="indefinite" />
        </rect>
        <rect x="30" width="10" height="50" rx="3">
            <animate attributeName="height"
                 begin="0s" dur="1.4s"
                 values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear"
                 repeatCount="indefinite" />
        </rect>
        <rect x="45" width="10" height="30" rx="3">
            <animate attributeName="height"
                 begin="0s" dur="2s"
                 values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear"
                 repeatCount="indefinite" />
        </rect>
    </g>
</svg>



<svg id="transforms" width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg" fill="#FFF">
  <g transform="matrix(1 0 0 -1 0 80)">  
  <rect x="0"  width="10" height="30" rx="3">
    </rect>
    <rect x="15"  width="10" height="80" rx="3">
    </rect>
     <rect x="30"  width="10" height="50" rx="3">
    </rect>
     <rect x="45" width="10" height="30" rx="3">
    </rect>
  </g> 
</svg>


<svg id="js" width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg" fill="#FFF">
  <g transform="matrix(1 0 0 -1 0 80)">  
  <rect id="r1" x="0"  width="10" height="30" rx="3">
    </rect>
    <rect id="r2" x="15"  width="10" height="80" rx="3">
    </rect>
     <rect id="r3" x="30"  width="10" height="50" rx="3">
    </rect>
     <rect id="r4" x="45" width="10" height="30" rx="3">
    </rect>
  </g> 
</svg>


<!--<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#fff">
    <circle cx="15" cy="15" r="15">
        <animate attributeName="r" from="15" to="15"
                 begin="0s" dur=".8s"
                 values="15;9;15" calcMode="linear"
                 repeatCount="indefinite" />
        <animate attributeName="fill-opacity" from="1" to="1"
                 begin="0s" dur=".8s"
                 values="1;.5;1" calcMode="linear"
                 repeatCount="indefinite" />
    </circle>
    <circle cx="60" cy="15" r="9" fill-opacity="0.3">
        <animate attributeName="r" from="9" to="9"
                 begin="0s" dur=".8s"
                 values="9;15;9" calcMode="linear"
                 repeatCount="indefinite" />
        <animate attributeName="fill-opacity" from="0.5" to="0.5"
                 begin="0s" dur=".8s"
                 values=".5;1;.5" calcMode="linear"
                 repeatCount="indefinite" />
    </circle>
    <circle cx="105" cy="15" r="15">
        <animate attributeName="r" from="15" to="15"
                 begin="0s" dur=".8s"
                 values="15;9;15" calcMode="linear"
                 repeatCount="indefinite" />
        <animate attributeName="fill-opacity" from="1" to="1"
                 begin="0s" dur=".8s"
                 values="1;.5;1" calcMode="linear"
                 repeatCount="indefinite" />
    </circle>
</svg>-->

script.js

var aSvg= Snap('#js'),
	r1 = aSvg.select('#r1'),
  r2 = aSvg.select('#r2'),
  r3 = aSvg.select('#r3'),
  r4 = aSvg.select('#r4');  

var vals1 =[20,45,57,80,64,32,66,45,64,23,66,13,64,56,34,34,2,23,76,79,20],
vals2 = [80,55,33,5,75,23,73,33,12,14,60,80],
vals3 =[50,34,78,23,56,23,34,76,80,54,21,50],
vals4 = [30,45,13,80,56,72,45,76,34,23,67,30];
var count =0, 
count2 =0;
var fr = 140;

setInterval(loop, fr);

function loop() {
  r1.animate({'height': vals1[count2]},fr, mina.linear);
  r2.animate({'height': vals2[count]}, fr, mina.linear);
	r3.animate({'height': vals3[count]}, fr, mina.linear);
  r4.animate({'height': vals4[count]}, fr, mina.linear);
  
  count++;
  if (count >= vals2.length) { 
    count =0;
  }
  count2++
  if (count2 >=vals1.length) {
    count2 =0;
  }
  
}

style.css

body {
  background-color:#333;
}

svg {
  margin: 4em;
}

div {
  
 width: 100px;
  height:100px;
  background-color:orange;
}


#transforms rect:nth-of-type(1) {
   animation: pulse01 4.5s linear infinite;
}

#transforms rect:nth-of-type(2) {
   animation: pulse02 2s linear infinite;
}

#transforms rect:nth-of-type(3) {
   animation: pulse02 3s linear infinite;
}

#transforms rect:nth-of-type(4) {
   animation: pulse02 4s linear infinite;
}


$vals1:20,45,57,80,64,32,66,45,64,23,66,13,64,56,34,34,2,23,76,79,20;

@keyframes pulse01 {
  @for $i from 1 through length($vals1) {
       #{$i*100%/length($vals1)} {
         transform: scaleY(nth($vals1, $i)/nth($vals1, 1));
       }     
    }
}

$vals2: 80,55,33,5,75,23,73,33,12,14,60,80;

@keyframes pulse02 {
  @for $i from 1 through length($vals2) {
       #{$i*100%/length($vals2)} {
         transform: scaleY(nth($vals2, $i)/nth($vals2, 1));
       }     
    }
}

$vals3: 50,34,78,23,56,23,34,76,80,54,21,50; 

 @keyframes pulse03 { 
      @for $i from 1 through length($vals3) {
       #{$i*100%/length($vals3)} {
         transform: scaleY(nth($vals3, $i)/nth($vals3, 1));
       }     
    }
 }

$vals4: 30,45,13,80,56,72,45,76,34,23,67,30;

 @keyframes pulse04 { 
      @for $i from 1 through length($vals4) {
       #{$i*100%/length($vals4)} {
         transform: scaleY(nth($vals4, $i)/nth($vals4, 1));
       }     
    }
 }

SVG icon three ways.markdown

SVG icon three ways ('-' * 19)

Forked from Val Head's Pen SVG icon three ways.

A Pen by Alyssa Nicoll on CodePen.

License.