Skip to content

Instantly share code, notes, and snippets.

@omniosi

omniosi/jsbin.xamak.html

Created March 3, 2014 20:38
Show Gist options
  • Save omniosi/9334180 to your computer and use it in GitHub Desktop.
Save omniosi/9334180 to your computer and use it in GitHub Desktop.
Download ZIP
updated RaphaelJS interactive arm animation
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 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: 'rgba(0,0,0,0.35)',
gradient: '90-#000-#999',
opacity:1,
stroke: '#000000',
'stroke-miterlimit': 10,
'stroke-linejoin':'round',
'stroke-width': 1,
'stroke-opacity': 0.35
}).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: 'rgba(0,0,0,0.35)',
gradient: '90-#000-#999',
opacity:1,
stroke: '#000000',
'stroke-miterlimit': 10,
'stroke-linejoin':'round',
'stroke-width': 1,
'stroke-opacity': 0.35
}).data('id', 'path_b').toBack();
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: 'rgba(0,0,0,0.35)',
gradient: '90-#999-#eee',
opacity:1,
stroke: '#999',
"stroke-miterlimit": 10,
'stroke-linejoin':'round',
'stroke-width': 1,
'stroke-opacity': 0.35
}).data('id', 'path_c').toBack();
var arm = rsr.set();
arm.push(path_a,path_b,path_c);
arm.mouseover(function(){
// arm.animate({transform: 't0,0r45'}, 200, 'ease-in-out');
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');
});
arm.mouseout(function(){
// arm.animate({transform: ''}, 200, 'ease-in-out');
path_a.animate({
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"
},500,'ease-in-out');
path_b.animate({
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"
},500,'ease-in-out');
path_c.animate({
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"
},500,'ease-in-out');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment