An Introduction to the Raphael JS Library

http://code.tutsplus.com/tutorials/an-introduction-to-the-raphael-js-library--net-7186

by Avinashullal

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<div id="canvas_container"></div>

CSS

#canvas_container {
    width: 500px;
    height:400px;
    border: 1px solid #aaa;
}

JavaScript

$(document).ready(function () {
     var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
     var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");

     tetronimo.attr({
         gradient: '90-#526c7a-#64a0c1',
         stroke: '#3b4449',
             'stroke-width': 10,
             'stroke-linejoin': 'round',
     });

     tetronimo.animate({
         rotation: 360,
             'stroke-width': 1
     }, 2000, 'bounce', function () {
         /* callback after original animation finishes */
         this.animate({
             stroke: '#0d7963',
                 'stroke-width': 10
         }, 1000);
     });
 });