JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<div id="mouse"></div>
<canvas id="canvas"></canvas>

CSS

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#mouse {
  border-radius: 50%;
  position: absolute;
  height: 20px;
  width: 20px;
  background-color: blue;
}

#canvas {
  background: black;
}

JavaScript

var canvas = document.getElementById("canvas");
canvas.width = $(window).width();
canvas.height = $(window).height();

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
var mouseX;
var mouseY;

var kule = {
  cx: 100,
  cy: 100,
  vy: 2,
  vx: 2,
  r: 5,
  e: 1,
  color: "cyan"
};

var startTime = (new Date()).getTime();
var rotationSpeed = 1000; // Milliseconds for a full turn
var orbitRadius = 75;

function draw() {
  var boundsX = canvas.width;
  var boundsY = canvas.height;
  ctx.clearRect(0, 0, boundsX, boundsY);
  ctx.fillStyle = kule.color;

  var currentTime = (new Date()).getTime();
  var passedTime = currentTime - startTime;
  var angle = Math.PI * 2 * (passedTime / rotationSpeed);

  ctx.beginPath();
  ctx.arc(mouseX + Math.cos(angle) * orbitRadius, mouseY + Math.sin(angle) * orbitRadius, kule.r, 0, Math.PI * 2);
  ctx.fill();
}
setInterval(draw, 10);
$(document).on("mousemove", function(event) {
  mouseX = event.pageX;
  mouseY = event.pageY;
  $("#mouse").animate({
    left: mouseX - 10,
    top: mouseY - 10
  }, 0);
});