Animation Drawing Ellipse

Nifty.

by XcsN

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<div id="canvas"></div>

CSS

#canvas {
    position:relative;
    top:50px;
    width:100px;
    height:100px;
}

JavaScript

$(function () {
    var canvasWidth = $("#canvas").width();
    var canvasHeight = $("#canvas").height();
    var r = canvasWidth / 26;
    var h = canvasHeight / 2;
    var paper = Raphael("canvas", canvasWidth, canvasHeight);
    paper.customAttributes.anim = function (xloc, yloc, value, total, Rx, Ry, t) {
        var alpha = 360 / total * value,
            a = (90 - alpha) * Math.PI / 180,
            x = xloc + Rx * Math.cos(a),
            y = yloc - Ry * Math.sin(a),
            path;
        if (total == value) {
            path = [
                ["M", xloc, yloc - Ry],
                ["A", Rx, Ry, t, 1, 1, xloc - 0.01, yloc - Ry]
            ];
        } else {
            path = [
                ["M", xloc, yloc - Ry],
                ["A", Rx, Ry, t, +(alpha > 180), 1, x, y]
            ];
        }
        return {
            path: path
        };
    };

    c = paper.path().attr({
        "stroke": "#cbc",
            "stroke-width": 3,
        anim: [10 * r, h, 0, 100, r, 2 * r, -30]
    });
    c.animate({
        anim: [10 * r, h, 100, 100, r, 2 * r, -30]
    }, 2500, "ease-in-out", function () {});
});