JSFiddle - React, Tailwind, and code Playground

by Sam Wray

HTML

<canvas></canvas>

CSS

html, body, canvas {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
}

JavaScript

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function Egg(x, y) {
	this.x = x || 0;
  this.y = y || 0;
  this.rotation = 0;
  
  this.yOffset = -65
  
	this.draw = function(delta) {
	  context.save();
    context.translate(this.x, this.y); // now the position (0,0) is found at (250,50)
		context.rotate(delta / 400);
    context.beginPath();
    context.moveTo(0, 0 + this.yOffset);
    context.bezierCurveTo(
      -32,
      -7 + this.yOffset, 
      -86,
      111 + this.yOffset, 
      0,
      112 + this.yOffset,
    );
    context.bezierCurveTo(
      82,
      104 + this.yOffset, 
      32,
      7 + this.yOffset, 
      0,
      0 + this.yOffset,
    );
    context.stroke();
    context.restore();
  };
}

const e = new Egg(canvas.width / 2, canvas.height / 2);

function loop(delta) {
  requestAnimationFrame(loop);
  context.clearRect(0, 0, window.innerWidth, window.innerHeight);
  e.x = canvas.width / 2 + (Math.cos(delta / 1000) * 100);
  e.y = canvas.height / 2 + (Math.sin(delta / 1000) * 100);
  e.draw(delta);
}

requestAnimationFrame(loop);