doomspork · November 16, 2011 23:26 · djugudju · Apr 8, 2015
diff --git a/atom.js b/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>