El blog de Feregrino

Súper código:

function reloj()
   { 
    hora = new Date() 
    hra = hora.getHours() 
    min = hora.getMinutes() 
    seg = hora.getSeconds() 
    document.getElementById("min").setAttribute("transform","rotate("+ min*6 +" 1000 350)");
    document.getElementById("seg").setAttribute("transform","rotate("+ seg*6 +" 1000 350)");
    document.getElementById("hra").setAttribute("transform","rotate("+ hra*30 +" 1000 350)");
    setTimeout("reloj()",1000);
   } 

En la línea 3 creamos un objeto de la clase Date, el cual contiene la fecha y hora actual del sistema en el que se ejecuta el script; con los gets obtenemos los valores de las horas, minutos y segundos.

Posteriormente, para realizar la animación de las manecillas, usamos el attributo transform de la etiqueta <path>, haciéndolo girar por la cantidad de minutos o segundos multiplicado por 6 ya que esperamos que recorra los 360 grados del circulo en 60 segundos, en cambio para marcar las horas tenemos que multiplicarlo por 30 ya que debe completar el circulo en tan solo 12 movimientos.

Por último hacemos que la función se llame a cada 1000 milisegundos.

Ahora aquí está el html básico requerido, desde luego falta aplicar estilos sobre la carátula del reloj y las manecillas para hacer que luzca mejor.

<svg id="svg-area" viewBox="0 0 2000 700">
    <circle cx="1000" cy="350" r="425" stroke="black" stroke-width="30" fill="transparent" />
    <circle cx="1000" cy="350" r="420" stroke="black" stroke-width="10" />
    <path id="seg" d="M 1000,350 l 0,-350" />
    <path id="min" d="M 1000,350 l 0,-300" />
    <path id="hra" d="M 1000,350 l 0,-250" />
    <circle id="central" cx="1000" cy="350" r="15"/>
</svg>

Descarga el código de el reloj ejemplo del post.

¡Saludos! @fferegrino :)