SVG Shape Animation

SVG Shape Animation with Raphael js.

by Shishir Morshed

HTML

<div id="myCanvas"></div>

JavaScript

var paper = Raphael(document.getElementById('myCanvas'),500,300);

var d = "M0 0 L0 300 L300 300 L350 0 Z";
var mark = paper.path(d);
mark.attr("fill", "url(http://shishirmorshed.github.io/cloud-resources/images/external/ghashful.jpg)");

mark.hover(function() {
    mark.animate({
        path: ("M0 0 L0 300 L400 300 L450 0 Z")
    }, 500);
  },
  function() {
    mark.animate({
        path: ("M0 0 L0 300 L300 300 L350 0 Z")
    }, 500);
  });