Uses hierarchical canvas transforms to make an articulated form

shrimpy.js

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;


var canvas = document.getElementById('bb');
var cc = canvas.getContext('2d');
var swing = 0;
var swinger = -0.008;
var armswing = 0;
var armswinger = -0.007;
var px = 350;
requestAnimationFrame(ani);

function sway(){
  swing+=swinger;
  if (swing>0.1) swinger *=-1;
  else if (swing<-0.1) swinger *= -1;
  return swing;
}

function armsway(){
  armswing+=armswinger;
  if (armswing>0.15) armswinger *=-1;
  else if (armswing<-0.15) armswinger *= -1;
  return armswing;
}

cc.fillStyle= "grey";
cc.lineWidth= 1;
function ani(){
  cc.clearRect(0,0,400,800);
  cc.translate(px,150);
  cc.rotate((armsway()+0.5)*Math.PI);
  drawjoint(0,1.5,50);
  drawjoint(0,1.,50);
  drawjoint(sway(),0.8,50);
  drawjoint(swing*1.1,0.6,50);
  drawjoint(swing*1.5,0.4,50);
  drawjoint(swing*2,0.2,50);
  drawjoint(swing*2.5,0.2,50);
  drawjoint(swing*3,0.05,50);
  cc.setTransform(1,0,0,1,0,0);
  requestAnimationFrame(ani);
}

function drawjoint(rot,x,y){
  cc.beginPath();
  cc.moveTo(-50,0);
  cc.lineTo(50,0);
  cc.translate(0,y);
  cc.rotate(rot*Math.PI);
  cc.scale(x,1);
  cc.lineTo(50,0);
  cc.lineTo(-50,0);
  cc.closePath();
  cc.fill();
  cc.stroke();
}