<canvas id="c"></canvas>
body {
  margin:0;
  background: #BE3288;
}
var canvas = document.getElementById("c");
var ctx = c.getContext("2d");
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;

var originPoint = {x:0,y:0};
var lastPoint = {x:0,y:0};
var rad = Math.PI / 180;
var r = 1;
var step = 0;
var offset = 0;
var colors = ["#ffffff", "#232323"];
var curColor = 0; 

function Draw() {
  if(step == 1440){
    step = 0;
    offset += 0.35;
    var v = Math.floor(Math.random() * 255);
    curColor = 1-curColor;
  }
  heart(step);
  step += 5;
  ctx.globalCompositeOperation = "destination-over";
  window.requestAnimationFrame(Draw); 
}

function heart(step) {
  t = step;
  r = step*0.01 + offset;
  var x = W/2 + 16 * r * (Math.sin(t * rad) * Math.sin(t * rad) * Math.sin(t * rad));
  var y = H/2 - 13 * r * Math.cos(t * rad) +
      5 * r * Math.cos(2 * t * rad) +
      2 * r * Math.cos(3 * t * rad) +
      r * Math.cos(4 * t * rad);
  if(step==0){
    lastPoint = {x:x, y:y};
    originPoint = {x:x, y:y};
  }
  ctx.beginPath(); 
  ctx.moveTo(lastPoint.x, lastPoint.y);
 // ctx.lineTo(x,y);
  ctx.bezierCurveTo(lastPoint.x, lastPoint.y+10, lastPoint.x, lastPoint.y-10, x, y);
  ctx.lineWidth = 5;
  ctx.lineCap = "round";
  ctx.strokeStyle = colors[curColor];
  ctx.stroke();
  ctx.closePath();

  lastPoint = {x:x, y:y};
}

window.requestAnimationFrame(Draw);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.