Raphael Sandbox

For playing with Raphael

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id='container'>
</div>

CSS

#container {
    padding: 5px;
    border: 1px solid;
    position: relative;
    width: 600px;
    height: 400px;
    background-color: gray;
}

JavaScript

var m_paper = new Raphael($('#container')[0]);

// Creates circle at x = 50, y = 40, with radius 10
var m_circle = m_paper.circle(100, 40, 10);
let test = m_paper.path('M0,10l0,10')
test.attr("stroke", "#000")
test.attr("fill", "#000")
// Sets the stroke attribute of the circle to white
m_circle.attr("stroke", "#fff");
// Sets the fill attribute of the circle.
m_circle.attr("fill", "#0f0");

// Perform shaking animation.
shake(m_circle, '#f00');

function shake(rEl, tempColor) {
    var DURATION = 80; // ms.
    var PASSES = 2;
    var SHAKE_WIDTH = 4; // px.
    var pass = 1;    
    var prevColor = rEl.attr('fill');
    var done = function () {
        if (pass < PASSES) { ++pass; performAnim(); return; }
        rEl.attr('fill', prevColor);
    }
    var animBack = Raphael.animation({
        transform: 't-' + SHAKE_WIDTH + ',0'
    }, DURATION, "elastic")
    var animForth = Raphael.animation({
        transform: 't' + SHAKE_WIDTH + ',0'
    }, DURATION, "elastic")
    var animRestore = Raphael.animation({
        transform: ''
    }, DURATION, "elastic", done)
    var performAnim = function () {
        rEl.animate(animBack).animate(animForth.delay(DURATION)).animate(animRestore.delay(2*DURATION));
    }
    rEl.attr('fill', tempColor);
    performAnim();
}