Create an analogue clock Create an analogue clock

Goal: To create a working analogue clock using any programming language.

Requirements:


Your clock should feature at least the hour and minute pointers.
The produced clock could be in the form of an image, an animation or ASCII-art.
It is expected that the clock shows local time.


Optional:


You might make your clock to show the seconds pointer in addition to the minutes and hours pointers.
You might also make the timezone to be configurable if you wish.
You are free to choose if you may either neglect or handle issues about leap seconds.
You might think about what happens to your program if the user adjusts the system clock or if a daylight change occurs.


Since this is a popularity-contest, please be creative and draw some nice and beautiful clocks to deserve the upvotes. Most upvoted answer wins, with the exception that I will not accept my own answer.

Finally, it is recommended (but not required) that you post at least one screenshot (or text output in case of ASCII-art) of your clock in your answer. This way, people will not need to compile and run it to see what it is.



This question is intended to be a revival of a deleted question.

Note that it is not a duplicate of this other question. That question was a code-golf asking for ASCII-art. This one is not restricted to ASCII-art and is a popularity-contest instead, so the answers are expected to be very different.
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;