Skip to content

Instantly share code, notes, and snippets.

@omniosi

omniosi/jsbin.ciweb.html

Created March 14, 2014 20:27
Show Gist options
  • Save omniosi/9556084 to your computer and use it in GitHub Desktop.
Save omniosi/9556084 to your computer and use it in GitHub Desktop.
Download ZIP
using RaphaelJS to animate a circle path into a custom shape path. inlcudes a function to convert a RaphaelJS circle shape to a path (a cleaned up version of this code: https://groups.google.com/forum/#!topic/raphaeljs/6gH8TiOWlAw)
Raw
jsbin.ciweb.html
<!DOCTYPE html>
<html>
<head>
<style>
#box{
width:300px;
height:250px;
background: lightblue;
border:1px solid black;
}
</style>
<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 id="shape></div>-->
</div>
</body>
</html>
Raw
jsbin.ciweb.js
Raphael(function(){
var paper = new Raphael('box', 300, 250);
//var shape = paper.circle(150, 125, 55);
var str = getCircleToPath(150, 125, 55);
//console.log(str);
function getCircleToPath(x, y, r){ //x and y are center, r is radius
var s = 'M ' +
x + ',' + (y-r)+
' A ' + r + ',' + r +
' 45 1,1 ' +
(x-0.1) + ',' + (y-r) +
' z';
//console.log(s);
return s;
}
//var shape = paper.path("M 150,70 A 55,55 45 1,1 149.9,70 z");
var shape = paper.path(str);
shape.attr({
'stroke-width': 1,
'stroke-opacity': 1,
stroke: 'black',
fill: '#000000'
}).data('id', 'shape');
shape.mouseover(function(){
shape.animate({
path: "M55,129.8c0-8.1,40.3-9.7,42.7-17c2.5-7.6-29.1-32.6-24.5-38.8c4.6-6.4,38.2,16,44.5,11.3c6.3-4.6-4.6-43.4,3-45.9 c7.3-2.4,21.3,35.4,29.4,35.4c8.1,0,22.1-37.7,29.4-35.4c7.6,2.5-3.3,41.3,3,45.9c6.4,4.6,39.9-17.7,44.5-11.3 c4.6,6.3-27,31.3-24.5,38.8c2.4,7.3,42.7,8.9,42.7,17c0,8.1-40.3,9.7-42.7,17c-2.5,7.6,29.1,32.6,24.5,38.8 c-4.6,6.4-38.2-16-44.5-11.3c-6.3,4.6,4.6,43.4-3,45.9c-7.3,2.4-21.3-35.4-29.4-35.4c-8.1,0-22.1,37.7-29.4,35.4 c-7.6-2.5,3.3-41.3-3-45.9c-6.4-4.6-39.9,17.7-44.5,11.3c-4.6-6.3,27-31.3,24.5-38.8C95.3,139.5,55,137.8,55,129.8z"
}, 500, 'bounce');
});
shape.mouseout(function(){
shape.animate({
//path: "M 150,70 A 55,55 45 1,1 149.9,70 z"
path: str
}, 500, 'bounce');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment