<canvas id="canvas"></canvas>

html {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #222222;
  min-width: 800px;
  min-height: 800px;
}

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let canvasSize = 660;
let ratio = window.devicePixelRatio || 1;
canvas.width = canvasSize * ratio;
canvas.height = canvasSize * ratio;
canvas.style.width = canvasSize + "px";
canvas.style.height = canvasSize + "px";
ctx.scale(ratio, ratio);

let currentDate = new Date();

draw();

function draw() {
  setGradient();
  // Start calling setDate recursivley when the minute changes for the first time
  setTimeout(() => {
    setDate();
  }, (60 - currentDate.getSeconds()) * 1000);
}

function setDate() {
  setGradient();

  // Set the time every minute
  setTimeout(() => {
    setDate();
  }, 60000);
}

function setGradient() {
  currentDate = new Date();

  let gradient = ctx.createConicGradient(
    getRadians(),
    canvasSize / 2,
    canvasSize / 2
  );

  let d = currentDate.getMinutes() * getDayOfYear();
  let y = currentDate.getFullYear();
  let dayOfYear = d.toString(16);
  let year = y.toString(16);
  gradient.addColorStop(0, toHex(dayOfYear));
  gradient.addColorStop(1, toHex(year));

  ctx.fillStyle = gradient;
  ctx.arc(canvasSize / 2, canvasSize / 2, canvasSize / 2, 0, 2 * Math.PI);
  ctx.fill();
}

function toHex(color) {
  if (color.length === 1 || color.length === 2) {
    return `#${color}${color}${color}`;
  } else {
    return `#${color}`;
  }
}

function getRadians() {
  let degrees = currentDate.getMinutes() * 6;
  return degrees * (Math.PI / 180);
}

function getDayOfYear() {
  var now = new Date();
  var start = new Date(now.getFullYear(), 0, 0);
  var diff = now - start;
  var oneDay = 1000 * 60 * 60 * 24;
  var day = Math.floor(diff / oneDay);
  return day;
}