A CodePen by suffick. Blue Canvas Clock - Just check time. :)

index.html

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

script.js

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    time = new Date(),
    hours = time.getHours(),
    minutes= time.getMinutes(),
    seconds = time.getSeconds();

canvas.width = 500;
canvas.height = 500;

function fnDraw() {
  canvas.width = canvas.width;
  fnGetTime();
  fnTimeShow();
  fnMiddleArcBefore();
  fnDrawSecond();
  fnDrawMinute();
  fnDrawHour();
  fnMiddleArcAfter();
  window.requestAnimationFrame(fnDraw);
}
fnDraw();

function fnGetTime(){
  time = new Date(),
  hours = time.getHours(),
  minutes = time.getMinutes(),
  seconds = time.getSeconds();
}

function fnMiddleArcBefore() {
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 3, Math.PI, 10);
  ctx.fill();
}

function fnMiddleArcAfter() {
  ctx.strokeStyle = "#0093E5";
  ctx.fillStyle = "black";
  ctx.lineWidth = 5;
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, 55, Math.PI, 10);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, 40, Math.PI, 10);
  ctx.stroke();
}

function fnTimeShow() {
  ctx.strokeStyle = "#0093E5";
  ctx.lineWidth = 6;
  ctx.beginPath()
  ctx.moveTo(0, canvas.height / 2 - 10);
  ctx.lineTo(canvas.width, canvas.height / 2 - 10);
  ctx.moveTo(0, canvas.height / 2 + 10);
  ctx.lineTo(canvas.width, canvas.height / 2 + 10);
  ctx.moveTo(canvas.width / 2 - 10, 0);
  ctx.lineTo(canvas.width / 2 - 10, canvas.height);
  ctx.moveTo(canvas.width / 2 + 10, 0);
  ctx.lineTo(canvas.width / 2 + 10, canvas.height);
  ctx.moveTo(canvas.width / 5, 0);
  ctx.lineTo(canvas.width - canvas.width / 5, canvas.height);
  ctx.moveTo(0, canvas.height / 5);
  ctx.lineTo(canvas.width, canvas.height - canvas.height / 5);
  ctx.moveTo(canvas.width - canvas.width / 5, 0);
  ctx.lineTo(canvas.width / 5, canvas.height);
  ctx.moveTo(canvas.width, canvas.height / 5);
  ctx.lineTo(0, canvas.height - canvas.height / 5);
  ctx.stroke();
}

function fnReturnDeg(deg) {
  return deg * Math.PI / 180;
}

function fnDrawSecond() {
  ctx.save();
  ctx.beginPath();
  ctx.lineWidth = 3;
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.moveTo(0, 0);
  ctx.rotate(fnReturnDeg(seconds * 6));
  ctx.lineTo(0, -canvas.width / 2 + 25);
  ctx.stroke();
  ctx.restore();
}

function fnDrawMinute() {
  ctx.save();
  ctx.beginPath();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.moveTo(0, 0);
  ctx.rotate(fnReturnDeg(minutes * 6));
  ctx.lineTo(0, -canvas.width / 2 + 25);
  ctx.stroke();
  ctx.restore();
}

function fnDrawHour() {
  ctx.save();
  ctx.beginPath();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.moveTo(0, 0);
  ctx.rotate(fnReturnDeg(hours * 30));
  ctx.lineTo(0, -canvas.width / 2 + 100);
  ctx.stroke();
  ctx.restore();
}

style.css

body {
  margin: 0 auto;
  background: black;
  text-align: center;
}

#canvas {
  position: absolute;
  left: 50%;
  margin-left: -250px;
  margin-top: 5px;
  background: #000;
  background: 
    radial-gradient(#000 40%, #111);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-filter: blur(0px);
  box-shadow: 0 0 500px rgba(0,147,229, 0.4);
}