Roman Analog Clock
Other @bhaskar Stars:0 Views:0
<div class='ck'><small>CLOCK</small><svg id='cks' viewBox='0 0 100 100'></svg><div class='t' id='ckt'></div></div>
<style>
.ck{width:170px;margin:auto;padding:16px 14px 14px;background:#fff;border-radius:28px;box-shadow:0 10px 30px rgba(0,0,0,.1);text-align:center;font-family:Inter,Arial,sans-serif}.ck small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:#9a9a9a}.ck svg{display:block;width:110px;height:110px;margin:10px auto 8px}.ck .t{font:11px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#444}
</style>
<script>
const S='http://www.w3.org/2000/svg';const sv=document.getElementById('cks');let g='<circle cx="50" cy="50" r="47" fill="#fff" stroke="#eee"/>';for(let i=0;i<60;i++){const a=i*6*Math.PI/180,m=i%5===0,r1=m?40:43,r2=46;g+='<line x1="'+(50+Math.sin(a)*r1)+'" y1="'+(50-Math.cos(a)*r1)+'" x2="'+(50+Math.sin(a)*r2)+'" y2="'+(50-Math.cos(a)*r2)+'" stroke="'+(m?'#bbb':'#e6e6e6')+'" stroke-width="'+(m?1.2:.6)+'"/>'}const R=['XII','I','II','III','IIII','V','VI','VII','VIII','IX','X','XI'];for(let n=0;n<12;n++){const a=n*30*Math.PI/180;g+='<text x="'+(50+Math.sin(a)*33)+'" y="'+(50-Math.cos(a)*33+1.6)+'" text-anchor="middle" font-size="4.6" font-family="Georgia,serif" fill="#555">'+R[n]+'</text>'}g+='<line id="h" x1="50" y1="50" x2="50" y2="26" stroke="#111" stroke-width="3" stroke-linecap="round"/><line id="m" x1="50" y1="50" x2="50" y2="15" stroke="#111" stroke-width="2" stroke-linecap="round"/><line id="s" x1="50" y1="58" x2="50" y2="13" stroke="#ef4444" stroke-width=".9" stroke-linecap="round"/><circle cx="50" cy="50" r="2.4" fill="#111"/>';sv.innerHTML=g;const H=sv.querySelector('#h'),M=sv.querySelector('#m'),Sx=sv.querySelector('#s'),T=document.getElementById('ckt');const tick=()=>{const d=new Date(),s=d.getSeconds()+d.getMilliseconds()/1000,m=d.getMinutes()+s/60,h=d.getHours()%12+m/60;H.setAttribute('transform','rotate('+h*30+' 50 50)');M.setAttribute('transform','rotate('+m*6+' 50 50)');Sx.setAttribute('transform','rotate('+s*6+' 50 50)');T.textContent=d.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'}).toUpperCase();requestAnimationFrame(tick)};tick();
</script>