Raphaël Course Dale

by Brian Blakely

HTML

<div id="example"></div>

CSS

div {
    width:300px;
    height:300px;
    margin:20px 0 0 20px;
}

JavaScript

var paper = Raphael(document.getElementById('example'));
var image = paper.image('http://4.bp.blogspot.com/-a_80OBOEUNc/ThW78KciBJI/AAAAAAAABmA/S0L9DSL1oPY/s1600/penelope-cruz%252B%2525283%252529.jpg',10,10,100,68);
paper.path('M4.998,12.127v7.896h4.495l6.729,5.526l0.004-18.948l-6.73,5.526H4.998z M18.806,11.219c-0.393-0.389-1.024-0.389-1.415,0.002c-0.39,0.391-0.39,1.024,0.002,1.416v-0.002c0.863,0.864,1.395,2.049,1.395,3.366c0,1.316-0.531,2.497-1.393,3.361c-0.394,0.389-0.394,1.022-0.002,1.415c0.195,0.195,0.451,0.293,0.707,0.293c0.257,0,0.513-0.098,0.708-0.293c1.222-1.22,1.98-2.915,1.979-4.776C20.788,14.136,20.027,12.439,18.806,11.219z M21.101,8.925c-0.393-0.391-1.024-0.391-1.413,0c-0.392,0.391-0.392,1.025,0,1.414c1.45,1.451,2.344,3.447,2.344,5.661c0,2.212-0.894,4.207-2.342,5.659c-0.392,0.39-0.392,1.023,0,1.414c0.195,0.195,0.451,0.293,0.708,0.293c0.256,0,0.512-0.098,0.707-0.293c1.808-1.809,2.929-4.315,2.927-7.073C24.033,13.24,22.912,10.732,21.101,8.925z M23.28,6.746c-0.393-0.391-1.025-0.389-1.414,0.002c-0.391,0.389-0.391,1.023,0.002,1.413h-0.002c2.009,2.009,3.248,4.773,3.248,7.839c0,3.063-1.239,5.828-3.246,7.838c-0.391,0.39-0.391,1.023,0.002,1.415c0.194,0.194,0.45,0.291,0.706,0.291s0.513-0.098,0.708-0.293c2.363-2.366,3.831-5.643,3.829-9.251C27.115,12.389,25.647,9.111,23.28,6.746z').attr({ transform: 't-100,0' });

var animDuration = 2000,
    animDelay = 1000,
    anim =
    Raphael.animation({        
    x:100,
    y:100,
    transform:'s0.1t100,100'    
    }, animDuration, 'bounce');

//image.animate(anim.repeat(Infinity).delay(animDelay));

(function repeatAnim(){
    image.attr({x:10,
                y:10,
                transform:''});
    image.animate(anim);
    setTimeout(repeatAnim, animDuration+animDelay)
})();