Skip to content

Instantly share code, notes, and snippets.

@omniosi

omniosi/jsbin.xamak.html

Last active August 29, 2015 13:56
Show Gist options
  • Save omniosi/9276412 to your computer and use it in GitHub Desktop.
Save omniosi/9276412 to your computer and use it in GitHub Desktop.
Download ZIP
animating arm tween with Raphael JS
Raw
jsbin.xamak.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="box"></div>
</body>
</html>
Raw
jsbin.xamak.js
Raphael(function(){
// var box = Raphael("box",200, 200);
// var shoulder = box.path("M10 10L90 90");
var rsr = Raphael('box', '200', '200');
var path_a = rsr.path("M80.2,92.1c1.7-1.3,3.4-2.9,3.9-4.9c0.5-1.8,0-3.8-0.5-5.6 c-4-15.2-8.2-30.3-12.3-45.4c-8.1,2.5-15.7,6.6-22.2,12l17.4,52.8C66.5,100.9,73.1,97.9,80.2,92.1z");
path_a.attr({fill: 'none',stroke: '#000000',"stroke-miterlimit": '10','stroke-width': 2,'stroke-opacity': '1'}).data('id', 'path_a');
var path_b = rsr.path("M85.7,93.5c9.2,12.9,11.4,47.4,8.9,47.9c-1.8,0.4-3.6,0.5-5.4,0.5 c-3.2,0.1-6.4,0.2-9.7,0.3c-1.3,0-2.6,0.1-3.7-0.7c-1.3-0.9-1.7-2.7-2.1-4.2c-0.6-2.2-6.2-23.4-6.8-32.1c-0.3-3.9-0.4-8.1,1.6-11.4 c5.1,1.1,10.5-2.8,15.5-1.2C85.5,93.1,85.7,93.5,85.7,93.5z");
path_b.attr({fill: 'none',stroke: '#000000',"stroke-miterlimit": '10','stroke-width': 2,'stroke-opacity': '1'}).data('id', 'path_b');
var path_c = rsr.path("M76.3,162c-0.3-1.2,0.2-2.4,0.8-3.4c1.4-2.6-2.3-11.7,3.4-13.3 c2.3-2.2-1.3-5.9-0.2-8.8c0.1-0.3,0.3-0.6,0.5-0.6c0.2,0,0.4,0.1,0.6,0.2c1.9,1.1,3.9,2.2,5.8,3.3c0.6,0.3,1.2,0.7,1.6,1.2 c0.8,0.9,0.9,2.2,1,3.4c0.2,2.6,1.4,16,1.7,16.7c0.2,0.6,0.3,1.2,0.3,1.9c0.7,5.3-2.6,5.5-3.2,5.8c-1.9-0.4-13.1,1.3-10.9-4.3 C77.1,163.5,76.5,162.9,76.3,162z");
path_c.attr({fill: 'none',stroke: '#000000',"stroke-miterlimit": '10','stroke-width': 2,'stroke-opacity': '1'}).data('id', 'path_c');
//var rsrGroups = [];
path_a.animate({
path: "M105.5,44.6c-0.8-2-1.7-4.1-3.5-5.3c-1.6-1-3.6-1.2-5.5-1.3 c-15.7-0.9-31.3-1.6-47-2.4c-0.1,8.5,1.4,17,4.5,24.9l55.5-0.2C109.6,60.3,108.8,53.2,105.5,44.6z"
},500, 'ease-in-out');
path_b.animate({
path: "M107.4,40.5c13.7-8,48.2-7.1,48.5-4.6c0.3,1.8,0.2,3.6,0.1,5.4 c-0.2,3.2-0.4,6.4-0.5,9.6c-0.1,1.3-0.2,2.6-1,3.6c-1,1.2-2.8,1.4-4.4,1.7c-2.3,0.4-23.9,4.1-32.6,3.9c-3.9-0.1-8.1-0.3-11.2-2.7 c1.5-5-1.8-10.7,0.2-15.6C107,40.6,107.4,40.5,107.4,40.5z"
},500, 'ease-in-out');
path_c.animate({
path: "M169.9,56.2c-1.1,0-2.1-0.9-2.9-1.8c-2-2.2-11.1-0.7-11.1-7.4 c-1.4-3.1-5.6-0.2-7.9-2.2c-0.2-0.2-0.5-0.4-0.4-0.8c0-0.2,0.2-0.4,0.3-0.6c1.5-1.8,2.9-3.6,4.4-5.3c0.4-0.5,0.9-1.1,1.4-1.4 c1-0.6,2.2-0.4,3.3-0.1c2.3,0.5,4.7,1,7,1.5c4.5,1,2.4,0.3,6.9-0.7c0.7-0.2,1.4-0.4,2.2-0.4c0.6,0,1.2,0.1,1.8,0.1 c4.9,0.7,9.9,1.5,14.8,2.2c0.3,0,0.6,0.1,0.7,0.5c0.1,0.2,0,0.4-0.1,0.6c-0.6,2.1-1.2,4.2-1.7,6.3c-2.8-0.2-8.6-2-10-2.1 c-0.8,2-1.6,7.2-6.5,10.6C171.5,55.7,170.8,56.2,169.9,56.2z"
},500, 'ease-in-out');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment