Skip to content

Instantly share code, notes, and snippets.

@alyssamichelle
Created June 1, 2015 22:50
Show Gist options
  • Save alyssamichelle/0c7324f3a5240eea352e to your computer and use it in GitHub Desktop.
Save alyssamichelle/0c7324f3a5240eea352e to your computer and use it in GitHub Desktop.
SVG icon three ways
<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>-->
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;
}
}
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13034/snap.svg-min.js"></script>
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));
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment