Raphael / Jquery fiddling...

by lollero

HTML

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

CSS

html { background: #222 }

#canvas {
    cursor: pointer;
    width: 45px;
    height: 35px;
}

JavaScript

$(function(){
    
    var paper = Raphael("canvas"), // The making of canvas
        path = paper.path("M 0,0 11.11,6.415 0,12.829 z"); // Path...
    
    // Options
    // [0] = stationary value
    // [1] = animation value
    var o = {
        color: [ '#fff', '#00aeef' ],
        moveX: [ 10, 33 ],
        rotate: [ 0 , 90 ]
    };
    
    path
        // Path styling
        .attr({ 
            fill: o.color[0], 
            'stroke-width': '0'
        })
        // Path position
        .translate( o.moveX[0], 10 );
    
    // Jquery canvas animation
    $('#canvas').on("mouseenter mouseleave", function( e ) {

        var ani = {};
            
        if ( e.type === 'mouseenter' ) {
        
            ani.fill = o.color[1],
            ani.transform = "t" + [ o.moveX[1], o.moveX[0]  ] + 
                            "r" + ( o.rotate[1] );
            
        }
        else {
            
            ani.fill = o.color[0],
            ani.transform = "t" + [ o.moveX[0], o.moveX[0] ] + 
                            "r" + ( o.rotate[0] );

        }
            
        // Animate raphael path
        path.stop().animate( ani, 200);
        
    });

});