kineticjs1

var stage = new Kinetic.Stage({
  container: 'kinetic',
  width: 800,
  height: 200
});

var layer = new Kinetic.Layer();

var yellowRainJacket = new Kinetic.Group({});

var yellowRainJacketHood = new Kinetic.Shape({
  sceneFunc: function(context) {
    context.beginPath();          
    context.moveTo(40, 50);
    context.quadraticCurveTo(60, 10, 80, 50);
    context.closePath();
    context.fillStrokeShape(this);
  },
  fill: '#FBB917',
  stroke: '#FFD801',
  strokeWidth: 4
});

 var yellowRainJacketBody = new Kinetic.Rect({
   x: 38,
   y: 52,
   width: 44,
   height: 40,
   fill: '#FFD801',
 });
 var yellowRainJacketLeftArm = new Kinetic.Rect({
   x: 38,
   y: 51,
   width: 15,
   height: 30,
   rotation: 45,
   fill: '#FFD801',
 });
 
 var yellowRainJacketRightArm = new Kinetic.Rect({
   x: 104,
   y: 72,
   width: 15,
   height: 30,
   rotation: 135,
   fill: '#FFD801',
 });
 
 var yellowRainJacketZipper = new Kinetic.Line({
   points: [60, 52, 60, 90],
   stroke: 'white',
   strokeWidth: 2,
   lineCap: 'round',
   lineJoin: 'round'
 });
 

 yellowRainJacket.add(yellowRainJacketHood);
 yellowRainJacket.add(yellowRainJacketBody);
 yellowRainJacket.add(yellowRainJacketLeftArm);
 yellowRainJacket.add(yellowRainJacketRightArm);
 yellowRainJacket.add(yellowRainJacketZipper);

 layer.add(yellowRainJacket);

 stage.add(layer);</pre><h4>Yellow Rain Jacket Animated</h4><pre id="rain-jacket-animation"> var amplitude = stage.width() / 2;
 var centerX = stage.width() / 2;

 var speed = .4;

 var jacketAnimation = new Kinetic.Animation(function(frame) {
   yellowRainJacket.setX(amplitude * Math.sin(frame.time * speed * Math.PI / 2000) + centerX);
   yellowRainJacket.setY(150 * Math.cos(frame.time * speed * Math.PI / 2000) - 100);         
 }, layer);

 jacketAnimation.start();