SVG

Raphael

 * http://dmitry.baranovskiy.com/
 * http://raphaeljs.com/graffle.html
 * http://raphaeljs.com/curver.html
 * https://github.com/mephraim/raphael.draggable
 * http://www.mattephraim.com/blog/2009/10/31/draggability-for-the-raphael-library/
 * http://groups.google.com/group/raphaeljs/msg/f23a3e089f9cdf8a
 * http://www.irunmywebsite.com/
 * http://2hats.net/_box/raphael/drag.html
 * http://www.irunmywebsite.com/raphael/additionalhelp.php

SVG
$(function { var paper = Raphael(document.getElementById('canvas'), 640, 480); var star = paper.circle(320, 240, 10); var planet = paper.circle(320, 150, 5); var starVelocity = [0,0]; var planetVelocity = [20.42,0]; var starMass = 3.08e22; var planetMass = 3.303e26; var gravConstant = 1.034e-18; function calculateOrbit {   var accx = 0;    var accy = 0;    accx = (gravConstant * starMass * ((star.attr('cx') - planet.attr('cx')))) / (Math.pow(circleDistance, 3));    accy = (gravConstant * starMass * ((star.attr('cy') - planet.attr('cy')))) / (Math.pow(circleDistance, 3));    planetVelocity[0] += accx;    planetVelocity[1] += accy;    planet.animate({cx: planet.attr('cx') + planetVelocity[0], cy: planet.attr('cy') + planetVelocity[1]}, 150);    paper.circle(planet.attr('cx'), planet.attr('cy'), 1); // added to 'trace' orbit } function circleDistance {    return (Math.sqrt(Math.pow(star.attr('cx') - planet.attr('cx'), 2) + Math.pow(star.attr('cy') - planet.attr('cy'), 2))); } setInterval(calculateOrbit, 150); }); function drawcircle(div, text) {     var paper = Raphael(div, 26, 26); //<<    var circle = paper.circle(13, 13, 10.5);    circle.attr("stroke", "#f1f1f1");    circle.attr("stroke-width", 2);    var text = paper.text(12, 13, text); //<<    text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});    text.attr("fill", "#f1f1f1"); }
 * http://www.w3schools.com/svg/svg_examples.asp
 * http://www.w3.org/TR/SVG/
 * http://stackoverflow.com/questions/3407333/drawing-over-an-image-using-raphael-js
 * http://www.boogdesign.com/examples/svg/image.html
 * http://stackoverflow.com/questions/3548379/what-are-the-pros-and-cons-of-html5-canvas-vs-svg-raphael-js
 * http://en.wikipedia.org/wiki/Scene_graph
 * http://stackoverflow.com/questions/2733613/why-does-raphaels-framerate-slow-down-on-this-code
 * http://stackoverflow.com/questions/2547927/raphael-js-text-positioning-centering-text-in-a-circle

window.onload = function { drawcircle("c1", "1"); drawcircle("c2", "2"); drawcircle("c3", "3"); }; function Line(startX, startY, endX, endY, raphael) { var start = { x: startX, y: startY };   var end = { x: endX, y: endY };   var getPath = function { return "M" + start.x + " " + start.y + " L" + end.x + " " + end.y;   }; var redraw = function { node.attr("path", getPath); }
 * http://stackoverflow.com/questions/2738643/positioning-svg-elements
 * http://stackoverflow.com/questions/3582344/draw-a-connection-line-in-raphaeljs

var node = raphael.path(getPath); return { updateStart: function(x, y) { start.x = x;           start.y = y;            redraw; return this; },       updateEnd: function(x, y) { end.x = x;           end.y = y;            redraw; return this; }   }; };

$(document).ready(function {   var paper = Raphael("raphaelContainer",0, 0, 300, 400);    $("#raphaelContainer").mousedown(

function(e) { x = e.offsetX; y = e.offsetY; line = Line(x, y, x, y, paper); $("#raphaelContainer").bind('mousemove', function(e) {           x = e.offsetX;            y = e.offsetY;            line.updateEnd(x, y);        }); });

$("#raphaelContainer").mouseup(

function(e) { $("#raphaelContainer").unbind('mousemove'); }); });
 * http://jsfiddle.net/rRtAq/2039/
 * http://www.warfuric.com/taitems/RaphaelJS/arrow_test.htm
 * http://taitems.tumblr.com/post/549973287/drawing-arrows-in-raphaeljs
 * http://stackoverflow.com/questions/3913362/what-does-fn-mean-when-used-in-raphael
 * http://groups.google.com/group/raphaeljs/browse_thread/thread/ebda41bd37045fa8
 * http://taitems.tumblr.com/