Pebble Logo

HTML

<canvas height=500 width=500>

CSS

canvas {
    background: #fff;
}

JavaScript

var can = document.getElementsByTagName('canvas')[0];
var c = can.getContext('2d');

var TAO = Math.PI*2,
    PHI = Math.pow(5, .5)*.5+.5,
    phi = PHI-1,
    centerX = can.width/2,
    centerY = can.height/2;

var scale = 1,
    size = 9*scale,
    gap = TAO * .05,
    offset = TAO*(90/360);

var c1 = '#004CFF',
    c2 = '#FF00E1',
    c3 = '#FF0000';

c.lineWidth = 3*scale;
c.strokeStyle = c1;
c.arc(centerX, centerY, size, offset+0+(gap/2), offset+TAO*phi*phi-(gap/2));
c.stroke();
c.beginPath();
c.strokeStyle = c2;
c.arc(centerX, centerY, size, offset+TAO*phi*phi+(gap/2), offset+TAO*phi*phi+TAO*phi*phi-(gap/2));
c.stroke();
c.beginPath();
c.strokeStyle = c3;
c.arc(centerX, centerY, size, offset+TAO*phi*phi+TAO*phi*phi+(gap/2), offset+0-(gap/2));
c.stroke();
/*
*/