Skip to content

Instantly share code, notes, and snippets.

/index.html

Created July 11, 2013 17:18
Show Gist options
  • Save anonymous/5977368 to your computer and use it in GitHub Desktop.
Save anonymous/5977368 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Captain Anonymous. SVG Walk Test - True beginner, brutalizing anatomy and js code for the sake of learning.
Raw
index.html
<head>
<title>Animation Walk Test</title>
</head>
<body>
<div id = "icon"></div>
</body>
Raw
script.js
$(document).ready(function() {
var paper = Raphael('icon',500,500);
<!--Shoulder-->
var shoulder = paper.circle(150.472, 94.756, 20.917).attr({"stroke-width":0,fill:'#ED1C24',"fill-opacity": 0.9});
<!--Bicep-->
var curb1=0;
var biceppaths = ['M144.567,78.165c0,0,23.659,6.557,9.562,28.715c0,0-19.16,22.781-38.775,20.387,C95.738,124.873,113.485,79.814,144.567,78.165z',
'M144.567,78.165c0,0,23.659,6.557,9.562,28.715c0,0-19.16,22.781-38.775,20.387,C95.738,124.873,113.485,79.814,144.567,78.165z',
'M159.453,79.787c0,0,18.914-15.654,29.021,8.585c0,0,7.723,28.748-5.463,43.466,S143.023,106.223,159.453,79.787z',
'M145.455,78.631c0,0,13.955-20.2,30.263,0.386c0,0,15.235,25.573,6.54,43.317,C173.562,140.079,136.818,108.534,145.455,78.631z',
'M152.235,84.524c0,0,4.17-24.195,27.621-12.372c0,0,24.574,16.798,24.145,36.554,C203.569,128.462,156.97,115.287,152.235,84.524z',
'M160.027,90.314c0,0,8.043-23.197,29.263-7.723c0,0,21.521,20.565,17.89,39.989,C203.547,142.004,159.704,121.438,160.027,90.314z',
'M161.632,75.554c0,0,23.443-7.296,23.584,18.966c0,0-3.776,29.527-21.564,38.133,C145.862,141.259,136.392,93.767,161.632,75.554z',
'M162.708,59.815c0,0,24.497,1.655,15.152,26.199c0,0-14.178,26.175-33.872,27.783,C124.292,115.404,132.596,67.695,162.708,59.815z'];
var biceppath = paper.path(biceppaths[curb1++]).attr({"stroke-width":0,fill:'#0084B6',"fill-opacity": 0.9});
<!--Front Forearm-->
var curf1=0;
var fforearmpaths = ['M106.324,120.958c1.496-3.839,16.691-16.028,16.227,2.875,c-0.456,18.506-0.23,14.735-4.919,30.896C111.318,176.486,102.314,131.243,106.324,120.958z',
'M104.742,127.709c0.449-4.096,11.959-19.812,16.417-1.437,c4.364,17.99,3.603,14.29,3.27,31.114C123.979,180.037,103.54,138.682,104.742,127.709z',
'M163.688,123.866c0.448-4.096,11.959-19.812,16.417-1.437,c4.363,17.99,3.603,14.29,3.27,31.114C182.926,176.193,162.486,134.838,163.688,123.866z',
'M177.947,129.854c-3.956-1.154-17.431-15.221,1.44-16.417,c18.475-1.168,14.699-1.062,31.207,2.19C232.822,120.009,188.544,132.946,177.947,129.854z',
'M201.204,121.578c-4.113,0.256-21.559-8.411-4.21-15.933,c16.984-7.362,13.469-5.982,30.102-8.518C249.492,93.713,212.222,120.894,201.204,121.578z',
'M208.211,128.584c-4.113,0.256-21.559-8.411-4.21-15.933,c16.984-7.362,13.469-5.982,30.102-8.518C256.499,100.72,219.229,127.9,208.211,128.584z',
'M145.572,115.468c0.085-4.12,10.162-20.791,16.227-2.88,c5.935,17.534,4.85,13.917,6.004,30.702C169.356,165.892,145.345,126.505,145.572,115.468z',
'M130.71,101.045c2.315-3.409,19.845-11.903,15.178,6.421,c-4.571,17.938-3.511,14.313-11.684,29.02C123.199,156.288,124.509,110.178,130.71,101.045z'];
var fforearmpath = paper.path(fforearmpaths[curf1++]).attr({"stroke-width":0,fill:'#0084B6',"fill-opacity": 0.9});
<!--Wrist1-->
var curw1x=0;
var curw1y=0;
var wrist1xpaths = [112.938,120.946,172.502,217.236,231.661,241.671,165.724,125.98];
var wrist1ypaths = [160.572,161.573,166.573,119.128,96.831,102.836,157.044,141.378];
var wrist1 = paper.circle(wrist1xpaths[curw1x++], wrist1ypaths[curw1y++], 4.997).attr({"stroke-width":0,fill:'#ED1C24',"fill-opacity": 0.9});
<!--Hip-->
var curhi1=0;
var hippaths = ['M183.802,139.383c4.571,12.023-3.47,20.263-15.494,24.834,c-12.024,4.57-23.479,3.743-28.05-8.282c-4.571-12.024,4.847-16.597,16.871-21.167C169.153,130.196,179.23,127.357,183.802,139.383z',
'M183.802,139.383c4.571,12.023-3.47,20.263-15.494,24.834,c-12.024,4.57-23.479,3.743-28.05-8.282c-4.571-12.024,4.847-16.597,16.871-21.167C169.153,130.196,179.23,127.357,183.802,139.383z',
'M185.893,142.379c0.636,12.847-9.556,18.202-22.404,18.837,c-12.848,0.635-23.487-3.688-24.123-16.538c-0.635-12.848,9.734-14.29,22.582-14.925,C174.796,129.119,185.257,129.53,185.893,142.379z',
'M181.724,154.648c-3.34,12.422-14.684,14.388-27.106,11.048,c-12.422-3.342-21.22-10.723-17.879-23.146c3.341-12.422,13.652-10.61,26.074-7.27,C175.234,138.621,185.063,142.225,181.724,154.648z',
'M183.726,156.65c-3.34,12.422-14.684,14.388-27.106,11.048,c-12.422-3.342-21.22-10.723-17.879-23.146c3.341-12.422,13.652-10.61,26.074-7.27C177.236,140.623,187.065,144.227,183.726,156.65z',
'M183.726,156.65c-3.34,12.422-14.684,14.388-27.106,11.048,c-12.422-3.342-21.22-10.723-17.879-23.146c3.341-12.422,13.652-10.61,26.074-7.27C177.236,140.623,187.065,144.227,183.726,156.65z',
'M190.067,140.942c4.253,12.14-4.003,20.164-16.143,24.418,c-12.142,4.251-23.57,3.123-27.823-9.019c-4.252-12.141,5.283-16.463,17.422-20.716,C175.666,131.374,185.813,128.801,190.067,140.942z',
'M187.064,135.938c4.253,12.14-4.003,20.164-16.143,24.418,c-12.142,4.251-23.57,3.123-27.823-9.019c-4.252-12.141,5.283-16.463,17.422-20.716,C172.663,126.369,182.811,123.796,187.064,135.938z'];
var hippath = paper.path(hippaths[curhi1++]).attr({"stroke-width":0,fill:'#8B0304',"fill-opacity": 0.9});
<!--Hand-->
var curh1=0;
var handpaths = ['M110.56,163.065c0,0,9.984-5.659,6.35,6.967c-1.283,4.456-6.773,9.526-6.773,9.526,s-20.632,11.877-26.262,0.459C83.874,180.018,108.114,186.781,110.56,163.065z',
'M117.093,163.814c0,0,9.083-7.015,7.271,5.999c-0.639,4.592-5.357,10.389-5.357,10.389,s-18.745,14.677-25.933,4.171C93.075,184.373,118.028,187.639,117.093,163.814z',
'M166.131,159.832c0,0,9.083-7.015,7.271,5.999c-0.639,4.592-5.357,10.389-5.357,10.389,s-18.744,14.677-25.933,4.171C142.112,180.391,167.065,183.656,166.131,159.832z',
'M218.279,121.333c0,0,0.956-11.437,9.334-1.316c2.957,3.571,4.049,10.965,4.049,10.965,s-1.822,23.737-14.425,21.949C217.237,152.931,236.489,136.723,218.279,121.333z',
'M234.419,99.265c0,0-6.751-9.282,6.205-7.096c4.571,0.77,10.23,5.653,10.23,5.653,s14.134,19.158,3.427,26.041C254.281,123.862,258.261,99.013,234.419,99.265z',
'M243.615,106.117c0,0-8.117-8.115,5.021-7.978c4.636,0.047,10.987,3.987,10.987,3.987,s16.949,16.718,7.447,25.187C267.071,127.314,267.125,102.148,243.615,106.117z',
'M157.099,169.457c0,0-8.117-8.115,5.021-7.979c4.636,0.048,10.987,3.988,10.987,3.988,s16.949,16.718,7.447,25.187C180.555,190.653,180.608,165.488,157.099,169.457z',
'M126.286,144.424c0,0,4.467-10.573,9.281,1.652c1.699,4.313,0.437,11.681,0.437,11.681,s-9.117,21.992-20.537,16.373C115.467,174.13,138.806,164.716,126.286,144.424z'];
var handpath = paper.path(handpaths[curh1++]).attr({"stroke-width":0,fill:'#0084B6',"fill-opacity": 0.9});
<!--Spine-->
var curs1=0;
var spinepaths = ['M122.012,140.854c0,0-17.062,0.067-21.727-10.35c-4.664-10.416,16.405,1.836,16.785-8.913,c0.38-10.75-12.282-9.28-11.302-21.24c0.981-11.96,5.568,5.514,15.562-6.229c9.994-11.743-6.836-8.401-1.778-21.133,c5.058-12.732-0.198,7.652,13.953,1.145s-3.486-4.403,3.434-16.377c6.918-11.975-0.325,5.804,10.925,3.406,C159.113,58.766,127.561,141.366,122.012,140.854z',
'M129.482,143.105c0,0-16.885,2.45-22.959-7.212c-6.074-9.663,16.5-0.475,15.375-11.171,c-1.125-10.698-13.458-7.473-14.159-19.452c-0.699-11.98,6.284,4.682,14.539-8.342c8.255-13.024-7.943-7.364-4.714-20.678,c3.229-13.314,0.873,7.605,13.976-0.816c13.103-8.422-4.067-3.873,1.111-16.696c5.177-12.824,0.49,5.792,11.294,1.846,C154.748,56.638,135.048,142.837,129.482,143.105z',
'M130.162,143.05c0,0-19.249,2.518-25.471-7.05c-6.222-9.568,18.894-0.536,17.603-11.214,c-1.291-10.68-15.396-9.068-16.282-21.036c-0.884-11.968,8.18,6.388,16.232-6.761c8.053-13.15-10.573-9.442-7.55-22.804,c3.022-13.362,3.508,9.792,16.479,1.169c12.972-8.623-5.486-6.494-0.506-19.396c4.979-12.902,1.938,8.468,12.68,4.356,C154.091,56.204,135.723,142.696,130.162,143.05z',
'M130.162,141.048c0,0-23.115-1.154-29.337-10.722c-6.222-9.568,22.76,3.136,21.469-7.542,c-1.291-10.68-17.71-12.196-18.596-24.164c-0.884-11.968,10.494,9.516,18.546-3.633C130.297,81.837,108.977,79.862,112,66.5,c3.022-13.362,6.203,15.475,19.174,6.853c12.972-8.623-9.522-10.687-4.542-23.589c4.979-12.902,5.975,12.662,16.717,8.549,C154.091,54.202,135.723,140.694,130.162,141.048z',
'M130.162,141.048c0,0-23.115-1.154-29.337-10.722c-6.222-9.568,22.76,3.136,21.469-7.542,c-1.291-10.68-17.71-12.196-18.596-24.164c-0.884-11.968,10.494,9.516,18.546-3.633C130.297,81.837,108.977,79.862,112,66.5,c3.022-13.362,6.203,15.475,19.174,6.853c12.972-8.623-9.522-10.687-4.542-23.589c4.979-12.902,5.975,12.662,16.717,8.549,C154.091,54.202,135.723,140.694,130.162,141.048z',
'M132.164,147.054c0,0-28.846-1.538-35.068-11.105c-6.222-9.568,28.491,3.52,27.2-7.159,c-1.291-10.68-23.075-13.983-23.96-25.951c-0.884-11.968,15.858,11.303,23.911-1.846c8.053-13.15-17.991-17.866-14.967-31.228,c3.022-13.362,10.925,18.216,23.896,9.593c12.972-8.623-9.82-16.531-4.84-29.434c4.979-12.902,6.272,18.506,17.015,14.394,C156.093,60.208,137.725,146.7,132.164,147.054z',
'M132.164,147.054c0,0-23.83,0-26.82-19.739c-1.709-11.285,20.243,12.153,18.952,1.475,c-2.124-17.579-23.7-24.777-21.573-30.652c4.997-13.804,13.471,16.004,21.524,2.855c8.053-13.15-13.169-16.449-10.146-29.811,c3.022-13.362,6.104,16.799,19.075,8.176c12.972-8.623-8.602-12.671-3.622-25.573c4.979-12.902,5.054,14.646,15.796,10.533,C156.093,60.208,137.725,146.7,132.164,147.054z',
'M129.491,143.143c0,0-23.808-1.042-25.931-20.894c-1.214-11.349,19.692,13.027,18.87,2.303,c-1.353-17.655-21.521-15.615-20.212-31.566c1.202-14.632,12.758,16.578,21.378,3.794c8.621-12.786-12.961-6.808-8.832-30.227,c2.379-13.492,5.363,17.05,18.699,9.003c13.337-8.047-8.039-13.035-2.499-25.707c5.538-12.672,4.408,14.853,15.32,11.214,C157.196,57.426,135.062,143.032,129.491,143.143z'];
var spinepath = paper.path(spinepaths[curs1++]).attr({"stroke-width":0,fill:'#ED1C24',"fill-opacity": 0.9});
<!--Front Calf-->
var curc1=0;
var calfpaths = ['M188.076,170.272c0,0-10.699,8.944-10.712,19.131c-0.014,10.186,17.257,44.79,17.257,44.79,S219.341,212.345,188.076,170.272z',
'M192.608,182.564c0,0-12.554-1.374-19.258,5.056c-6.703,6.43-18.677,39.645-18.677,39.645,S184.456,229.688,192.608,182.564z',
'M170.547,192.792c0,0-12.556-1.367-19.256,5.065c-6.7,6.434-18.655,39.655-18.655,39.655,S162.42,239.92,170.547,192.792z',
'M136.198,195.711c0,0-12.357-2.61-19.665,3.123c-7.307,5.734-22.511,37.601-22.511,37.601,S123.419,241.796,136.198,195.711z',
'M143.714,203.033c0,0-9.58-8.23-18.744-6.716c-9.164,1.514-37.817,22.146-37.817,22.146,S110.351,237.297,143.714,203.033z',
'M158.604,203.841c0,0-6.688-10.714-15.886-12.004c-9.198-1.29-42.703,9.851-42.703,9.851,S116.536,226.586,158.604,203.841z',
'M196.791,199.153c0,0-3.338-12.181-11.78-16.052c-8.443-3.871-43.735-2.795-43.735-2.795,S149.97,208.894,196.791,199.153z',
'M215.615,175.108c0,0-8.785-9.074-18.049-8.407s-39.688,18.584-39.688,18.584,S179.25,206.167,215.615,175.108z'];
var calfpath = paper.path(calfpaths[curc1++]).attr({"stroke-width":0,fill:'#006991',"fill-opacity": 0.9});
<!--Front Foot-->
var curfo=0;
var footpaths = ['M201.94,229.215l-4.674,8.51c0,0,5.392,9.601,12.091,6.23,c6.699-3.373,17.227-13.71,17.227-13.71S203.521,240.828,201.94,229.215z',
'M157.368,225.713l-8.634,4.438c0,0-0.901,10.975,6.537,11.929,c7.44,0.951,21.948-1.729,21.948-1.729S152.183,236.224,157.368,225.713z',
'M141.379,236.105l-8.781,4.141c0,0-1.275,10.937,6.126,12.145,c7.403,1.205,21.995-0.979,21.995-0.979S135.837,246.433,141.379,236.105z',
'M103.759,239.08l-9.125,3.316c0,0-2.275,10.772,4.983,12.656,c7.261,1.881,21.992,1.048,21.992,1.048S97.291,248.854,103.759,239.08z',
'M94.38,222.8l-9.669,0.869c0,0-4.958,9.83,1.576,13.511c6.538,3.677,20.99,6.645,20.99,6.645,S85.625,230.592,94.38,222.8z',
'M101.386,211.824l-9.096-3.392c0,0-8.717,6.725-4.413,12.866,c4.309,6.14,16.062,15.058,16.062,15.058S90.125,215.071,101.386,211.824z',
'M147.026,188.219l-9.692-0.548c0,0-6.337,9.003-0.408,13.596,c5.933,4.59,19.798,9.63,19.798,9.63S137.23,194.652,147.026,188.219z',
'M166.601,192.854l-9.692-0.548c0,0-6.337,9.003-0.408,13.596,c5.933,4.59,19.799,9.63,19.799,9.63S156.805,199.287,166.601,192.854z'];
var footpath = paper.path(footpaths[curfo++]).attr({"stroke-width":0,fill:'#006991',"fill-opacity": 0.9});
<!--Ankle1-->
var cura1x=0;
var cura1y=0;
var ankle1xpaths = [195.456,155.641,135.621,96.112,87.153,100.016,140.708,160.266];
var ankle1ypaths = [231.919,227.286,237.296,237.534,218.92,204.728,184.879,189.586];
var ankle1 = paper.circle(ankle1xpaths[cura1x++], ankle1ypaths[cura1y++], 4.709).attr({"stroke-width":0,fill:'#ED1C24',"fill-opacity": 0.9});
<!--Thigh-->
var curth=0;
var thighpaths = ['M135.481,148.844c0,0,14.409-16.351,34.179-14.438c7.976,2.928,19.588,33.867,19.588,33.867,s11.522,31.985-8.144,23.126C161.438,182.541,135.481,148.844,135.481,148.844z',
'M134.146,146.409c0,0,14.098-16.621,33.9-15.083c8.03,2.777,20.225,33.49,20.225,33.49,s12.125,31.763-7.704,23.276C160.736,179.608,134.146,146.409,134.146,146.409z',
'M141.002,132.612c0,0,20.868-6.285,36.652,5.772c5.229,6.696-1.233,39.104-1.233,39.104,s-7.093,33.25-19.121,15.348C145.27,174.934,141.002,132.612,141.002,132.612z',
'M141.126,134.519c0,0,21.346,4.399,29.493,22.513c1.414,8.378-19.687,33.809-19.687,33.809,s-22.057,25.873-24.121,4.404C124.747,173.774,141.126,134.519,141.126,134.519z',
'M140.842,134.688c0,0,21.725,1.741,32.038,18.716c2.434,8.141-15.38,35.973-15.38,35.973,s-18.708,28.389-23.396,7.337C129.415,175.66,140.842,134.688,140.842,134.688z',
'M140.989,135.796c0,0,21.704-1.991,34.76,12.977c3.787,7.606-9.018,38.069-9.018,38.069,s-13.591,31.163-21.802,11.22C136.718,178.116,140.989,135.796,140.989,135.796z',
'M146.319,148.063c0,0,17.014-13.622,36.157-8.327c7.352,4.26,13.453,36.736,13.453,36.736,s5.832,33.494-12.01,21.378C166.076,185.73,146.319,148.063,146.319,148.063z',
'M147.136,152.832c0,0,9.139-19.786,28.632-23.598c8.48,0.529,28.443,26.862,28.443,26.862,s20.176,27.364-1.199,24.49C181.635,177.712,147.136,152.832,147.136,152.832z'];
var thighpath = paper.path(thighpaths[curth++]).attr({"stroke-width":0,fill:'#006991',"fill-opacity": 0.9});
<!--Torso-->
var curt=0;
var torsopaths = ['M152.084,63.748c0,0-46.601,35.806-25.056,84.239c5.334,11.992,54.469,12.359,60.766,11.501,c0,0,21.899-67.128,10.068-79.945C190.79,71.882,152.084,63.748,152.084,63.748z',
'M147.424,63.812c0,0-43.353,39.676-17.727,86.08c6.345,11.49,55.329,7.634,61.529,6.238,c0,0,16.052-68.761,3.163-80.514C186.686,68.59,147.424,63.812,147.424,63.812z',
'M147.026,64.224c0,0-42.148,40.954-15.147,86.57c6.686,11.295,55.532,5.979,61.688,4.397,c0,0,13.99-69.21,0.756-80.573C186.413,67.827,147.026,64.224,147.026,64.224z',
'M147.026,59.219c0,0-42.148,40.954-15.147,86.57c6.686,11.295,55.532,5.979,61.688,4.397,c0,0,13.99-69.21,0.756-80.573C186.413,62.822,147.026,59.219,147.026,59.219z',
'M149.436,59.4c0,0-44.521,38.36-20.295,85.51c5.998,11.674,55.075,9.288,61.315,8.078,c0,0,18.103-68.25,5.571-80.383C188.537,65.352,149.436,59.4,149.436,59.4z',
'M149.436,65.406c0,0-44.521,38.36-20.295,85.51c5.998,11.674,55.075,9.288,61.315,8.078,c0,0,18.103-68.25,5.571-80.383C188.537,71.357,149.436,65.406,149.436,65.406z',
'M149.436,62.403c0,0-44.521,38.36-20.295,85.51c5.998,11.674,55.075,9.288,61.315,8.078,c0,0,18.103-68.25,5.571-80.383C188.537,68.354,149.436,62.403,149.436,62.403z',
'M150.45,59.328c0,0-46.157,36.376-24.017,84.54c5.481,11.926,54.616,11.688,60.903,10.753,c0,0,21.071-67.393,9.083-80.063C189.253,66.985,150.45,59.328,150.45,59.328z'];
var torsopath = paper.path(torsopaths[curt++]).attr({"stroke-width":0,fill:'#E6E7E8',"fill-opacity": 0.9});
<!--Neck-->
var curn=0;
var neckpaths = ['M200.144,73.476c-0.654,7.981-12.678,1.469-22.991,0.623,c-10.313-0.846-20.227-4.157-19.572-12.139s14.639-3.818,24.952-2.972C192.845,59.833,200.798,65.494,200.144,73.476z',
'M196.142,69.375c0.033,8.008-12.505,2.553-22.853,2.596,c-10.349,0.043-20.51-2.404-20.543-10.413c-0.034-8.008,14.256-5.062,24.604-5.104C187.697,56.41,196.107,61.367,196.142,69.375z',
'M196.142,69.375c0.033,8.008-12.505,2.553-22.853,2.596,c-10.349,0.043-20.51-2.404-20.543-10.413c-0.034-8.008,14.256-5.062,24.604-5.104C187.697,56.41,196.107,61.367,196.142,69.375z',
'M195.066,66.716c-0.095,8.008-12.544,2.354-22.892,2.232,c-10.348-0.122-20.469-2.73-20.374-10.738c0.093-8.008,14.334-4.834,24.683-4.712C186.829,53.619,195.159,58.709,195.066,66.716z',
'M196.942,69.756c-0.573,7.988-12.662,1.599-22.984,0.86,c-10.321-0.741-20.269-3.95-19.695-11.938c0.571-7.988,14.598-3.968,24.92-3.228C189.503,56.19,197.514,61.769,196.942,69.756z',
'M196.942,69.756c-0.573,7.988-12.662,1.599-22.984,0.86,c-10.321-0.741-20.269-3.95-19.695-11.938c0.571-7.988,14.598-3.968,24.92-3.228C189.503,56.19,197.514,61.769,196.942,69.756z',
'M196.942,69.756c-0.573,7.988-12.662,1.599-22.984,0.86,c-10.321-0.741-20.269-3.95-19.695-11.938c0.571-7.988,14.598-3.968,24.92-3.228C189.503,56.19,197.514,61.769,196.942,69.756z',
'M197.589,68.753c-0.922,7.955-12.72,1.043-23-0.146,c-10.278-1.192-20.076-4.833-19.154-12.788c0.921-7.955,14.758-3.326,25.038-2.134C190.75,54.875,198.51,60.798,197.589,68.753z'];
var neckpath = paper.path(neckpaths[curn++]).attr({"stroke-width":0,fill:'#ED1C24',"fill-opacity": 0.9});
<!--Head-->
var curhe=0;
var headpaths = ['M171.7,59.121c0,0,12.696,7.558,22.977,4.934c4.482-1.144,10.456-32.018,10.456-32.018,s-4.878-19.375-24.755-10.941C172.374,24.491,171.7,59.121,171.7,59.121z',
'M168.461,57.826c0,0,13.012,7.001,23.169,3.936c4.429-1.336,9.062-32.44,9.062-32.44,s-5.711-19.146-25.204-9.861C167.638,23.199,168.461,57.826,168.461,57.826z',
'M165.803,58.129c0,0,13.143,6.754,23.239,3.497c4.403-1.419,8.447-32.605,8.447-32.605,s-6.072-19.035-25.387-9.383C164.325,23.523,165.803,58.129,165.803,58.129z',
'M164.078,54.165c0,0,13.567,5.853,23.422,1.922c4.298-1.713,6.23-33.101,6.23-33.101,s-7.342-18.583-25.962-7.65C160.271,19.737,164.078,54.165,164.078,54.165z',
'M166.76,55.374c0,0,13.193,6.653,23.266,3.319c4.392-1.453,8.198-32.669,8.198-32.669,s-6.218-18.988-25.459-9.189C165.019,20.781,166.76,55.374,166.76,55.374z',
'M167.634,56.093c0,0,13.486,6.037,23.395,2.241c4.319-1.654,6.68-33.013,6.68-33.013,s-7.089-18.681-25.856-8.003C164.296,21.617,167.634,56.093,167.634,56.093z',
'M167.634,56.093c0,0,13.486,6.037,23.395,2.241c4.319-1.654,6.68-33.013,6.68-33.013,s-7.089-18.681-25.856-8.003C164.296,21.617,167.634,56.093,167.634,56.093z',
'M168.906,53.82c0,0,13.21,6.621,23.274,3.262c4.388-1.463,8.117-32.688,8.117-32.688,s-6.265-18.973-25.481-9.127C167.08,19.231,168.906,53.82,168.906,53.82z'];
var headpath = paper.path(headpaths[curhe++]).attr({"stroke-width":0,fill:'#27AAE1',"fill-opacity": 0.9});
<!--Shoulder2-->
var cursh2x=0;
var cursh2y=0;
var shoulder2xpaths = [150.584,151.585,151.585,151.585,153.587,155.589,159.593,159.593];
var shoulder2ypaths = [96.103,95.102,95.102,95.102,92.099,92.099,92.099,88.095];
var shoulder2 = paper.circle(shoulder2xpaths[cursh2x++], shoulder2ypaths[cursh2y++], 20.917).attr({"stroke-width":0,fill:'#ED1C24',"fill-opacity": 0.9});
<!--Calf2-->
var curc2=0;
var calf2paths = ['M138.78,201.658c0,0-10.735-8.899-20.754-7.067c-10.021,1.831-40.922,25.088-40.922,25.088,S103.069,240.029,138.78,201.658z',
'M155.057,212.648c0,0-3.296-13.549-12.427-18.062c-9.131-4.515-47.806-4.312-47.806-4.312,S103.5,222.103,155.057,212.648z',
'M210.373,190.764c0,0-7.427-11.802-17.518-13.184c-10.092-1.383-46.703,11.086-46.703,11.086,S164.483,216.095,210.373,190.764z',
'M222.373,176.171c0,0-8.985-10.663-19.171-10.638c-10.186,0.024-44.723,17.43-44.723,17.43,S180.422,207.598,222.373,176.171z',
'M206.554,179.146c0,0-12.308,6.554-14.415,16.519c-2.108,9.966,7.683,47.381,7.683,47.381,S228.504,226.745,206.554,179.146z',
'M206.554,179.146c0,0-12.308,6.554-14.415,16.519c-2.108,9.966,7.683,47.381,7.683,47.381,S228.504,226.745,206.554,179.146z',
'M179.773,194.607c0,0-13.912-0.944-20.969,6.4c-7.059,7.345-18.529,44.279-18.529,44.279,S173.239,246.615,179.773,194.607z',
'M147.791,187.438c0,0-13.633-2.928-21.669,3.33c-8.038,6.258-24.682,41.167-24.682,41.167,S133.873,237.973,147.791,187.438z'];
var calf2path = paper.path(calf2paths[curc2++]).attr({"stroke-width":0,fill:'#008BBF',"fill-opacity": 0.9});
<!--Foot2-->
var curfo2=0;
var foot2paths = ['M79.373,226.108l-9.616-1.334c0,0-7.048,8.46-1.51,13.518,c5.538,5.058,18.947,11.208,18.947,11.208S69.086,231.725,79.373,226.108z',
'M97.107,198.912l-7.645-5.983c0,0-10.344,3.775-8.096,10.931,c2.248,7.154,10.753,19.208,10.753,19.208S85.391,198.602,97.107,198.912z',
'M147.727,195.473l-8.699-4.308c0,0-9.363,5.795-5.71,12.346,c3.652,6.549,14.426,16.627,14.426,16.627S136.191,197.546,147.727,195.473z',
'M159.42,190.437l-8.7-4.308c0,0-9.363,5.795-5.71,12.346,c3.652,6.549,14.425,16.627,14.425,16.627S147.884,192.51,159.42,190.437z',
'M205.049,243.113l-6.271,7.412c0,0,3.378,10.48,10.614,8.506,c7.235-1.973,19.604-10.012,19.604-10.012S204.292,254.811,205.049,243.113z',
'M205.049,243.113l-6.271,7.412c0,0,3.378,10.48,10.614,8.506,c7.235-1.973,19.604-10.012,19.604-10.012S204.292,254.811,205.049,243.113z',
'M148.757,241.98l-8.049,5.428c0,0,0.402,11.004,7.902,11.071,c7.5,0.068,21.587-4.306,21.587-4.306S144.849,253.031,148.757,241.98z',
'M108.553,232.982l-8.739,4.227c0,0-1.167,10.95,6.247,12.083,c7.414,1.136,21.981-1.19,21.981-1.19S103.113,243.365,108.553,232.982z'];
var foot2path = paper.path(foot2paths[curfo2++]).attr({"stroke-width":0,fill:'#008BBF',"fill-opacity": 0.9});
<!--Ankle2-->
var cura2x=0;
var cura2y=0;
var ankle2xpaths = [77.204,94.824,144.358,155.835,198.896,198.896,142.492,102.157];
var ankle2ypaths = [220.489,192.274,189.487,184.778,243.046,243.046,243.264,232.159];
var ankle2 = paper.circle(ankle2xpaths[cura2x++], ankle2ypaths[cura2y++], 4.708).attr({"stroke-width":0,fill:'#ED1C24',"fill-opacity": 0.9});
<!--Hip2-->
var curhi2=0;
var hip2paths = ['M177.45,162.01c-4.608,12.011-16.094,12.792-28.104,8.185,c-12.011-4.607-19.997-12.86-15.389-24.871c4.608-12.011,14.676-9.141,26.687-4.533C172.654,145.398,182.058,150,177.45,162.01z',
'M178.061,158.32c-3.162,12.47-14.476,14.599-26.944,11.437,c-12.469-3.161-21.372-10.416-18.21-22.886c3.162-12.47,13.498-10.805,25.968-7.644,C171.343,142.389,181.223,145.852,178.061,158.32z',
'M190.101,144.841c3.178,12.466-5.745,19.739-18.21,22.916,c-12.466,3.179-23.752,1.057-26.93-11.409c-3.177-12.466,6.698-15.94,19.164-19.118,C176.59,134.052,186.924,132.375,190.101,144.841z',
'M187.098,139.836c3.178,12.466-5.745,19.739-18.21,22.916,c-12.466,3.179-23.752,1.057-26.93-11.409c-3.177-12.466,6.698-15.94,19.164-19.118,C173.587,129.047,183.921,127.371,187.098,139.836z',
'M187.098,139.836c3.178,12.466-5.745,19.739-18.21,22.916,c-12.466,3.179-23.752,1.057-26.93-11.409c-3.177-12.466,6.698-15.94,19.164-19.118,C173.587,129.047,183.921,127.371,187.098,139.836z',
'M187.098,139.836c3.178,12.466-5.745,19.739-18.21,22.916,c-12.466,3.179-23.752,1.057-26.93-11.409c-3.177-12.466,6.698-15.94,19.164-19.118,C173.587,129.047,183.921,127.371,187.098,139.836z',
'M184.252,148.943c-2.42,12.636-13.588,15.429-26.222,13.008,c-12.635-2.419-21.95-9.135-19.53-21.77c2.42-12.634,12.836-11.583,25.472-9.164C176.605,133.437,186.673,136.31,184.252,148.943z',
'M177.584,149.516c-4.351,12.107-15.816,13.135-27.922,8.784,c-12.107-4.35-20.268-12.429-15.918-24.536c4.351-12.106,14.477-9.453,26.585-5.103,C172.435,133.011,181.935,137.41,177.584,149.516z'];
var hip2path = paper.path(hip2paths[curhi2++]).attr({"stroke-width":0,fill:'#ED1C24',"fill-opacity": 0.9});
<!--Thigh2-->
var curth2=0;
var thigh2paths = ['M137.735,138.129c0,0,21.531,3.375,30.533,21.08c1.812,8.301-18.05,34.709-18.05,34.709,s-20.796,26.898-23.884,5.551C123.248,178.122,137.735,138.129,137.735,138.129z',
'M136.49,147.311c0,0,21.46-3.798,35.723,10.025c4.409,7.263-5.805,38.689-5.805,38.689,s-10.938,32.192-20.788,13.004S136.49,147.311,136.49,147.311z',
'M146.036,159.569c0,0,11.253-18.664,31.047-20.316c8.37,1.456,25.326,29.818,25.326,29.818,s17.057,29.412-3.876,24.212S146.036,159.569,146.036,159.569z',
'M151.353,163.699c0,0,4.663-21.289,22.878-29.21c8.395-1.31,33.561,20.105,33.561,20.105,s25.599,22.377,4.105,24.175C190.402,180.565,151.353,163.699,151.353,163.699z',
'M149.6,157.173c0,0,12.627-17.763,32.489-17.919c8.236,2.082,23.008,31.641,23.008,31.641,s14.792,30.613-5.688,23.852C178.927,187.983,149.6,157.173,149.6,157.173z',
'M149.6,157.173c0,0,12.627-17.763,32.489-17.919c8.236,2.082,23.008,31.641,23.008,31.641,s14.792,30.613-5.688,23.852C178.927,187.983,149.6,157.173,149.6,157.173z',
'M140.091,145.129c0,0,19.256-10.208,37.075-1.435c6.427,5.557,6.363,38.601,6.363,38.601,s-0.518,33.996-15.786,18.763S140.091,145.129,140.091,145.129z',
'M139.547,130.792c0,0,21.771,1.03,32.632,17.66c2.697,8.056-14.197,36.455-14.197,36.455,s-17.769,28.987-23.144,8.099C129.464,172.118,139.547,130.792,139.547,130.792z'];
var thigh2path = paper.path(thigh2paths[curth2++]).attr({"stroke-width":0,fill:'#008BBF',"fill-opacity": 0.9});
<!--Bicep2-->
var curb2=0;
var bicep2paths = ['M136.12,93.917c0,0,6.816-23.587,28.818-9.247c0,0,22.569,19.408,19.961,38.996,C182.289,143.254,137.429,125.014,136.12,93.917z',
'M137.121,92.916c0,0,6.816-23.587,28.818-9.247c0,0,22.569,19.408,19.961,38.996,C183.29,142.253,138.43,124.013,137.121,92.916z',
'M144.308,83.494c0,0,23.357-7.567,23.804,18.691c0,0-3.434,29.568-21.12,38.381,C129.303,149.377,119.281,101.999,144.308,83.494z',
'M144.308,83.494c0,0,23.357-7.567,23.804,18.691c0,0-3.434,29.568-21.12,38.381,C129.303,149.377,119.281,101.999,144.308,83.494z',
'M148.69,82.935c0,0,24.442,2.323,14.433,26.603c0,0-14.885,25.777-34.616,26.849,C108.774,137.455,118.375,89.99,148.69,82.935z',
'M157.103,77.546c0,0,22.401,10.051,5.122,29.829c0,0-22.377,19.63-41.407,14.306,C101.788,116.354,126.128,74.489,157.103,77.546z',
'M150.169,78.932c0,0,22.698-9.363,25.187,16.782c0,0-1.122,29.746-18.068,39.909,C140.339,145.783,126.66,99.329,150.169,78.932z',
'M142.043,87.406c0,0,9.717-22.548,29.75-5.564c0,0,19.961,22.083,14.919,41.19,C181.668,142.138,139.447,118.422,142.043,87.406z'];
var bicep2path = paper.path(bicep2paths[curb2++]).attr({"stroke-width":0,fill:'#00AEEF',"fill-opacity": 0.9});
<!--Forearm2-->
var curf2=0;
var forearm2paths = ['M181.697,137.401c-4.058,0.71-22.357-5.969-5.95-15.368,c16.062-9.202,12.721-7.44,28.972-11.805C226.598,104.35,192.571,135.5,181.697,137.401z',
'M184.054,134.602c-4.12-0.052-20.869-9.999-3.008-16.204,c17.486-6.073,13.878-4.96,30.655-6.246C234.29,110.421,195.091,134.744,184.054,134.602z',
'M137.637,140.07c-2.739-3.078-6.686-22.154,9.939-13.146,c16.275,8.819,13.02,6.905,25.281,18.428C189.367,160.866,144.975,148.317,137.637,140.07z',
'M137.637,140.07c-2.739-3.078-6.686-22.154,9.939-13.146,c16.275,8.819,13.02,6.905,25.281,18.428C189.367,160.866,144.975,148.317,137.637,140.07z',
'M120.549,137.238c-0.271-4.111,8.333-21.588,15.918-4.269,c7.425,16.957,6.032,13.446,8.628,30.072C148.594,185.425,121.273,148.253,120.549,137.238z',
'M106.662,118.749c2.207-3.479,19.463-12.518,15.372,5.943,c-4.006,18.073-3.061,14.416-10.771,29.374C100.886,174.203,100.75,128.071,106.662,118.749z',
'M143.704,137.14c0.221-4.114,10.843-20.442,16.314-2.343,c5.354,17.72,4.388,14.069,4.986,30.886C165.812,188.324,143.111,148.164,143.704,137.14z',
'M180.634,129.567c-3.622-1.965-13.812-18.565,4.883-15.741,c18.304,2.767,14.591,2.072,30.038,8.747C236.354,131.556,190.338,134.831,180.634,129.567z'];
var forearm2path = paper.path(forearm2paths[curf2++]).attr({"stroke-width":0,fill:'#00AEEF',"fill-opacity": 0.9});
<!--Wrist2-->
var curw2x=0;
var curw2y=0;
var wrist2xpaths = [211.907,214.91,176.51,176.51,143.714,107.72,165.023,220.894];
var wrist2ypaths = [111.049,114.052,151.001,151.001,167.485,160.046,172.561,127.314];
var wrist2 = paper.circle(wrist2xpaths[curw2x++], wrist2ypaths[curw2y++], 4.997).attr({"stroke-width":0,fill:'#ED1C24',"fill-opacity": 0.9});
<!--Hand2-->
var curh2=0;
var hand2paths = ['M215.744,113.892c0,0-11.21-2.452-0.075-9.425c3.93-2.461,11.403-2.57,11.403-2.57,s23.29,4.932,19.858,17.192C246.931,119.088,233.399,97.87,215.744,113.892z',
'M219.791,115.632c0,0-10.649-4.273,1.485-9.308c4.283-1.777,11.672-0.648,11.672-0.648,s22.152,8.719,16.739,20.241C249.688,125.917,239.854,102.752,219.791,115.632z',
'M180.413,154.761c0,0-6.889-9.176,6.098-7.188c4.583,0.702,10.315,5.499,10.315,5.499,s14.418,18.943,3.815,25.987C200.642,179.06,204.247,154.153,180.413,154.761z',
'M180.413,154.761c0,0-6.889-9.176,6.098-7.188c4.583,0.702,10.315,5.499,10.315,5.499,s14.418,18.943,3.815,25.987C200.642,179.06,204.247,154.153,180.413,154.761z',
'M144.428,172.72c0,0-1.584-11.364,8.815-3.337c3.67,2.834,6.363,9.807,6.363,9.807,s3.443,23.556-9.244,24.585C150.362,203.774,165.576,183.728,144.428,172.72z',
'M104.152,166.613c0,0,2.07-11.286,9.417-0.396c2.593,3.845,2.957,11.311,2.957,11.311,s-4.139,23.443-16.506,20.431C100.02,197.959,120.766,183.714,104.152,166.613z',
'M164.897,178.86c0,0-2.192-11.263,8.624-3.807c3.816,2.634,6.881,9.451,6.881,9.451,s4.705,23.336-7.908,25.047C172.494,209.552,186.607,188.716,164.897,178.86z',
'M221.01,131.276c0,0-4.167-10.691,7.806-5.284c4.226,1.91,8.457,8.071,8.457,8.071,s8.794,22.123-3.312,26.057C233.961,160.12,244.13,137.1,221.01,131.276z'];
var hand2path = paper.path(hand2paths[curh2++]).attr({"stroke-width":0,fill:'#00AEEF',"fill-opacity": 0.9});
<!--Nose-->
var curn2=0;
var nosepaths = ['M201.287,49.643l3.271,0.292c0,0,0.451-8.464-0.118-10.164,C203.868,38.071,201.287,49.643,201.287,49.643z',
'M197.61,47.077l3.28,0.15c0,0,0.085-8.476-0.558-10.149,C199.689,35.405,197.61,47.077,197.61,47.077z',
'M194.744,46.831l3.282,0.088c0,0-0.075-8.476-0.749-10.137,C196.603,35.122,194.744,46.831,194.744,46.831z',
'M192.191,40.941l3.281-0.133c0,0-0.646-8.451-1.431-10.064,C193.257,29.133,192.191,40.941,192.191,40.941z',
'M195.613,43.855l3.283,0.063c0,0-0.14-8.475-0.826-10.131,C197.383,32.132,195.613,43.855,195.613,43.855z',
'M195.924,43.253l3.283-0.088c0,0-0.531-8.459-1.294-10.082,C197.15,31.461,195.924,43.253,195.924,43.253z',
'M195.924,43.253l3.283-0.088c0,0-0.531-8.459-1.294-10.082,C197.15,31.461,195.924,43.253,195.924,43.253z',
'M197.731,42.231l3.283,0.055c0,0-0.16-8.474-0.852-10.129,C199.473,30.504,197.731,42.231,197.731,42.231z'];
var nosepath = paper.path(nosepaths[curn2++]).attr({"stroke-width":0,fill:'#ED1C24',"fill-opacity": 0.9});
<!--Eye-->
var cure=0;
var eyepaths = ['M203.437,39.783c0,0-9.098,4.773-14.434-3.165s2.027,5.157,2.027,5.157,s5.722,5.411,9.2,3.042C203.708,42.449,203.437,39.783,203.437,39.783z',
'M199.332,37.133c0,0-8.883,5.162-14.557-2.538c-5.675-7.7,2.248,5.064,2.248,5.064,s5.95,5.158,9.323,2.642C199.719,39.785,199.332,37.133,199.332,37.133z',
'M196.277,36.856c0,0-8.783,5.329-14.602-2.262c-5.819-7.591,2.343,5.021,2.343,5.021,s6.047,5.044,9.372,2.465C196.714,39.5,196.277,36.856,196.277,36.856z',
'M193.049,30.886c0,0-8.403,5.909-14.721-1.272s2.676,4.852,2.676,4.852,s6.373,4.625,9.518,1.828C193.663,33.495,193.049,30.886,193.049,30.886z',
'M197.07,33.87c0,0-8.741,5.396-14.618-2.15s2.381,5.003,2.381,5.003s6.085,4.998,9.392,2.394,C197.527,36.51,197.07,33.87,197.07,33.87z',
'M196.918,33.211c0,0-8.482,5.794-14.701-1.473c-6.22-7.267,2.609,4.888,2.609,4.888,s6.31,4.711,9.492,1.957C197.497,35.827,196.918,33.211,196.918,33.211z',
'M196.918,33.211c0,0-8.482,5.794-14.701-1.473c-6.22-7.267,2.609,4.888,2.609,4.888,s6.31,4.711,9.492,1.957C197.497,35.827,196.918,33.211,196.918,33.211z',
'M199.164,32.242c0,0-8.729,5.417-14.623-2.114c-5.896-7.532,2.394,4.997,2.394,4.997,s6.097,4.983,9.397,2.371C199.628,34.881,199.164,32.242,199.164,32.242z'];
var eyepath = paper.path(eyepaths[cure++]).attr({"stroke-width":0,fill:'#E6E7E8',"fill-opacity": 0.9});
var animate = function(){
biceppath.animate({path:biceppaths[curb1++]},400,animate);
fforearmpath.animate({path:fforearmpaths[curf1++]},400);
hippath.animate({path:hippaths[curhi1++]},400);
handpath.animate({path:handpaths[curh1++]},400);
spinepath.animate({path:spinepaths[curs1++]},400,'bounce');
footpath.animate({path:footpaths[curfo++]},400);
calfpath.animate({path:calfpaths[curc1++]},400);
thighpath.animate({path:thighpaths[curth++]},400);
torsopath.animate({path:torsopaths[curt++]},400);
neckpath.animate({path:neckpaths[curn++]},400);
headpath.animate({path:headpaths[curhe++]},400);
calf2path.animate({path:calf2paths[curc2++]},400);
foot2path.animate({path:foot2paths[curfo2++]},400);
hip2path.animate({path:hip2paths[curhi2++]},400);
thigh2path.animate({path:thigh2paths[curth2++]},400);
forearm2path.animate({path:forearm2paths[curf2++]},400);
bicep2path.animate({path:bicep2paths[curb2++]},400);
hand2path.animate({path:hand2paths[curh2++]},400);
nosepath.animate({path:nosepaths[curn2++]},400);
eyepath.animate({path:eyepaths[cure++]},400);
wrist1.animate({cx: wrist1xpaths[curw1x++], cy: wrist1ypaths[curw1y++]},400);
ankle1.animate({cx: ankle1xpaths[cura1x++], cy: ankle1ypaths[cura1y++]},400);
ankle2.animate({cx: ankle2xpaths[cura2x++], cy: ankle2ypaths[cura2y++]},400);
shoulder2.animate({cx: shoulder2xpaths[cursh2x++], cy: shoulder2ypaths[cursh2y++]},400);
wrist2.animate({cx: wrist2xpaths[curw2x++], cy: wrist2ypaths[curw2y++]},400);
if(curb1 >= biceppaths.length) {
curb1 = 0;
curf1 = 0;
curhi1 = 0;
curh1 = 0;
curs1 = 0;
curc1 = 0;
curfo = 0;
curth = 0;
curt = 0;
curn = 0;
curhe = 0;
curc2 = 0;
curfo2 = 0;
curhi2 = 0;
curth2 = 0;
curb2 = 0;
curf2 = 0;
curh2 = 0;
curn2 = 0;
cure = 0;
curw1x = 0;
curw1y = 0;
cura1x = 0;
cura1y = 0;
cura2x = 0;
cura2y = 0;
cursh2x = 0;
cursh2y = 0;
curw2x = 0;
curw2y = 0;
}
}
setTimeout(animate,400);
animate();
});
Raw
style.css
<style>
#icon{
width:500px;
height:500px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment