JS

Часики реально работающие.

by akogch

HTML

<svg id="clock" version="1.1" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="-50 -50 100 100">

  <defs>
    <g id="clockface">
      <circle cx="0" cy="0" r="49" />

      <g id="mark-minute">
        <line x1="0" y1="-44" x2="0" y2="-47" />
      </g>
      <g id="marks5">
        <use xlink:href="#mark-minute" transform="rotate(0)" />
        <use xlink:href="#mark-minute" transform="rotate(6)" />
        <use xlink:href="#mark-minute" transform="rotate(12)" />
        <use xlink:href="#mark-minute" transform="rotate(18)" />
        <use xlink:href="#mark-minute" transform="rotate(24)" />
      </g>

      <use xlink:href="#marks5" transform="rotate(30)" />
      <use xlink:href="#marks5" transform="rotate(60)" />
      <use xlink:href="#marks5" transform="rotate(90)" />
      <use xlink:href="#marks5" transform="rotate(120)" />
      <use xlink:href="#marks5" transform="rotate(150)" />
      <use xlink:href="#marks5" transform="rotate(180)" />
      <use xlink:href="#marks5" transform="rotate(210)" />
      <use xlink:href="#marks5" transform="rotate(240)" />
      <use xlink:href="#marks5" transform="rotate(270)" />
      <use xlink:href="#marks5" transform="rotate(300)" />
      <use xlink:href="#marks5" transform="rotate(330)" />

      <g id="date-display">
        <rect x="23" y="-4" width="8" height="7.5" />
        <text x="27" y="1.8" text-anchor="middle">00</text>
      </g>
    </g>

    <g id="hand">
      <line x1="0" y1="0" x2="0" y2="-40" />
      <circle cx="0" cy="0" r="2" />
    </g>
  </defs>

  <use xlink:href="#clockface" />

  <g id="offset-hours">
    <use id="hour-hand" xlink:href="#hand" />
  </g>
  <g id="offset-minutes">
    <use id="minute-hand" xlink:href="#hand" />
  </g>
  <g id="offset-seconds">
    <use id="second-hand" xlink:href="#hand" />
  </g>

</svg>

CSS

@import url(http://fonts.googleapis.com/css?family=Lobster);

html,
body {
  margin: 0;
  height: 100%;
}

svg#clock {
  display: block;
  margin: 0 auto;
  font-family: 'Lobster';
  background-color: #0F0F0F;
}

#clockface {
  fill: #222;
}

#marks5 use {
  stroke: #444;
  stroke-width: 1;
}

#marks5 use:first-child {
  stroke: #FFF;
}

#date-display rect {
  stroke: #444;
  stroke-width: 1;
}

#date-display text {
  fill: #444;
  font-size: 0.35em;
}

#hand line,
#mark-minute {
  stroke-linecap: round;
}

#hand {
  fill: #FFF;
  stroke: #FFF;
}

#hour-hand {
  stroke-width: 4;
  transform: scale(0.6);
  animation: animate-hours 86400s linear infinite;
}

#minute-hand {
  stroke-width: 2;
  animation: animate-minutes 3600s linear infinite;
}

#second-hand {
  stroke-width: 1;
  transform: scale(1.1);
  animation: animate-seconds 60s steps(60) infinite;
}

/* Animations */

@keyframes animate-hours {
  from {
    transform: scale(0.6) rotate(0deg);
  }

  to {
    transform: scale(0.6) rotate(360deg);
  }
}

@keyframes animate-minutes {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes animate-seconds {
  from {
    transform: scale(1.1) rotate(0deg);
  }

  to {
    transform: scale(1.1) rotate(360deg);
  }
}

JavaScript

window.onload = function() {
  var time = new Date(),
    midnight = new Date();
  midnight.setHours(0);
  midnight.setMinutes(0);
  midnight.setSeconds(0);

  // Seconds/Minutes/Hours from today:
  var seconds = (time.getTime() - midnight.getTime()) / 1000,
    minutes = seconds / 60,
    hours = minutes / 60;

  document.getElementById('offset-hours').style.transform = 'rotate(' + (hours % 12 / 12 * 360) + 'deg)';
  document.getElementById('offset-minutes').style.transform = 'rotate(' + (minutes / 60 * 360) + 'deg)';
  document.getElementById('offset-seconds').style.transform = 'rotate(' + (seconds / 60 * 360) + 'deg)';

  document.getElementById('date-display').getElementsByTagName('text')[0].innerHTML = time.getDate();
};