clock.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" id="clock"
  style="position: relative;max-height: 100%;max-width: 100%;left: 0%;top: 0%;">

  <defs>
    <filter id="shadow">
      <feDropShadow dx="2" dy="2" stdDeviation="2" />
    </filter>
    <filter id="raise">
      <feDropShadow dx="0.3" dy="0.3" stdDeviation="0.5" />
    </filter>
    <filter id="raise2">
      <feDropShadow dx="0" dy="0" stdDeviation="0.5" />
    </filter>
    <filter id="raise3">
      <feDropShadow dx="-0.3" dy="-0.3" stdDeviation="0.5" />
    </filter>
    <filter id="light">
      <!--Blur effect-->
      <feGaussianBlur stdDeviation="4" result="blur4" />
      <!--Lighting effect-->
      <feSpecularLighting result="spec4" in="blur4" specularExponent="20" lighting-color="#FFFFFF">
        <!--Light source effect-->
        <fePointLight x="80" y="80" z="90">
        </fePointLight>
      </feSpecularLighting>
      <!--Composition of inputs-->
      <feComposite in="spec4" in2="SourceGraphic" operator="in" k1="2" k2="1" k3="0.2" k4="0.03" />
    </filter>
  </defs>

  <g>
    <circle filter="url(#raise)" cx="100" cy="100" r="87" fill="white" />
  </g>
  <circle filter="url(#shadow)" cx="100" cy="100" r="89.5" fill="#0000" stroke="#666" stroke-width="3.5" />

  <g filter="url(#raise)" font-size="20" font-family="'Gill Sans MT', 'Gill Sans', 'Century Gothic', sans-serif"
    font-weight="" fill="black" style="text-anchor: middle;" dominant-baseline="central" transform="translate(100,100)">
    <g transform="rotate(30), translate(0,-62)"><text transform="rotate(330)">1</text></g>
    <g transform="rotate(60), translate(0,-62)"><text transform="rotate(300)">2</text></g>
<!--<g transform="rotate(90), translate(0,-62)"><text transform="rotate(270)">3</text></g>-->
    <g transform="rotate(120),translate(0,-62)"><text transform="rotate(240)">4</text></g>
    <g transform="rotate(150),translate(0,-62)"><text transform="rotate(210)">5</text></g>
    <g transform="rotate(180),translate(0,-62)"><text transform="rotate(180)">6</text></g>
    <g transform="rotate(210),translate(0,-62)"><text transform="rotate(150)">7</text></g>
    <g transform="rotate(240),translate(0,-62)"><text transform="rotate(120)">8</text></g>
    <g transform="rotate(270),translate(0,-62)"><text transform="rotate(90) ">9</text></g>
    <g transform="rotate(300),translate(0,-62)"><text transform="rotate(60)">10</text></g>
    <g transform="rotate(330),translate(0,-62)"><text transform="rotate(30)">11</text></g>
    <g transform="translate(0,-62)"><text>12</text></g>
  </g>
  <g filter="url(#raise2)">
    <rect  width="50" height="18" x="119" y="91" fill="#EEE" stroke="#EEE" stroke-width="2"
      stroke-linejoin="round" />
    <text filter="url(#raise3)" id="monthBox" x="149.5" y="105.5" text-anchor="end" fill="#333" font-size="16"
      font-family="'Gill Sans MT Light', 'Gill Sans', 'Century Gothic', sans-serif">
      Nov</text>
    <text filter="url(#raise3)" id="dateBox" x="151.5" y="105.5" fill="#333" font-size="16"
      font-family="'Gill Sans MT Light', 'Gill Sans', 'Century Gothic', sans-serif">
      28</text>
  </g>

  <g filter="url(#raise)">
    <g>
      <rect x="99.25" y="20.5" width="1.5" height="6" />
      <rect x="173.5" y="99.25" height="1.5" width="6" />
      <rect x="99.25" y="173.5" width="1.5" height="6" />
      <rect x="20.5" y="99.25" height="1.5" width="6" />
    </g>
    <g transform="rotate(30,100,100)">
      <circle cx="100" cy="22" r="1" />
      <circle cx="178" cy="100" r="1" />
      <circle cx="100" cy="178" r="1" />
      <circle cx="22" cy="100" r="1" />
    </g>
    <g transform="rotate(60,100,100)">
      <circle cx="100" cy="22" r="1" />
      <circle cx="178" cy="100" r="1" />
      <circle cx="100" cy="178" r="1" />
      <circle cx="22" cy="100" r="1" />
    </g>

    <g transform="rotate(6,100,100)">
      <g>
        <circle cx="100" cy="22" r="0.5" />
        <circle cx="178" cy="100" r="0.5" />
        <circle cx="100" cy="178" r="0.5" />
        <circle cx="22" cy="100" r="0.5" />
      </g>
      <g transform="rotate(30,100,100)">
        <circle cx="100" cy="22" r="0.5" />
        <circle cx="178" cy="100" r="0.5" />
        <circle cx="100" cy="178" r="0.5" />
        <circle cx="22" cy="100" r="0.5" />
      </g>
      <g transform="rotate(60,100,100)">
        <circle cx="100" cy="22" r="0.5" />
        <circle cx="178" cy="100" r="0.5" />
        <circle cx="100" cy="178" r="0.5" />
        <circle cx="22" cy="100" r="0.5" />
      </g>
    </g>
    <g transform="rotate(12,100,100)">
      <g>
        <circle cx="100" cy="22" r="0.5" />
        <circle cx="178" cy="100" r="0.5" />
        <circle cx="100" cy="178" r="0.5" />
        <circle cx="22" cy="100" r="0.5" />
      </g>
      <g transform="rotate(30,100,100)">
        <circle cx="100" cy="22" r="0.5" />
        <circle cx="178" cy="100" r="0.5" />
        <circle cx="100" cy="178" r="0.5" />
        <circle cx="22" cy="100" r="0.5" />
      </g>
      <g transform="rotate(60,100,100)">
        <circle cx="100" cy="22" r="0.5" />
        <circle cx="178" cy="100" r="0.5" />
        <circle cx="100" cy="178" r="0.5" />
        <circle cx="22" cy="100" r="0.5" />
      </g>
    </g>
    <g transform="rotate(18,100,100)">
      <g>
        <circle cx="100" cy="22" r="0.5" />
        <circle cx="178" cy="100" r="0.5" />
        <circle cx="100" cy="178" r="0.5" />
        <circle cx="22" cy="100" r="0.5" />
      </g>
      <g transform="rotate(30,100,100)">
        <circle cx="100" cy="22" r="0.5" />
        <circle cx="178" cy="100" r="0.5" />
        <circle cx="100" cy="178" r="0.5" />
        <circle cx="22" cy="100" r="0.5" />
      </g>
      <g transform="rotate(60,100,100)">
        <circle cx="100" cy="22" r="0.5" />
        <circle cx="178" cy="100" r="0.5" />
        <circle cx="100" cy="178" r="0.5" />
        <circle cx="22" cy="100" r="0.5" />
      </g>
    </g>
    <g transform="rotate(24,100,100)">
      <g>
        <circle cx="100" cy="22" r="0.5" />
        <circle cx="178" cy="100" r="0.5" />
        <circle cx="100" cy="178" r="0.5" />
        <circle cx="22" cy="100" r="0.5" />
      </g>
      <g transform="rotate(30,100,100)">
        <circle cx="100" cy="22" r="0.5" />
        <circle cx="178" cy="100" r="0.5" />
        <circle cx="100" cy="178" r="0.5" />
        <circle cx="22" cy="100" r="0.5" />
      </g>
      <g transform="rotate(60,100,100)">
        <circle cx="100" cy="22" r="0.5" />
        <circle cx="178" cy="100" r="0.5" />
        <circle cx="100" cy="178" r="0.5" />
        <circle cx="22" cy="100" r="0.5" />
      </g>
    </g>
  </g>

  <g filter="url(#shadow)">
    <g transform="translate(100,100)">
      <g id="hours">
        <rect x="-0.05" y="-40" width="0.1" height="40" stroke="black" fill="none"
            stroke-linejoin="round" stroke-width="5" stroke-opacity="0.9">
        <animateTransform attributeName="transform" type="rotate" dur="43200s" values="0;360"
          repeatCount="indefinite" />
          </rect>
      </g>
      <g id="minutes">
        <rect x="-0.05" y="-60" width="0.1" height="60" stroke="#070708" fill="none"
          stroke-linejoin="round" stroke-width="4" stroke-opacity="0.9">
        <animateTransform attributeName="transform" type="rotate" dur="3600s" values="0;360"
          repeatCount="indefinite" />
          </rect>
      </g>
      <g id="seconds">
        <rect x="-0.05" y="-70" width="0.1" height="70" stroke="red" fill="none"
          stroke-linejoin="round" stroke-width="2" stroke-opacity="0.9">
          <animateTransform attributeName="transform" type="rotate" dur="60s" values="0;360" repeatDur="indefinite" />
          </rect>
      </g>
    </g>
    <circle cx="100" cy="100" r="4" fill="black" stroke="black" />
    <circle filter="url(#light)" cx="100" cy="100" r="90" fill="#F00" fill-opacity="0.2" stroke="none" />
  </g>


  <script>
    // <![CDATA[
      var Now = new Date(Date.now());
      var Seconds = Now.getSeconds();
      var Minutes = Now.getMinutes() + Seconds / 60;
      var Hours = Now.getHours() + Minutes / 60;
      var options = { month: 'short' };
      var MonthText = Now.toLocaleDateString(undefined, options);
      var DateText = Now.getDate();

      document.getElementById("monthBox").textContent = MonthText;
      document.getElementById("dateBox").textContent = DateText;
      document.getElementById("seconds").setAttribute("transform", "rotate(" + Seconds * 6 + ")");
      document.getElementById("minutes").setAttribute("transform", "rotate(" + Minutes * 6 + ")");
      document.getElementById("hours").setAttribute("transform", "rotate(" + Hours * 30 + ")");

      function autoRefresh() {
        window.location = window.location.href;
      }
      setInterval('autoRefresh()', 300000);
    // ]]>
  </script>

</svg>