Raphaël Cloudify

RaphaelCloudify.js

var r = Raphael('paper', '100%', '100%');

(function() {

    var sqrPath = 'm 243.61922,98.75478 107.626,0 0,107.626 -107.626,0 z',
        cloudPath = 'm 302.17809,223.8072 13.72883,0 c 4.51939,0 8.15773,3.67135 8.15773,8.23189 l 0,13.66383 c 0,4.56054 -3.63834,8.23189 -8.15773,8.23189 l -13.72883,0 c -4.51937,0 -8.15773,-3.67135 -8.15773,-8.23189 l 0,-13.66383 c 0,-4.56054 3.63836,-8.23189 8.15773,-8.23189 z m 26.36508,-27.49638 34.64778,-0.46833 c 43.25696,-1.57815 68.58218,-13.35679 69.76376,-44.48002 0.72952,-24.91593 -16.4273,-44.28055 -42.60739,-45.88465 1.40646,-24.210289 -25.70685,-57.583564 -68.35914,-57.590239 -34.07617,-0.352266 -53.69215,13.394252 -65.08164,33.243122 -4.7168,-4.398871 -12.61497,-7.925235 -22.00602,-8.427676 -22.24366,0.575861 -34.50843,13.511055 -34.17958,34.179403 -33.75664,1.50957 -41.84711,25.28379 -41.20276,41.67081 0.30108,20.31268 14.28596,39.30247 40.96868,44.94836 13.7163,3.02541 36.12169,3.82857 52.20577,3.74551 l 38.39346,0 c 4.6263,-0.61702 6.43167,-4.35919 6.08679,-8.42767 l 0,-34.17941 -24.81529,0 36.2865,-36.28633 36.05242,36.05235 -24.11298,0 0,35.34967 c 0.36302,4.81603 3.26839,6.587 7.95964,6.5551 z';

    var el = r.path(sqrPath).attr({
            fill: '#fff',
            stroke: '#fff',
            'stroke-width': 5,
            'fill-opacity': 0.2
        }),
        elAnimAttrs = [
            {path: cloudPath},
            {path: sqrPath}
        ],
        now = 1;

    el.click(function() {
        this.stop().animate(elAnimAttrs[+(now = !now)], 1000);
    });

    el.node.style.cursor = 'pointer';

})();​