raphael customattributes.elliptical.arc

gistfile1.js

var paper = Raphael(0, 0, 800, 800);

paper.customAttributes.ellipticalArc = function(xloc, yloc, value, total, xR, yR) {
	var alpha = 360 / total * value,
		a = (90 - alpha) * Math.PI / 180,
		x = xloc + xR * Math.cos(a),
		y = yloc - yR * Math.sin(a),
		path;

	if (total === value) {
		path = [
			['M', xloc, yloc - yR],
			['A', xR, yR, 0, 1, 1, xloc - 0.01, yloc - yR]
		]
	} else {
		path = [
			['M', xloc, yloc - yR],
			['A', xR, yR, 0, +(alpha > 180), 1, x, y]
		]
	}

	return { path: path };
};


var elArc = paper.path().attr({
	'stroke': '#000',
	'stroke-width': 3,
	ellipticalArc: [100, 300, 0, 100, 60, 40]
});

elArc.animate({
	ellipticalArc: [100, 300, 95, 100, 60, 40],
	'stroke-opacity': 0.2
}, 1500, 'bounce');