Skip to content

Instantly share code, notes, and snippets.

@rampion

rampion/animation.html

Created November 19, 2011 15:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rampion/1378950 to your computer and use it in GitHub Desktop.
Save rampion/1378950 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
animation.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
jQuery(function($){
var draw = function(shape){
var a = 50;
var b = a*shape[0];
var c = a*shape[1];
var d = a*shape[2];
var e = a*shape[3];
var f = a*shape[4];
return [
'M', a, 0,
'C', b, c, ',', d, e, ',', f, f,
'C', e, d, ',', c, b, ',', 0, a,
'C', -c, b, ',', -e, d, ',', -f, f,
'C', -d, e, ',', -b, c, ',', -a, 0,
'C', -b, -c, ',', -d, -e, ',', -f, -f,
'C', -e, -d, ',', -c, -b, ',', 0, -a,
'C', c, -b, ',', e, -d, ',', f, -f,
'C', d, -e, ',', b, -c, ',', a, 0,
].join(' ');
};
diamond = [ 5/6, 1/6, 2/3, 1/3, 1/2 ];
circle = [ 1, Math.PI/12, (2 + 1/Math.sqrt(2))/3, Math.PI/6, 1/Math.sqrt(2) ];
$('#diamond').attr({ d: draw(diamond) });
$('#circle' ).attr({ d: draw(circle) });
$('#animation').attr({ d: draw(diamond) });
$('#d2c').attr({ from: draw(diamond) });
$('#d2c').attr({ to: draw(circle) });
$('#c2d').attr({ from: draw(circle) });
$('#c2d').attr({ to: draw(diamond) });
});
</script>
</head>
<body>
<svg width="400" height="400">
<g transform="translate(100,100)">
<path id=diamond fill="blue" stroke="black"/>
</g>
<g transform="translate(300,100)">
<path id=circle fill="red" stroke="black"/>
</g>
<g transform="translate(200,300)">
<path id=animation fill="green" stroke="black">
<animate id=d2c attributeName="d" attributeType="XML" begin="0;c2d.end" dur="3s" fill="freeze" />
<animate id=c2d attributeName="d" attributeType="XML" begin="d2c.end" dur="3s" fill="freeze" />
</path>
</g>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment