$(document).click(function(){ 
  // clear out the old junk
  $('#drawing').html('');
  
  // use svg.js to make a new thing!
  var draw = SVG('drawing').size('100%', '100%'),
      step = 40,
      signature = draw.path('M 50 200').stroke({width: 3}).fill('none');

  // you don't have to do this in a setInterval, but it makes
  // the signature look "drawy"
  var iterator = setInterval(function() {
    signature.plot(signature.array.value.concat([[' c', 
      Math.floor(Math.random()*100), // first control X
      Math.floor(Math.random()*-100), // first control Y
      Math.floor(Math.random()*200), // second control X
      Math.floor(Math.random()*-200), // second control Y
      Math.floor(Math.random()*10) * step * (Math.random()*1 > 0.2 ? 1 : -1), // final point X
      Math.floor(Math.random()*2) * (Math.random()*1 > 0.5 ? 1 : -1) // final point Y
     ]]));

    // either reduce the iterator or clear the interval
    step > 0 ? step--: clearInterval(iterator);
  },0);
});