Create an analogue clock
SVG + Javascript

▶▶▶ Live demo here ◀◀◀
This uses SVG's built-in animation functions to turn the hands, with a bit of additional Javascript to fetch the local time and set the initial hand positions. It works OK in Chrome and Safari, and should be compatible with most modern browsers as it doesn't use any filter effects.
&lt;?xml version=&quot;1.0&quot;?&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 0 400 400&quot; width=&quot;400&quot; height=&quot;400&quot; version=&quot;1.0&quot;&gt;
  &lt;defs&gt;
    &lt;linearGradient id=&quot;a&quot; x1=&quot;0%&quot; y1=&quot;100%&quot; x2=&quot;0%&quot; y2=&quot;0%&quot;&gt;
      &lt;stop offset=&quot;0%&quot; style=&quot;stop-color:#777799&quot;/&gt;
      &lt;stop offset=&quot;100%&quot; style=&quot;stop-color:#ffffff&quot;/&gt;
    &lt;/linearGradient&gt;
    &lt;linearGradient id=&quot;b&quot; x1=&quot;0%&quot; y1=&quot;100%&quot; x2=&quot;0%&quot; y2=&quot;0%&quot;&gt;
      &lt;stop offset=&quot;0%&quot; style=&quot;stop-color:#ffffff&quot;/&gt;
      &lt;stop offset=&quot;25%&quot; style=&quot;stop-color:#b6b6cc&quot;/&gt;
      &lt;stop offset=&quot;40%&quot; style=&quot;stop-color:#515177&quot;/&gt;
      &lt;stop offset=&quot;48%&quot; style=&quot;stop-color:#ffffff&quot;/&gt;
      &lt;stop offset=&quot;56%&quot; style=&quot;stop-color:#ffffff&quot;/&gt;
      &lt;stop offset=&quot;75%&quot; style=&quot;stop-color:#8b8baa&quot;/&gt;
      &lt;stop offset=&quot;98%&quot; style=&quot;stop-color:#efeff4&quot;/&gt;
      &lt;stop offset=&quot;100%&quot; style=&quot;stop-color:#fbfbfc&quot;/&gt;
    &lt;/linearGradient&gt;
    &lt;linearGradient id=&quot;c&quot; x1=&quot;0%&quot; y1=&quot;100%&quot; x2=&quot;0%&quot; y2=&quot;0%&quot;&gt;
      &lt;stop offset=&quot;0%&quot; style=&quot;stop-color:#ffffff&quot;/&gt;
      &lt;stop offset=&quot;100%&quot; style=&quot;stop-color:#777799&quot;/&gt;
    &lt;/linearGradient&gt;
    &lt;radialGradient id=&quot;d&quot; cx=&quot;50%&quot; cy=&quot;50%&quot; r=&quot;50%&quot; fx=&quot;50%&quot; fy=&quot;50%&quot;&gt;
      &lt;stop offset=&quot;0%&quot; style=&quot;stop-color:#ffffff&quot;/&gt;
      &lt;stop offset=&quot;40%&quot; style=&quot;stop-color:#ffffff&quot;/&gt;
      &lt;stop offset=&quot;70%&quot; style=&quot;stop-color:#e6e6ee&quot;/&gt;
      &lt;stop offset=&quot;92%&quot; style=&quot;stop-color:#b6b6cc&quot;/&gt;
      &lt;stop offset=&quot;100%&quot; style=&quot;stop-color:#636388&quot;/&gt;
    &lt;/radialGradient&gt;
    &lt;radialGradient id=&quot;e&quot; cx=&quot;50%&quot; cy=&quot;150%&quot; r=&quot;200%&quot; fx=&quot;50%&quot; fy=&quot;150%&quot;&gt;
      &lt;stop offset=&quot;0%&quot; style=&quot;stop-color:#ffffff;stop-opacity:0&quot;/&gt;
      &lt;stop offset=&quot;59%&quot; style=&quot;stop-color:#ffffff;stop-opacity:0&quot;/&gt;
      &lt;stop offset=&quot;60%&quot; style=&quot;stop-color:#ffffff;stop-opacity:0.6&quot;/&gt;
      &lt;stop offset=&quot;70%&quot; style=&quot;stop-color:#ffffff;stop-opacity:0.3&quot;/&gt;
      &lt;stop offset=&quot;100%&quot; style=&quot;stop-color:#ffffff;stop-opacity:0.0&quot;/&gt;
    &lt;/radialGradient&gt;
  &lt;/defs&gt;
  &lt;g transform=&quot;translate(200 200)&quot;&gt;
    &lt;circle cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;200&quot; fill=&quot;#cecedd&quot;/&gt;
    &lt;circle cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;196&quot; stroke=&quot;url(#a)&quot; stroke-width=&quot;5&quot; fill=&quot;url(#b)&quot;/&gt;
    &lt;circle cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;170&quot; stroke=&quot;url(#c)&quot; stroke-width=&quot;4&quot; fill=&quot;url(#d)&quot;/&gt;
    &lt;circle cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;172&quot; stroke=&quot;#ffffff&quot; stroke-width=&quot;0.5&quot; fill=&quot;none&quot;/&gt;
    &lt;circle cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;193.5&quot; stroke=&quot;#ffffff&quot; stroke-width=&quot;0.5&quot; fill=&quot;none&quot;/&gt;
    &lt;g id=&quot;O&quot;&gt;
      &lt;polygon points=&quot;4,155 4,130 -4,130 -4,155&quot; style=&quot;fill:#777799;stroke:#313155;stroke-width:1&quot;/&gt;
      &lt;polygon points=&quot;4,-155 4,-130 -4,-130 -4,-155&quot; style=&quot;fill:#777799;stroke:#313155;stroke-width:1&quot;/&gt;
    &lt;/g&gt;
    &lt;g transform=&quot;rotate(30)&quot;&gt;&lt;use xlink:href=&quot;#O&quot;/&gt;&lt;/g&gt;
    &lt;g transform=&quot;rotate(60)&quot;&gt;&lt;use xlink:href=&quot;#O&quot;/&gt;&lt;/g&gt;
    &lt;g transform=&quot;rotate(90)&quot;&gt;&lt;use xlink:href=&quot;#O&quot;/&gt;&lt;/g&gt;
    &lt;g transform=&quot;rotate(120)&quot;&gt;&lt;use xlink:href=&quot;#O&quot;/&gt;&lt;/g&gt;
    &lt;g transform=&quot;rotate(150)&quot;&gt;&lt;use xlink:href=&quot;#O&quot;/&gt;&lt;/g&gt;
    &lt;polygon id=&quot;h&quot; points=&quot;6,-80 6,18 -6,18 -6,-80&quot; style=&quot;fill:#232344&quot;&gt;
      &lt;animateTransform id=&quot;ht&quot; attributeType=&quot;xml&quot; attributeName=&quot;transform&quot; type=&quot;rotate&quot; from=&quot;000&quot; to=&quot;000&quot; begin=&quot;0&quot; dur=&quot;86400s&quot; repeatCount=&quot;indefinite&quot;/&gt;
    &lt;/polygon&gt;
    &lt;polygon id=&quot;m&quot; points=&quot;3.5,-140 3.5,23 -3.5,23 -3.5,-140&quot; style=&quot;fill:#232344&quot;&gt;
      &lt;animateTransform id=&quot;mt&quot; attributeType=&quot;xml&quot; attributeName=&quot;transform&quot; type=&quot;rotate&quot; from=&quot;000&quot; to=&quot;000&quot; begin=&quot;0&quot; dur=&quot;3600s&quot; repeatCount=&quot;indefinite&quot;/&gt;
    &lt;/polygon&gt;
    &lt;polygon id=&quot;s&quot; points=&quot;2,-143 2,25 -2,25 -2,-143&quot; style=&quot;fill:#232344&quot;&gt;
      &lt;animateTransform id=&quot;st&quot; attributeType=&quot;xml&quot; attributeName=&quot;transform&quot; type=&quot;rotate&quot; from=&quot;000&quot; to=&quot;000&quot; begin=&quot;0&quot; dur=&quot;60s&quot; repeatCount=&quot;indefinite&quot;/&gt;
    &lt;/polygon&gt;
    &lt;circle cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;163&quot; fill=&quot;url(#e)&quot;/&gt;
  &lt;/g&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;&lt;![CDATA[
    var d = new Date();
    var s = d.getSeconds();
    var m = d.getMinutes() + s/60;
    var h = (d.getHours() % 12) + m/60 + s/3600;
    document.getElementById('st').setAttribute('from',s*6);
    document.getElementById('mt').setAttribute('from',m*6);
    document.getElementById('ht').setAttribute('from',h*30);
    document.getElementById('st').setAttribute('to',360+s*6);
    document.getElementById('mt').setAttribute('to',360+m*6);
    document.getElementById('ht').setAttribute('to',360+h*30);
  ]]&gt;&lt;/script&gt;
&lt;/svg&gt;