window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();


var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var w2 = w * 0.5;
var h2 = h * 0.5;
var ŭ = 0;

var hearts = [];

var hp = [
  [-14, -81, -149, -94, -167, 0],
  [-184, 95, -28, 157, 0, 250],
  [28, 157, 184, 95, 167, 0],
  [149, -94, 14, -81, 0, 0]
];

function Love() {
  document.body.appendChild(c);
 
  function anim() {
    one0one();
    requestAnimFrame(anim);
  }
  for (var i = 0; i < 101; i++) {
    var heart = new Heart(w2, h2 - 180, 1.5 + (0.15 * (i - 101) / (i + 1.5)));
    hearts.push(heart);
  }
  anim();
}

function one0one() {
  $.clearRect(0, 0, w, h);
  $.globalCompositeOperation = "xor";
  ŭ -= 0.5;

  for (var i = 0; i < hearts.length; i++) {
    hearts[i].render($);
  }
}

function Heart(x, y, s) {
  this.x = x || w2;
  this.y = y || h2;
  this.s = s || 1;

  this.render = function($) {

    $.beginPath();
    $.fillStyle = 'hsl(' + ŭ + ', 77%, 46%)';

    $.moveTo(this.x, this.y);
    for (var i = 0; i < 4; i++) {
    $.bezierCurveTo(hp[i][0] * this.s + this.x, hp[i][1] * this.s + this.y, hp[i][2] * this.s + this.x, hp[i][3] * this.s + this.y, hp[i][4] * this.s + this.x, hp[i][5] * this.s + this.y);
    }
    $.closePath();
    $.fill();
  };
}

Love();