Circle Clock

Round hands... a bit like Mii.

by Josh Pullen

HTML

<div id="container">
    <canvas id="clock"></canvas>
    <div id="time"></div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
    background:#222228;
    overflow:hidden;
}
#container {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    text-align:center;
}
#time {
    font-size:4em;
    color:white;
    font-family: 'Open Sans', sans-serif;
    
    width:100%;
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    text-align:center;
}
#clock {
    position:relative;
    z-index:999;
    background:#222228;
    opacity:1;
    transition:opacity 0.1s ease-out;
}
#clock:hover {
    opacity:0;
}

JavaScript

var canvas = document.getElementById("clock"),
    ctx = canvas.getContext("2d"),
    txtElem = document.getElementById("time");

var time = {
	m: 0,
    h: 0,
    s: 0
};

function getTime() {
    var d = new Date();
    time.s = d.getSeconds() + d.getMilliseconds() / 1000;
    time.m = d.getMinutes() + time.s / 60;
    time.h = d.getHours() + time.m / 60;
}

function render() {
    canvas.width = "200";
    canvas.height = "200";
    
    var c1 = {
    	x: canvas.width / 2,
        y: canvas.height / 2,
        r: canvas.width / 2 - 3
    };
    
    var c2 = {
        r: c1.r * 0.618
    };
    c2.x = c1.x - Math.sin(time.h / 12 * -2 * Math.PI) * (c1.r - c2.r);
    c2.y = c1.y - Math.cos(time.h / 12 * -2 * Math.PI) * (c1.r - c2.r);
    
    var c3 = {
        r: c2.r * 0.618
    };
    c3.x = c2.x - Math.sin(time.m / 61 * -2 * Math.PI) * (c2.r - c3.r);
    c3.y = c2.y - Math.cos(time.m / 61 * -2 * Math.PI) * (c2.r - c3.r);
    
    var c4 = {
        r: c3.r * 0.618
    };
    c4.x = c3.x - Math.sin(time.s / 61 * -2 * Math.PI) * (c3.r - c4.r);
    c4.y = c3.y - Math.cos(time.s / 61 * -2 * Math.PI) * (c3.r - c4.r);
    
    
    ctx.strokeStyle = "#fff";
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.arc(c1.x, c1.y, c1.r, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(c2.x, c2.y, c2.r, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(c3.x, c3.y, c3.r, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(c4.x, c4.y, c4.r, 0, 2 * Math.PI);
    ctx.stroke();
    
    var hourString = String(Math.floor((time.h - 1) % 12 + 1));
    var minString = String(Math.floor(time.m));
    if (minString.length == 1) {
        minString = "0" + minString;
    }
    txtElem.innerHTML = hourString + ":" + minString;
}

function loop() {
    getTime();
	render();
    
    window.requestAnimationFrame(loop);
}

loop();