SVG Analog Alarm Clock with Sound. Click or tap (works on mobile too) on the clock face to set or reset the alarm (red hand)
for(_="=5~te||('`s()_id=^svg]|xt[</[><Z xVneU(iTy=RinQlQeN)+'L'+(JidthGonFpx fFt-E fill=#!0 ~d.getMQu|_Hour_=c.crea|rota`+5 ^eight); y2=cFUct(0;o.g,0,/2-e.page+',50,50)transformSecFd_M \\u266A' />T*PI/6)*36+5 stroke e -wG=.'V1x2y1~document.wri`<[!fff =nFeV=oOscillator(o.start(o.frequency.value=<lQ4px0.setAttribu`','] viewBox=\"10100\" style=\"margQ:auto\" displaRblock h=Jk=mQ(QUrH,j=QUrWG)Lpx =#fff [-anchor=middl2Esize~EfamilRArial><circl5px cxcyr=45!333 =#000no QN ] <[VR39>c1ocKZrectV=43 R6wG=14 h=6'forT=13;--i;g=0)Jcos0L RJsQ2L >JT+2)%12+1LZN1=i*30'try{c=Uw AudioCF[;gChanUlMerger(2600721)}catch(f){NV1~3V2~6 y1=6265')}5R6p2l =red3^h2^m<N51n</]>'setIn|rval(Fclick=functiF(e){e&&T=atan2(kY,jX)/PI*180-900>i&&T+=360d=Uw Da|;o=%12*30+/2;n6*m*6holip.[CF|nt=12>?'A:'P;g&&(1>absT-o)&&%2?g.c.destQatiF):g.dis))},30";g=/[^ "-DHIKMOPSW-Y\\a-{}]/.exec(_);)with(_.split(g))_=join(shift());with(Math)eval(_)
Zm9yKF89Ij01fnRlfHwoJ2BzKClfaWQ9XnN2Z118eHRbPC9bPjxaIHhWbmVVKGlUeT1SaW5RbFFlTikrJ0wnKyhKaWR0aEdvbkZweCBmRnQtRSBmaWxsPSMhMCAffh8eZC5nZXQdHU1RdXxfHB1Ib3VyXxs9Yy5jcmVhfBpyb3RhYCsZNSBeGGVpZ2h0Fyk7FiB5Mj0VY0ZVY3QoFDA7by4UZywwLBMvMi1lLnBhZ2USKycsNTAsNTApEXRyYW5zZm9ybRAdU2VjRmRfD00gXFx1MjY2QScOIC8+DFQqUEkvNikqMzYrNQsgc3Ryb2tlCWUJLXdHPS4IEScWB1YxHngyHnkxfgZkb2N1bWVudC53cmlgPAUFWyFmZmYJPW5GZVY9BBZvGk9zY2lsbGF0b3IoFm8uc3RhcnQoFm8uZnJlcXVlbmN5LnZhbHVlPQMMPGxRCDRweAYwFQIuc2V0QXR0cmlidWAQJywnGQEFXSB2aWV3Qm94PVwiHx8xMB8xMDBcIiBzdHlsZT1cIm1hcmdROmF1dG9cIiBkaXNwbGFSYmxvY2sgaBc9Sms9bVEoUVVySBcsaj1RVXJXRylMcHgJPSNmZmYgWy1hbmNob3I9bWlkZGwIMkVzaXplfkVmYW1pbFJBcmlhbD48Y2lyY2wINXB4IGN4HmN5HnI9NDUhMzMzCT0jMDAwDG5vIFFOIF0gPFtWHlIzOT5jMW9jS1pyZWN0Vj00MyBSNh93Rz0xNCBoFz02DCcWZm9yVD0xMzstLWk7Zz0wKQRKY29zCzBMIFJKc1ELMkwgPkpUKzIpJTEyKzFMWk4GFTEfED0ZaSozMBEMJxZ0cnl7Yz1VdyBBdWRpb0NGWztnGkNoYW5VbE1lcmdlcigyAzYwEzADNzITMSl9Y2F0Y2goZil7BU5WMX4zVjJ+NiB5MT02MhU2NQwnKX0ENR9SNhhwAjIYbAk9cmVkAjMfXmgCMh9ebQw8TgY1FTEYbgw8L10+JxZzZXRJbnxydmFsKEZjbGljaz1mdW5jdGlGKGUpe2UmJlQ9YXRhbjIoaxJZLGoSWCkvUEkqMTgwLTkwFjA+aSYmVCs9MzYwFmQ9VXcgRGF8O289GyUxMiozMCscLzI7bgE2Kg8HbQEcKjYHaAFvB2wBaQdwLltDRnxudD0xMj4bPydBDjonUA47ZyYmKDE+YWJzVC1vKSYmDyUyP2cuFGMuZGVzdFFhdGlGKTpnLmRpcxQpKX0sMzAWIjtnPS9bXiAiLURISUtNT1BTVy1ZXFxhLXt9XS8uZXhlYyhfKTspd2l0aChfLnNwbGl0KGcpKV89am9pbihzaGlmdCgpKTt3aXRoKE1hdGgpZXZhbChfKQ==
/**
* Thanks to:
* http://demosthenes.info/blog/943/An-SVG-Analog-Clock-In-6-Lines-of-JavaScript
* http://onlinetonegenerator.com/binauralbeats.html
*
* http://closure-compiler.appspot.com
* http://siorki.github.io/regPack.html
* http://www.w3schools.com/
* http://stackoverflow.com/
*
* Variables
* a - canvas
* b - body
* c - audio context
* d - current date
* e - event
* f - exception
* g - audio channel merger
* h - hour hand element
* i - iterator, alarm angle
* j - window innerWidth
* k - clock height
* l - alarm hand
* m - minute hand element
* n - second hand element
* o - audio oscillators, hour hand angle
* p - period marker
*/
// Clock face, period marker
document.write('<svg viewBox="0 0 100 100" style="margin:auto" display=block height=' + (k = Math.min(innerHeight, j = innerWidth)) + 'px stroke=#fff text-anchor=middle stroke-width=.2px font-size=5px font-family=Arial>\
<circle stroke-width=.5px cx=50 cy=50 r=45 fill=#333 stroke=#000 />\
no inline svg \
<text x=50 y=39>c1ocK</text>\
<rect x=43 y=60 width=14 height=6 />');
// Hour markers
for(i = 13; --i; g = 0)
document.write('<text fill=#fff stroke=none x=' + (Math.cos(i * Math.PI / 6 ) * 36 + 50) + ' y=' + (Math.sin(i * Math.PI / 6) * 36 + 52) + ' >' + ((i + 2) % 12 + 1) + '</text>\
<line x1=50 x2=50 y1=5 y2=10 transform=rotate(' + i * 30 + ',50,50) />');
// Set up audio elements
try {
c = new AudioContext();
g = c.createChannelMerger(2);
o = c.createOscillator();
o.start();
o.frequency.value = 600;
o.connect(g, 0, 0);
o = c.createOscillator();
o.start();
o.frequency.value = 720;
o.connect(g, 0, 1)
}
catch(f) {
// Draw line displaying audio is disabled
document.write('<line x1=53 x2=56 y1=62 y2=65 />')
}
// Period marker text, hands
document.write(' <text fill=#fff stroke=none x=50 y=65 id=p />\
<line stroke-width=.4px x1=50 x2=50 y1=50 y2=25 id=l stroke=red />\
<line stroke-width=.4px x1=50 x2=50 y1=50 y2=30 id=h />\
<line stroke-width=.4px x1=50 x2=50 y1=50 y2=20 id=m />\
<line x1=50 x2=50 y1=55 y2=15 id=n />\
</svg >');
// Update function, onclick event
setInterval(onclick = function(e) {
// Calculate alarm time
if (e) {
i = Math.atan2(k / 2 - e.pageY, j / 2 - e.pageX) / Math.PI * 180 - 90;
}
if (i < 0) {
i += 360;
}
// Update hands and period marker
d = new Date();
o = d.getHours() % 12 * 30 + d.getMinutes() / 2;
n.setAttribute('transform', 'rotate(' + 6 * d.getSeconds() + ',50,50)');
m.setAttribute('transform', 'rotate(' + 6 * d.getMinutes() + ',50,50)');
h.setAttribute('transform', 'rotate(' + o + ',50,50)');
l.setAttribute('transform', 'rotate(' + i + ',50,50)');
p.textContent = 12 > d.getHours() ? 'AM \u266A' : 'PM \u266A';
// Check alarm, chop train whistle
if (g) {
if (1 > Math.abs(i - o) && d.getSeconds() % 2) {
g.connect(c.destination);
}
else {
g.disconnect();
}
}
},
30);