JSFiddle - React, Tailwind, and code Playground

by Christian Mueller

HTML

<div ng-controller="MainController">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <g>
      <circle style="stroke: #ccc; fill: #fff;" cx="100" cy="100" r="100"/>
      <line x1="100" y1="100" x2="100" y2="50"
            style="stroke-width: 5px; stroke: #333;"
            ng-attr-transform="rotate({{hourRotation}} 100 100)" />
      <line x1="100" y1="100" x2="100" y2="20"
            style="stroke-width: 3px; stroke: #888;"
            ng-attr-transform="rotate({{minuteRotation}} 100 100)" />
      <line x1="100" y1="100" x2="100" y2="5"
            style="stroke-width: 2px; stroke: #bb0000;"
            ng-attr-transform="rotate({{secondRotation}} 100 100)" />
    </g>
  </svg>
  </div>

JavaScript

angular.module('cookbookApp', [])
  .controller('MainController', function($scope, $interval) {

    function calculateRotation() {
      var now = new Date();
      $scope.hourRotation   = 360 * now.getHours()   / 12;
      $scope.minuteRotation = 360 * now.getMinutes() / 60;
      $scope.secondRotation = 360 * now.getSeconds() / 60;
    }
    $interval(calculateRotation, 1000);
    calculateRotation();
  });