This example shows how you can make simple animation using dg.js. In animate() function in order to make one of points to "go" faster, multiply t by some factor. For example x1 = Math.cos(t * 2) * 2; y1 = Math.sin(t * 2) * 2;

dg.js example code

		var canvas = dg.Canvas("testcanvas", { border: "1px solid #ccc"});
		var axes = dg.Axes([canvas.width() / 4, canvas.height() / 1.5]).hide(false);
		
		var p0 = dg.Point([0,0]).label("O");
		var p1 = dg.Point([2,0]).label("P");
		var c0 = dg.Circle(p0, p1);
		
		var p2 = dg.Point([2, 3]).label("O1");
		var p3 = dg.Point([3, 4]).label("Q");
		var c1 = dg.Circle(p2, p3);
		
		var p4 = dg.Point([5, 1]).label("O2");
		var p5 = dg.Point([8, 1]).label("R");
		var c2 = dg.Circle(p4, p5).color(dg.color.rand());
		
		dg.Polygon([p1, p3, p5]).color("rgba(0, 200, 0, 0.2)").stroke("rgba(0, 200, 0)");
		
		var interval = setInterval(animate, 30);
		var t = -Math.PI;
		var step = 0.01;
		function animate() {
			var x1 = Math.cos(t) * 2;
			var y1 = Math.sin(t) * 2;
			var x2 = Math.cos(t) * Math.sqrt(2) + p2.x();
			var y2 = Math.sin(t) * Math.sqrt(2) + p2.y();
			var x3 = Math.cos(t) * 3 + p4.x();
			var y3 = Math.sin(t) * 3 + p4.y();
			
			p1.setX(x1).setY(y1);
			p3.setX(x2).setY(y2);
			p5.setX(x3).setY(y3);
			
			t += step;
		}