Il tag SVG è vettoriale e quindi nativamente scalabile a piacere senza perdita di qualità grafica.
Interfaccia
Il tag HTML per realizzare il disegno dell'orologio è questo
HTML
<svgversion="1.1"viewBox="0 0 512 512"xmlns="http://www.w3.org/2000/svg"width="100%"hight="100%"id="sgart-clock"><style>.text { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold;}
</style><g><!-- sfondo e bordo esterno --><circlecx="256"cy="256"r="255" /><circlecx="256"cy="256"r="240"fill="#eee" /></g><g><!-- linee dei 5 minuti --><linex1="256"y1="66"x2="256"y2="26"stroke="#000"stroke-width="15" /><linex1="356"y1="82.795"x2="371"y2="56.814"stroke="#000"stroke-width="10" /><linex1="429.205"y1="156"x2="455.186"y2="141"stroke="#000"stroke-width="10" /><linex1="446"y1="256"x2="486"y2="256"stroke="#000"stroke-width="15" /><linex1="429.205"y1="356"x2="455.186"y2="371"stroke="#000"stroke-width="10" /><linex1="356"y1="429.205"x2="371"y2="455.186"stroke="#000"stroke-width="10" /><linex1="256"y1="446"x2="256"y2="486"stroke="#000"stroke-width="15" /><linex1="156"y1="429.205"x2="141"y2="455.186"stroke="#000"stroke-width="10" /><linex1="82.795"y1="356"x2="56.814"y2="371"stroke="#000"stroke-width="10" /><linex1="66"y1="256"x2="26"y2="256"stroke="#000"stroke-width="15" /><linex1="82.795"y1="156"x2="56.814"y2="141"stroke="#000"stroke-width="10" /><linex1="156"y1="82.795"x2="141"y2="56.814"stroke="#000"stroke-width="10" /></g><g><!-- lancette ore, minuti e secondi con relativo id per animazione in JavaScript --><linex1="256"y1="256"x2="256"y2="430"stroke="#333"stroke-width="15"id="sgart-clock-hours" /><linex1="256"y1="256"x2="256"y2="70"stroke="#000"stroke-width="10"id="sgart-clock-minutes" /><linex1="256"y1="256"x2="430"y2="256"stroke="#F00"stroke-width="5"id="sgart-clock-seconds" /></g><g><!-- cerchio lancette --><circlecx="256"cy="256"r="15" /><!-- testi --><textx="256"y="155"textLenght="300"text-anchor="middle"class="text"fill="#800">sgart.it</text><textx="256"y="357"textLenght="300"text-anchor="middle"class="text"fill="#888"id="sgart-clock-text">00:00:00</text></g></svg>
dove viene disegnato, il bordo, una linea ogni 5 minuti, le lancette statiche oltre ai testi.
Animazione
Per animare le lancette serve un po' di JavaScript per ricalcolare ogni volta la posizione X e Y delle lancette usando le funzioni Math.cos(rad) e Math.sin(rad)
Per creare velocemente il disegno dell'orologio, in particolare per calcolare le posizioni X e Y di ogni tacca dei 5 minuti, ho usato un foglio Excel dove, dopo aver eseguito tutti i calcoli, genero il tag SVGlineExcel per calcoliDove le formule sono:
Gradi = 360/60*A13
Offset = B13+$C$6
Radianti = PI.GRECO()/180*C13
Mod15 = RESTO(A13;15)
Radius min = $H$5-SE(E13=0;$H$8;$H$7)
X min = ARROTONDA(COS($D13)*F13; 3)+$H$3
Y min = ARROTONDA(SEN($D13)*F13;3)+$H$4
X max = ARROTONDA(COS($D13)*$H$5;3)+$H$3
Y max = ARROTONDA(SEN($D13)*$H$5;3)+$H$4
Width = SE(E13=0;$H$11;$H$10)
Colore = #000
Tag = =SOSTITUISCI("<line x1="""&G13&""" y1="""&H13&""" x2="""&I13&""" y2="""&J13&""" stroke="""&L13&""" stroke-width="""&K13&""" />";",";".")