Skip to content

Instantly share code, notes, and snippets.

@jamesflorentino

jamesflorentino/index.html

Last active August 29, 2015 14:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamesflorentino/a9fa30422f3e9d754a37 to your computer and use it in GitHub Desktop.
Save jamesflorentino/a9fa30422f3e9d754a37 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<h2>SVG animation demo.</h2>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="james-pogi-lol" image-rendering="auto" baseProfile="basic" version="1.1" x="0px" y="0px" width="200" height="170" overflow="visible" xmlns="http://www.w3.org/2000/svg"><g><g id="Tween_13" transform="matrix(1 0 0 1 69.65 56.95)" opacity="1"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.034;0.069;0.103;0.138;0.172;0.207;0.241;0.276;0.31;0.345;0.379;0.414;1" values="49.65,36.95;50.3,37.6;52.2,39.5;55.35,42.65;59.75,47.05;65.45,52.75;66.55,53.85;67.5,54.8;68.3,55.6;68.9,56.2;69.3,56.6;69.55,56.85;69.65,56.95;69.65,56.95" calcMode="discrete"/><animate attributeName="opacity" dur="0.967s" keyTimes="0;0.034;0.069;0.103;0.138;0.172;0.207;0.241;0.276;0.31;0.345;0.379;0.414;1" values="0;0.01;0.05;0.12;0.22;0.34;0.52;0.66;0.79;0.88;0.95;0.99;1;1" calcMode="discrete"/><path fill="#292929" d="M26.15,-25.5L-1.15,-25.5 -26.15,17.5 -21.5,25.5 -1.95,25.5 26.15,-25.5"/></g></g><g><g id="Tween_12" transform="matrix(1 0 0 1 92.6 74.45)" opacity="1"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.276;0.31;0.345;0.379;0.414;0.448;0.483;0.517;0.552;0.586;0.62;0.655;0.689;1" values="72.6,104.45;72.6,104.45;73.05,103.8;74.35,101.8;76.55,98.55;79.6,93.9;83.55,88;88.4,80.75;89.7,78.85;90.75,77.25;91.55,76.05;92.15,75.15;92.5,74.65;92.6,74.45;92.6,74.45" calcMode="discrete"/><animate attributeName="opacity" dur="0.967s" keyTimes="0;0.276;0.31;0.345;0.379;0.414;0.448;0.483;1" values="0;0;0.03;0.11;0.25;0.45;0.7;1;1" calcMode="discrete"/><path fill="#292929" d="M25.9,-43L10.05,-43 -21.35,14 -41,14 -24.1,43 -11.35,43 24.15,-17 41,-17 25.9,-43"/></g><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.276;1" values="none;inline;none"/></g><g><g id="Tween_11" transform="matrix(1 0 0 1 126.2 72.95)" opacity="1"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.552;0.586;0.62;0.655;0.689;0.724;0.758;0.793;0.827;0.862;0.896;0.931;0.965;1" values="186.2,72.95;186.2,72.95;184.9,72.95;180.95,72.95;174.35,72.95;165.15,72.95;153.3,72.95;138.8,72.95;134.95,72.95;131.8,72.95;129.35,72.95;127.6,72.95;126.55,72.95;126.2,72.95;126.2,72.95" calcMode="discrete"/><animate attributeName="opacity" dur="0.967s" keyTimes="0;0.552;0.586;0.62;0.655;0.689;0.724;0.758;1" values="0;0;0.03;0.11;0.25;0.45;0.7;1;1" calcMode="discrete"/><path fill="#292929" d="M12.6,9.5L17.3,1.5 10.9,-9.5 -6,-9.5 -17.25,9.5 12.6,9.5"/></g><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.552;1" values="none;inline;none"/></g><g><g id="Tween_10" transform="matrix(1 0 0 1 111.75 102.95)" opacity="1"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.483;0.517;0.552;0.586;0.62;0.655;0.689;0.724;0.758;0.793;0.827;0.862;0.896;1" values="131.75,132.95;131.75,132.95;131.3,132.3;130,130.3;127.8,127.05;124.75,122.4;120.8,116.5;115.95,109.25;114.65,107.35;113.6,105.75;112.8,104.55;112.2,103.65;111.85,103.15;111.75,102.95;111.75,102.95" calcMode="discrete"/><animate attributeName="opacity" dur="0.967s" keyTimes="0;0.689;0.724;0.758;0.793;0.827;0.862;0.896;1" values="0;0;0.3;0.55;0.75;0.89;0.97;1;1" calcMode="discrete"/><path fill="#292929" d="M-6.35,-14.5L-23.55,14.5 6.75,14.5 23.6,-14.5 -6.35,-14.5"/></g><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.483;1" values="none;inline;none"/></g><g mask="url(#Scene_1_l1_7_3)"><path fill="none" stroke="#666" stroke-linecap="round" stroke-linejoin="round" d="M118.5,31.45L102.65,31.45 71.25,88.45 51.6,88.45 68.5,117.45 81.25,117.45 116.75,57.45 133.6,57.45 118.5,31.45"/><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.103;1" values="none;inline;none"/></g><mask id="Scene_1_l1_7_3"><g id="Tween_9" transform="matrix(1 0 0 1 93.95 173)"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.103;0.138;0.172;0.207;0.241;0.276;0.31;0.345;0.379;0.414;0.448;0.483;0.517;0.552;0.586;0.62;0.655;0.689;0.724;1" values="93.95,-16.999;93.95,-16.999;93.95,-15.999;93.95,-13.099;93.95,-8.199;93.95,-1.349;93.95,7.4;93.95,18.15;93.95,30.85;93.95,45.5;93.95,69.75;93.95,91.4;93.95,110.55;93.95,127.1;93.95,141.15;93.95,152.6;93.95,161.55;93.95,167.9;93.95,171.75;93.95,173;93.95,173" calcMode="discrete"/><path fill="#FFF" d="M-47,-46L-47,46 47,46 47,-46 -47,-46" fill-opacity="1"/></g><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.103;1" values="none;inline;none"/></mask><g mask="url(#Scene_1_l1_5_7)"><path fill="none" stroke="#666" stroke-linecap="round" stroke-linejoin="round" d="M120.2,63.45L108.95,82.45 138.8,82.45 143.5,74.45 137.1,63.45 120.2,63.45"/><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.241;1" values="none;inline;none"/></g><mask id="Scene_1_l1_5_7"><g id="Tween_9" transform="matrix(0.489 0 0 0.435 79.95 74)"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.241;0.276;0.31;0.345;0.379;0.414;0.448;0.483;0.517;0.552;0.586;0.62;0.655;0.689;0.724;0.758;0.793;0.827;1" values="159.95,74;159.95,74;159.8,74;159.25,74;158.4,74;157.2,74;155.65,74;153.75,74;151.5,74;148.9,74;146,74;142.7,74;139.1,74;121.05,74;106.25,74;94.75,74;86.5,74;81.6,74;79.95,74;79.95,74" calcMode="discrete"/><animateTransform attributeName="transform" additive="sum" type="scale" dur="0.967s" keyTimes="0;1" values="0.489,0.435;0.489,0.435" calcMode="discrete"/><path fill="#FFF" d="M-47,-46L-47,46 47,46 47,-46 -47,-46" fill-opacity="1"/></g><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.241;1" values="none;inline;none"/></mask><g mask="url(#Scene_1_l1_3_0)"><path fill="none" stroke="#666" stroke-linecap="round" stroke-linejoin="round" d="M135.35,88.45L105.4,88.45 88.2,117.45 118.5,117.45 135.35,88.45"/></g><mask id="Scene_1_l1_3_0"><g id="Tween_8" transform="matrix(1 0 0 1 110.95 143)"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.034;0.069;0.103;0.138;0.172;0.207;0.241;0.276;0.31;0.345;0.379;0.414;0.448;0.483;0.517;0.552;0.586;0.62;0.655;0.689;0.724;0.758;1" values="110.95,67;110.95,67.2;110.95,67.85;110.95,68.85;110.95,70.3;110.95,72.15;110.95,74.45;110.95,77.1;110.95,80.2;110.95,83.75;110.95,87.65;110.95,92;110.95,100.85;110.95,108.85;110.95,116;110.95,122.35;110.95,127.85;110.95,132.45;110.95,136.25;110.95,139.2;110.95,141.3;110.95,142.6;110.95,143;110.95,143" calcMode="discrete"/><path fill="#FFF" d="M27,19L27,-19 -27,-19 -27,19 27,19" fill-opacity="1"/></g></mask><g mask="url(#Scene_1_l1_1_0)"><path fill="none" stroke="#666" stroke-linecap="round" stroke-linejoin="round" d="M43.5,74.45L48.15,82.45 67.7,82.45 95.8,31.45 68.5,31.45 43.5,74.45"/></g><mask id="Scene_1_l1_1_0"><g id="Tween_7" transform="matrix(1 0 0 1 70.45 116)"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.034;0.069;0.103;0.138;0.172;0.207;0.241;0.276;0.31;0.345;0.379;0.414;0.448;0.483;0.517;0.552;0.586;0.62;0.655;0.689;0.724;0.758;0.793;0.827;0.862;1" values="70.45,-3.999;70.45,-3.699;70.45,-2.849;70.45,-1.399;70.45,0.65;70.45,3.25;70.45,6.4;70.45,10.15;70.45,14.5;70.45,19.45;70.45,24.9;70.45,31;70.45,37.65;70.45,49.25;70.45,59.9;70.45,69.65;70.45,78.45;70.45,86.35;70.45,93.3;70.45,99.3;70.45,104.4;70.45,108.6;70.45,111.85;70.45,114.15;70.45,115.55;70.45,116;70.45,116" calcMode="discrete"/><path fill="#FFF" d="M-32.5,-31L-32.5,31 32.5,31 32.5,-31 -32.5,-31" fill-opacity="1"/></g></mask><defs><symbol id="Tween_9" overflow="visible"><path fill="#FBF2E2" d="M-47,-46L-47,46 47,46 47,-46 -47,-46"/>
<a href="#" onclick="reset();">Click to refresh</a>
Raw
main.js
function reset() {
document.body.innerHTML = '<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="Scene_1_l1" image-rendering="auto" baseProfile="basic" version="1.1" x="0px" y="0px" width="550" height="400" overflow="visible" xmlns="http://www.w3.org/2000/svg"><g><g id="Tween_13" transform="matrix(1 0 0 1 69.65 56.95)" opacity="1"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.034;0.069;0.103;0.138;0.172;0.207;0.241;0.276;0.31;0.345;0.379;0.414;1" values="49.65,36.95;50.3,37.6;52.2,39.5;55.35,42.65;59.75,47.05;65.45,52.75;66.55,53.85;67.5,54.8;68.3,55.6;68.9,56.2;69.3,56.6;69.55,56.85;69.65,56.95;69.65,56.95" calcMode="discrete"/><animate attributeName="opacity" dur="0.967s" keyTimes="0;0.034;0.069;0.103;0.138;0.172;0.207;0.241;0.276;0.31;0.345;0.379;0.414;1" values="0;0.01;0.05;0.12;0.22;0.34;0.52;0.66;0.79;0.88;0.95;0.99;1;1" calcMode="discrete"/><path fill="#292929" d="M26.15,-25.5L-1.15,-25.5 -26.15,17.5 -21.5,25.5 -1.95,25.5 26.15,-25.5"/></g></g><g><g id="Tween_12" transform="matrix(1 0 0 1 92.6 74.45)" opacity="1"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.276;0.31;0.345;0.379;0.414;0.448;0.483;0.517;0.552;0.586;0.62;0.655;0.689;1" values="72.6,104.45;72.6,104.45;73.05,103.8;74.35,101.8;76.55,98.55;79.6,93.9;83.55,88;88.4,80.75;89.7,78.85;90.75,77.25;91.55,76.05;92.15,75.15;92.5,74.65;92.6,74.45;92.6,74.45" calcMode="discrete"/><animate attributeName="opacity" dur="0.967s" keyTimes="0;0.276;0.31;0.345;0.379;0.414;0.448;0.483;1" values="0;0;0.03;0.11;0.25;0.45;0.7;1;1" calcMode="discrete"/><path fill="#292929" d="M25.9,-43L10.05,-43 -21.35,14 -41,14 -24.1,43 -11.35,43 24.15,-17 41,-17 25.9,-43"/></g><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.276;1" values="none;inline;none"/></g><g><g id="Tween_11" transform="matrix(1 0 0 1 126.2 72.95)" opacity="1"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.552;0.586;0.62;0.655;0.689;0.724;0.758;0.793;0.827;0.862;0.896;0.931;0.965;1" values="186.2,72.95;186.2,72.95;184.9,72.95;180.95,72.95;174.35,72.95;165.15,72.95;153.3,72.95;138.8,72.95;134.95,72.95;131.8,72.95;129.35,72.95;127.6,72.95;126.55,72.95;126.2,72.95;126.2,72.95" calcMode="discrete"/><animate attributeName="opacity" dur="0.967s" keyTimes="0;0.552;0.586;0.62;0.655;0.689;0.724;0.758;1" values="0;0;0.03;0.11;0.25;0.45;0.7;1;1" calcMode="discrete"/><path fill="#292929" d="M12.6,9.5L17.3,1.5 10.9,-9.5 -6,-9.5 -17.25,9.5 12.6,9.5"/></g><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.552;1" values="none;inline;none"/></g><g><g id="Tween_10" transform="matrix(1 0 0 1 111.75 102.95)" opacity="1"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.483;0.517;0.552;0.586;0.62;0.655;0.689;0.724;0.758;0.793;0.827;0.862;0.896;1" values="131.75,132.95;131.75,132.95;131.3,132.3;130,130.3;127.8,127.05;124.75,122.4;120.8,116.5;115.95,109.25;114.65,107.35;113.6,105.75;112.8,104.55;112.2,103.65;111.85,103.15;111.75,102.95;111.75,102.95" calcMode="discrete"/><animate attributeName="opacity" dur="0.967s" keyTimes="0;0.689;0.724;0.758;0.793;0.827;0.862;0.896;1" values="0;0;0.3;0.55;0.75;0.89;0.97;1;1" calcMode="discrete"/><path fill="#292929" d="M-6.35,-14.5L-23.55,14.5 6.75,14.5 23.6,-14.5 -6.35,-14.5"/></g><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.483;1" values="none;inline;none"/></g><g mask="url(#Scene_1_l1_7_3)"><path fill="none" stroke="#666" stroke-linecap="round" stroke-linejoin="round" d="M118.5,31.45L102.65,31.45 71.25,88.45 51.6,88.45 68.5,117.45 81.25,117.45 116.75,57.45 133.6,57.45 118.5,31.45"/><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.103;1" values="none;inline;none"/></g><mask id="Scene_1_l1_7_3"><g id="Tween_9" transform="matrix(1 0 0 1 93.95 173)"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.103;0.138;0.172;0.207;0.241;0.276;0.31;0.345;0.379;0.414;0.448;0.483;0.517;0.552;0.586;0.62;0.655;0.689;0.724;1" values="93.95,-16.999;93.95,-16.999;93.95,-15.999;93.95,-13.099;93.95,-8.199;93.95,-1.349;93.95,7.4;93.95,18.15;93.95,30.85;93.95,45.5;93.95,69.75;93.95,91.4;93.95,110.55;93.95,127.1;93.95,141.15;93.95,152.6;93.95,161.55;93.95,167.9;93.95,171.75;93.95,173;93.95,173" calcMode="discrete"/><path fill="#FFF" d="M-47,-46L-47,46 47,46 47,-46 -47,-46" fill-opacity="1"/></g><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.103;1" values="none;inline;none"/></mask><g mask="url(#Scene_1_l1_5_7)"><path fill="none" stroke="#666" stroke-linecap="round" stroke-linejoin="round" d="M120.2,63.45L108.95,82.45 138.8,82.45 143.5,74.45 137.1,63.45 120.2,63.45"/><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.241;1" values="none;inline;none"/></g><mask id="Scene_1_l1_5_7"><g id="Tween_9" transform="matrix(0.489 0 0 0.435 79.95 74)"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.241;0.276;0.31;0.345;0.379;0.414;0.448;0.483;0.517;0.552;0.586;0.62;0.655;0.689;0.724;0.758;0.793;0.827;1" values="159.95,74;159.95,74;159.8,74;159.25,74;158.4,74;157.2,74;155.65,74;153.75,74;151.5,74;148.9,74;146,74;142.7,74;139.1,74;121.05,74;106.25,74;94.75,74;86.5,74;81.6,74;79.95,74;79.95,74" calcMode="discrete"/><animateTransform attributeName="transform" additive="sum" type="scale" dur="0.967s" keyTimes="0;1" values="0.489,0.435;0.489,0.435" calcMode="discrete"/><path fill="#FFF" d="M-47,-46L-47,46 47,46 47,-46 -47,-46" fill-opacity="1"/></g><animate attributeName="display" repeatCount="1" dur="0.967s" keyTimes="0;0.241;1" values="none;inline;none"/></mask><g mask="url(#Scene_1_l1_3_0)"><path fill="none" stroke="#666" stroke-linecap="round" stroke-linejoin="round" d="M135.35,88.45L105.4,88.45 88.2,117.45 118.5,117.45 135.35,88.45"/></g><mask id="Scene_1_l1_3_0"><g id="Tween_8" transform="matrix(1 0 0 1 110.95 143)"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.034;0.069;0.103;0.138;0.172;0.207;0.241;0.276;0.31;0.345;0.379;0.414;0.448;0.483;0.517;0.552;0.586;0.62;0.655;0.689;0.724;0.758;1" values="110.95,67;110.95,67.2;110.95,67.85;110.95,68.85;110.95,70.3;110.95,72.15;110.95,74.45;110.95,77.1;110.95,80.2;110.95,83.75;110.95,87.65;110.95,92;110.95,100.85;110.95,108.85;110.95,116;110.95,122.35;110.95,127.85;110.95,132.45;110.95,136.25;110.95,139.2;110.95,141.3;110.95,142.6;110.95,143;110.95,143" calcMode="discrete"/><path fill="#FFF" d="M27,19L27,-19 -27,-19 -27,19 27,19" fill-opacity="1"/></g></mask><g mask="url(#Scene_1_l1_1_0)"><path fill="none" stroke="#666" stroke-linecap="round" stroke-linejoin="round" d="M43.5,74.45L48.15,82.45 67.7,82.45 95.8,31.45 68.5,31.45 43.5,74.45"/></g><mask id="Scene_1_l1_1_0"><g id="Tween_7" transform="matrix(1 0 0 1 70.45 116)"><animateTransform attributeName="transform" additive="replace" type="translate" dur="0.967s" keyTimes="0;0.034;0.069;0.103;0.138;0.172;0.207;0.241;0.276;0.31;0.345;0.379;0.414;0.448;0.483;0.517;0.552;0.586;0.62;0.655;0.689;0.724;0.758;0.793;0.827;0.862;1" values="70.45,-3.999;70.45,-3.699;70.45,-2.849;70.45,-1.399;70.45,0.65;70.45,3.25;70.45,6.4;70.45,10.15;70.45,14.5;70.45,19.45;70.45,24.9;70.45,31;70.45,37.65;70.45,49.25;70.45,59.9;70.45,69.65;70.45,78.45;70.45,86.35;70.45,93.3;70.45,99.3;70.45,104.4;70.45,108.6;70.45,111.85;70.45,114.15;70.45,115.55;70.45,116;70.45,116" calcMode="discrete"/><path fill="#FFF" d="M-32.5,-31L-32.5,31 32.5,31 32.5,-31 -32.5,-31" fill-opacity="1"/></g></mask><defs><symbol id="Tween_9" overflow="visible"><path fill="#FBF2E2" d="M-47,-46L-47,46 47,46 47,-46 -47,-46"/>';
return false;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment