<div id="draw-animation"></div>

body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
}

var elem = document.getElementById('draw-animation');
var two = new Two({ fullscreen: true }).appendTo(elem);

var styles = {
  size: 18,
  family: 'Lato'
} 

var gradLinA = two.makeLinearGradient(
  -100,
  50,
  100,
  -50,
  new Two.Stop(0, "red", 1),
  new Two.Stop(1, "orange", 1),
);

var gradLinB = two.makeLinearGradient(
  -100,
  -50,
  100,
  50,
  new Two.Stop(0.5, "red", 1),
  new Two.Stop(0.5, "orange", 1),
);

var gradLinC = two.makeLinearGradient(
  100,
  -50,
  -100,
  50,
  new Two.Stop(0.14, "violet", 1),
  new Two.Stop(0.28, "indigo", 1),
  new Two.Stop(0.42, "blue", 1),
  new Two.Stop(0.56, "green", 1),
  new Two.Stop(0.70, "yellow", 1),
  new Two.Stop(0.84, "orange", 1),
  new Two.Stop(0.98, "red", 1)
);

var gradRadA = two.makeRadialGradient(
  0,
  0,
  100,
  new Two.Stop(0, "red", 1),
  new Two.Stop(1, "black", 1),
);

var gradRadB = two.makeRadialGradient(
  0,
  50,
  100,
  new Two.Stop(0, "orange", 1),
  new Two.Stop(1, "red", 1),
);

var gradRadC = two.makeRadialGradient(
  -100,
  50,
  200,
  new Two.Stop(0.14, "violet", 1),
  new Two.Stop(0.28, "indigo", 1),
  new Two.Stop(0.42, "blue", 1),
  new Two.Stop(0.56, "green", 1),
  new Two.Stop(0.70, "yellow", 1),
  new Two.Stop(0.84, "orange", 1),
  new Two.Stop(0.98, "red", 1)
);

var rectA = two.makeRectangle(150, 100, 200, 100);
rectA.fill = gradLinA;

var rectB = two.makeRectangle(400, 100, 200, 100);
rectB.fill = gradLinB;

var rectC = two.makeRectangle(650, 100, 200, 100);
rectC.fill = gradLinC;

var rectD = two.makeRectangle(150, 250, 200, 100);
rectD.fill = gradRadA;

var rectE = two.makeRectangle(400, 250, 200, 100);
rectE.fill = gradRadB;

var rectF = two.makeRectangle(650, 250, 200, 100);
rectF.fill = gradRadC;

two.update();