Binary clock

binaryclock.js

document.body.style.background ='#000';

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

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

document.body.appendChild(canvas);

const barW = canvas.width / 6;
const barH = canvas.height / 4;

const p = s => ('0000' + s).substr(-4);

const bar = (x, y, color) => {
  ctx.fillStyle = `hsl(${color}, 100%, 15%)`;
  ctx.fillRect(x, y, barW, barH);
  
  ctx.strokeStyle = `hsl(${color}, 60%, 50%)`;
  ctx.strokeRect(x, y, barW, barH);
}

window.setInterval(() => {
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, barW * 6, barH * 5);
  
  const d = new Date();
  
  const color = Math.floor(+d / 1000) % 360;
  
  const timearr = [
    ...('00' + (d.getHours() || '24')).substr(-2).split(''), 
    ...('00' + d.getMinutes()).substr(-2).split(''),
    ...('00' + d.getSeconds()).substr(-2).split('')
  ];

  timearr.forEach((n, i) => {
    p(parseInt(n, 10).toString(2)).split('').forEach((c, j) => {
      c === '1' ? bar(i * barW, j * barH, color) : null;
    });
  });
}, 1000);