Comme des bêtes - Ribbons animation 2

cdb-ribbons2.js

// script start here
var canvas  = document.getElementById('canvas'),
    source  = document.createElement('canvas'),
    width   = window.innerWidth, 
    height  = window.innerHeight,
    
    context = canvas.getContext('2d'),
    path1x  = 0.0,
    path2x  = -0.1;


function init(){
  
  resize();
  
  window.addEventListener('resize', resize);
  window.requestAnimationFrame( render );
};
function drawRibbon(){
  
  var c = source.getContext('2d');
  
  c.lineWidth = 3;
  c.shadowBlur = 8;
  c.shadowColor = '#D00204';
  c.strokeStyle = '#D00204';
  c.save();
  
  c.beginPath();
  c.moveTo( width * -0.2, height * 0.5 );
  c.quadraticCurveTo( width * (( -0.2 + 0.5 ) * 0.5), Math.sin(360) * 375.0 + height * 0.5, width * 0.5, height * 0.5 );
  c.quadraticCurveTo( width * (( 1.0 + 0.2 - 0.5 ) * 0.5 + 0.5), Math.sin(-360) * 375.0 + height * 0.5, width * 0.2 + width, height * 0.5 );
  c.stroke();
  c.closePath();
};
function resize(){
  
  width = window.innerWidth;
  height = window.innerHeight;
  
  source.width = width;
  source.height = height;
  
  canvas.width = width;
  canvas.height = height;
  
  drawRibbon();
};
function render(){
  
  context.save();
  context.clearRect(0,0,width,height);
  if( path1x > 0.0 ) context.drawImage(source, 0, 0, width * path1x, height, 0, 0, width * path1x, height);
  context.scale(1.0, -1.0);
  if( path2x > 0.0 ) context.drawImage(source, 0, 0, width * path2x, height, 0, 0, width * path2x, -height);
  context.restore();
  
  if( path1x < 1.0 ) path1x += 0.01;
  path2x += 0.01;
  
  if( path2x > 1.5 )
  {
    path1x = 0.0;
    path2x = -0.1;
  };
  
  window.requestAnimationFrame( render );
};

init();