JSFiddle - React, Tailwind, and code Playground

by makurell

HTML

<canvas id='c'></canvas>

CSS

* { margin:0; padding:0; } 
canvas { display:block; }

JavaScript

var ca = document.getElementById('c'),
		cx = ca.getContext('2d');

function resizeCanvas() {
  ca.width = window.innerWidth - 10;
  ca.height = window.innerHeight - 10;
}
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();

var c = 2*Math.PI;

function drawHeart(x,y,s){
  cx.beginPath();
  cx.lineWidth = 2;
  var a = 0.0769;
  for(t=0;t<2*Math.PI;t+=c){
    var i = 0.5*s*a*15.7*Math.pow(Math.sin(t),3)+x;
    var j = -0.5*s*a*(15.7*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(3*t))-5+y;
    cx.lineTo(i,j);
  }
  cx.closePath();
  cx.stroke();
}

setInterval(function(){
  cx.clearRect(0,0,cx.canvas.width,cx.canvas.height);
  drawHeart(cx.canvas.width/2,cx.canvas.height/2,cx.canvas.width/2.5);

  c-=Math.sqrt(c)/100;
  if(c<=Math.PI/40){
    c=2*Math.PI;
  }
},10);