doomspork/atom.js

## atom.js
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>raphael</title>
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>
<style media="screen">
    body {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #canvas {
        background: gray;
        height: 480px;
        margin: 0 auto;
        text-align: left;
        width: 640px;
    }
</style>
<script>
window.onload = function () {

    var paper = Raphael("canvas", 640, 480);
    paper.customAttributes.step = function (s) {
      var len = this.orbit.getTotalLength();
      var point = this.orbit.getPointAtLength(s * len);
      return {
        transform: "t" + [point.x, point.y] + "r" + point.alpha
      };
    };

    var middle = paper.path("M325,105 a45,15 90 0,0 50,0 a45,15 90 0,0 -50,0");
    var right = paper.path("M350,80 a45,15 25 0,0 0,55 a45,15 25 0,0 0,-55");
    var left = paper.path("M350,80 a45,15 -25 0,0 0,55 a45,15 -25 0,0 0,-55");


    function atom(r, o, s) {
      var a = r.ellipse(0, 0, 6, 6).attr({stroke: "#000", fill: "#fff"});
      a.orbit = o;
      a.attr({step: 0});

      function run() {
        a.animate({step: 1}, s, function () {
          a.attr({step: 0});
          setTimeout(run);
        });
      }
      run();
      return a;
    }

    atom(paper, middle, 2000);
    atom(paper, left, 2000);
    atom(paper, right, 2000);
};
</script>
</head>
<body>
  <div id="canvas"></div>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8"/>
	<title>raphael</title>
	<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>
	<style media="screen">
	body {
	margin: 0;
	padding: 0;
	text-align: center;
	}
	#canvas {
	background: gray;
	height: 480px;
	margin: 0 auto;
	text-align: left;
	width: 640px;
	}
	</style>
	<script>
	window.onload = function () {

	var paper = Raphael("canvas", 640, 480);
	paper.customAttributes.step = function (s) {
	var len = this.orbit.getTotalLength();
	var point = this.orbit.getPointAtLength(s * len);
	return {
	transform: "t" + [point.x, point.y] + "r" + point.alpha
	};
	};

	var middle = paper.path("M325,105 a45,15 90 0,0 50,0 a45,15 90 0,0 -50,0");
	var right = paper.path("M350,80 a45,15 25 0,0 0,55 a45,15 25 0,0 0,-55");
	var left = paper.path("M350,80 a45,15 -25 0,0 0,55 a45,15 -25 0,0 0,-55");


	function atom(r, o, s) {
	var a = r.ellipse(0, 0, 6, 6).attr({stroke: "#000", fill: "#fff"});
	a.orbit = o;
	a.attr({step: 0});

	function run() {
	a.animate({step: 1}, s, function () {
	a.attr({step: 0});
	setTimeout(run);
	});
	}
	run();
	return a;
	}

	atom(paper, middle, 2000);
	atom(paper, left, 2000);
	atom(paper, right, 2000);
	};
	</script>
	</head>
	<body>
	<div id="canvas"></div>
	</body>
	</html>