Clock

component.html

<svg viewBox='0 0 100 100'>

  <!-- first create a group and move it to 50,50 so
all co-ords are relative to the center -->
  <g transform='translate(50,50)'>
    <circle class='clock-face' r='48'/>

    <!-- markers every minute (major markers every 5 minutes) -->
    {{#each minor as tick, i}}
    <line class='minor' y1='42' y2='45' transform='rotate( {{
                                                   360 * i / minor.length
                                                   }} )'/>
    {{/each}}

    {{#each major as tick, i}}
    <line class='major' y1='35' y2='45' transform='rotate( {{
                                                   360 * i / major.length
                                                   }} )'/>
    {{/each}}

    <!-- hour hand -->
    <line class='hour' y1='2' y2='-20' transform='rotate( {{
                                                  30 * hours +
                                                  minutes / 2
                                                  }} )'/>

    <!-- minute hand -->
    <line class='minute' y1='4' y2='-30' transform='rotate( {{
                                                    6 * minutes +
                                                    seconds / 10
                                                    }} )'/>

    <!-- second hand -->
    <g transform='rotate( {{
                  6 * seconds
                  }} )'>
      <line class='second' y1='10' y2='-38'/>
      <line class='second-counterweight' y1='10' y2='2'/>
    </g>

  </g>

</svg>

<style>
  svg {
    width: 100%;
    height: 100%;
  }
  .clock-face {
    stroke: #333;
    fill: white;
  }
  .minor {
    stroke: #999;
    stroke-width: 0.5;
  }
  .major {
    stroke: blue;
    stroke-width: 1;
  }
  .hour {
    stroke: blue;
  }
  .minute {
    stroke: red;
  }
  .second, .second-counterweight {
    stroke: rgb(180,0,0);
  }
  .second-counterweight {
    stroke-width: 3;
  }
</style>

<script>
  export default {
    data () {
      return {
        // clock face markers - major (every 5 minutes) and minor (every minute)
        major: new Array( 12 ),
        minor: new Array( 60 ),
        time: new Date()
      };
    },
    
    computed: {
      hours: time => time.getHours(),
      minutes: time => time.getMinutes(),
      seconds: time => time.getSeconds()
    },
    
    onrender () {
      this.interval = setInterval( () => {
        this.set({ time: new Date() });
      }, 1000 );
    },
    
    onteardown () {
      clearInterval( this.interval );
    }
  };
</script>