A CodePen by [rb]. angle swipe test 2 - test for a client project - requires full screen stretchy image with angle swipe ability. turns out dam easy with Raphael.

index.html

<div id="stage">
<div id="container"></div>
  
  <a href="#">toggle animate</a>
</div>

script.js

var width = 400,
    height = 300,
    ratio = height / width;

var paper = Raphael('container',width,height);

paper.setViewBox(0,0,width,height);

var $stage = $('#stage'),
    $container = $('#container'),
    $SVG = $('svg',$container).attr('width','100%').attr('height','100%');

var path = paper.path('M0 0L300 0L100 300L0 300L0 0');

path.attr('fill','url(http://placekitten.com/400/300)');

setSize = function()
{
  var availWidth = $stage.width(),
      availHeight = $(window).height(),
      targetWidth = availWidth,
      targetHeight = availWidth * ratio;
  
  if(targetHeight < availHeight) {
    targetHeight = availHeight;
    targetWidth = targetHeight / ratio;
  }
  
  $container.width(targetWidth).height(targetHeight);
}

setSize();
$(window).on('resize',setSize);

$('a').click(function(){
  if($(this).hasClass('animated')){
    path.animate({
       path: 'M0 0L300 0L100 300L0 300L0 0'   
    },500);
    $(this).removeClass('animated');
  }else{
    path.animate({
       path: 'M0 0L350 0L150 300L0 300L0 0'   
    },500);  
$(this).addClass('animated')    
  }
});

style.css

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#stage {
  position: relative;
  overflow: hidden;
  min-height: 100%;
}
#container {
  background: red;
}

a {
  position: absolute;
  top: 1em;
  right: 1em;
}

This is just for personal record of simple unit tests to work out which way to go on a real project.

In the final I precompiled the path strings for target animation endpoints and simply animated the path and other properties with .animate (of Raphael), worked out easy than I expected.