Datei:Real Time Clock.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="-510 -510 1020 1020" version="1.1">
  <script type="application/x-javascript">
    <![CDATA[
    var RingClock = new function()
    {
      window.addEventListener("load",init);
      var frame = 0;
      
      function init()
      {
        setClock();
      }
      
      function setClock()
      {
        var dt = new Date();
        
        var hours = dt.getHours() % 12;
        var min = dt.getMinutes();
        var sec = dt.getSeconds();
        node = document.getElementById("hhand");
        var deg = 30*(hours + min/60);
        node.setAttribute("transform","rotate("+deg+")");
        node = document.getElementById("mhand");
        deg = 6*(min + sec/60);
        node.setAttribute("transform","rotate("+deg+")");
        
        node = document.getElementById("shand");
        deg = 6*sec;
        node.setAttribute("transform","rotate("+deg+")");

      }
    }();
  ]]>
  </script>
  <style type="text/css">
    <![CDATA[
    #hhand {fill:cyan;stroke:purple;}
    #mhand {fill:lime;stroke:purple;}
    #shand {fill:magenta;stroke:purple;}
  ]]>
  </style>
   
<defs>
  <path id="z" opacity="0.3"
     d="M-7.6023,125.77
      C119.60193212336,146.1302426944 321.97864330881,83.454886782505 459.50964395017,21.23418226249
      A460,460 0 0 0 459.50964395017,-21.23418226249
      C321.97864330881,-83.454886782505 119.60193212336,-146.1302426944 -7.6023,-125.77
      A126,126 0 1 1 -7.602 125.773" />
  <mask id="maske">
    <rect x="-535" y="-535" width="1070" height="1070" fill="#fff" />
    <use xlink:href="#z" fill="#000" />
  </mask>
  <radialGradient id="r" >
    <stop offset="0" stop-opacity="0" />
    <stop offset=".90" stop-opacity="0" />
    <stop offset="0.90" stop-color="#e3e3e3" stop-opacity="1" />
    <stop offset="0.914285" stop-color="#b8b8b8" />
    <stop offset="0.928571" stop-color="#e3e3e3" />
    <stop offset="0.942857" stop-color="#b8b8b8" />
    <stop offset="0.957142" stop-color="#8f8f8f" />
    <stop offset="0.971428" stop-color="#e3e3e3" />
    <stop offset=".985714" stop-color="#8f8f8f" />
  </radialGradient>
  <line id="li" y1="98" y2="116" stroke="#999" stroke-width="5" />
  <line id="t" y1="103" y2="116" stroke="#aaa" stroke-width="3" />
  <g id="m">
    <use xlink:href="#li" />
    <use xlink:href="#t" transform="rotate(6)" />
    <use xlink:href="#t" transform="rotate(12)" />
    <use xlink:href="#t" transform="rotate(18)" />
    <use xlink:href="#t" transform="rotate(24)" />
  </g>
  <g id="n">
    <use xlink:href="#m" />
    <use xlink:href="#m" transform="rotate(30)" />
    <use xlink:href="#m" transform="rotate(60)" />
  </g>
  <radialGradient id="rg1">
    <stop offset="0%" stop-color="magenta" />
    <stop offset="100%" stop-color="purple" />
  </radialGradient>
</defs>
<rect width="200%" height="200%" x="-100%" y="-100%" fill="#000"  opacity="1" />
<circle r="460" fill="#fff" />
<g display="inline">
  <g id="w" stroke="#fff" stroke-width="3" opacity="0.8" >
    <use xlink:href="#z" transform="rotate(0)" fill="#f00" />
    <use xlink:href="#z" transform="rotate(10)" fill="#f60" />
    <use xlink:href="#z" transform="rotate(20)" fill="#fb0" />
    <use xlink:href="#z" transform="rotate(30)" fill="#ff0" />
    <use xlink:href="#z" transform="rotate(40)" fill="#bf0" />
    <use xlink:href="#z" transform="rotate(50)" fill="#6f0" />
    <use xlink:href="#z" transform="rotate(60)" fill="#0f0" />
    <use xlink:href="#z" transform="rotate(70)" fill="#0f6" />
    <use xlink:href="#z" transform="rotate(80)" fill="#0fb" />
    <use xlink:href="#z" transform="rotate(90)" fill="#0ff" />
    <use xlink:href="#z" transform="rotate(100)" fill="#0bf" />
    <use xlink:href="#z" transform="rotate(110)" fill="#06f" />
    <use xlink:href="#z" transform="rotate(120)" fill="#00f" />
    <use xlink:href="#z" transform="rotate(130)" fill="#60f" />
    <use xlink:href="#z" transform="rotate(140)" fill="#b0f" />
    <use xlink:href="#z" transform="rotate(150)" fill="#f0f" />
    <use xlink:href="#z" transform="rotate(160)" fill="#f0b" />
    <use xlink:href="#z" transform="rotate(170)" fill="#f06" />
  </g>
  <g mask="url(#maske)">
    <use xlink:href="#w" transform="rotate(180)" />
  </g>
  <g transform="scale(3.9)">
    <use xlink:href="#n" />
    <use xlink:href="#n" transform="rotate(90)" />
    <use xlink:href="#n" transform="rotate(180)" />
    <use xlink:href="#n" transform="rotate(270)" />
  </g>
  <circle r="126" fill="#fff" opacity="1" />
  <circle r="126" style="fill: url(#rg1); stroke: #ccc; stroke-width: 4px; opacity: 1" />
  <g id="hhand" >
    <animateTransform attributeName="transform"
    type="rotate" values="0; 360"
    repeatDur="indefinite" 
    additive="sum" fill="freeze" />
    <path d="M15,0 0,-340 -15,0 0,120 z" stroke-width="0.5" />
  </g>
  <g id="mhand" >
    <animateTransform attributeName="transform"
    type="rotate" values="0; 360"
    repeatDur="indefinite" dur="3600s"
    additive="sum" fill="freeze" />
    <path d="M15,0 0,-400 -15,0 0,120 z" stroke-width="0.5" />
  </g>
  <g id="shand" >
    <animateTransform attributeName="transform"
    type="rotate" values="0; 360"
    repeatDur="indefinite" dur="60s"
    additive="sum" fill="freeze" />
    <path d="M15,0 0,-455 -15,0 0,120 z" stroke-width="0.5" />
  </g>
  <circle r="8" fill="url(#rg1)" stroke="purple" stroke-width="0.5" />
  <circle r="510" fill="url(#r)" stroke="none" opacity="1" />
  <circle r="460" fill="none" stroke="#333" stroke-width="0" />
</g>
</svg>