Clock

clock.markdown

Clock

A Pen by Christian Juth on CodePen.

License.

index.html

<!-- Inspired by http://dribbble.com/shots/1015985 -->

<svg width="795px" height="762px" viewBox="667 -77 795 762" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs>
        <circle id="path-1" cx="138.5" cy="138.5" r="138.5"></circle>
        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-20" y="-20" width="317" height="317">
            <rect x="-20" y="-20" width="317" height="317" fill="white"></rect>
            <use xlink:href="#path-1" fill="black"></use>
        </mask>
        <linearGradient x1="69.0858552%" y1="84.877603%" x2="21.9534838%" y2="29.9577108%" id="linearGradient-3">
            <stop stop-color="#000000" stop-opacity="0" offset="0%"></stop>
            <stop stop-color="#000000" stop-opacity="0.0881170743" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="clock" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(668.000000, -77.000000)">
        <rect id="Rectangle" fill="#30BF6D" x="0" y="0" width="762" height="762"></rect>
        <g id="clock-face" transform="translate(242.000000, 243.000000)">
            <g id="outline">
                <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
                <use stroke="#2EF482" mask="url(#mask-2)" stroke-width="40" xlink:href="#path-1"></use>
            </g>
            <circle id="middle" fill="#000000" cx="139" cy="138" r="7"></circle>
            <g id="markers" fill="#000000">
                <g id="Rectangle-3">
                    <path d="M261,127.619375 C261,127.619375 262.939206,127.5 265.626122,127.5 C268.313039,127.5 271,127.619375 271,127.619375 L271,147.500235 C271,148.604675 270.112567,149.5 269.000385,149.5 L262.999615,149.5 C261.895258,149.5 261,148.601461 261,147.500235 L261,127.619375 Z" transform="translate(266.000000, 138.500000) rotate(-270.000000) translate(-266.000000, -138.500000) "></path>
                    <path d="M6,128.119375 C6,128.119375 7.93920553,128 10.6261223,128 C13.313039,128 16,128.119375 16,128.119375 L16,148.000235 C16,149.104675 15.1125667,150 14.000385,150 L7.99961498,150 C6.89525812,150 6,149.101461 6,148.000235 L6,128.119375 Z" transform="translate(11.000000, 139.000000) scale(-1, 1) rotate(-270.000000) translate(-11.000000, -139.000000) "></path>
                    <path d="M134.5,255.119375 C134.5,255.119375 136.439206,255 139.126122,255 C141.813039,255 144.5,255.119375 144.5,255.119375 L144.5,275.000235 C144.5,276.104675 143.612567,277 142.500385,277 L136.499615,277 C135.395258,277 134.5,276.101461 134.5,275.000235 L134.5,255.119375 Z" transform="translate(139.500000, 266.000000) rotate(-540.000000) translate(-139.500000, -266.000000) "></path>
                    <path d="M134,0.119374991 C134,0.119374991 135.939206,7.06032455e-16 138.626122,0 C141.313039,0 144,0.119374991 144,0.119374991 L144,20.0002354 C144,21.1046749 143.112567,22 142.000385,22 L135.999615,22 C134.895258,22 134,21.1014611 134,20.0002354 L134,0.119374991 Z" transform="translate(139.000000, 11.000000) scale(-1, -1) rotate(-540.000000) translate(-139.000000, -11.000000) "></path>
                </g>
            </g>
        </g>
        <path d="M381,381.158844 L381,270" id="minute" stroke="#000000" stroke-width="6"></path>
        <path d="M381,381 L381,306.011187" id="hour" stroke="#000000" stroke-width="4"></path>
        <path d="M381,381 L381,284.814122" id="second" stroke="#FF0000" stroke-width="2"></path>
        <path d="M761,519.508389 L761,671.883613 L676.965109,762 L556.488584,762 L272,496.710104 L488.073167,265 L761,519.508389 Z" id="Combined-Shape" fill="url(#linearGradient-3)"></path>
    </g>
</svg>

<a href="http://www.christianjuth.com" target="_blank" class="brand">Christian Juth</a>

script.coffeescript

class Clock
  constructor: (options)->
    { 
      @minute,
      @hour,
      @second,
      @refreshRate = 1000
    } = options
    @start()
    
  start: ->
    $this = this
    @checkTime()
    @interval = setInterval(->
      $this.checkTime()
    , @refreshRate)

  stop: -> 
    clearInterval(@interval)
    
  checkTime: ->
    d = new Date()
    h = (d.getHours()+11)%12+1
    m = d.getMinutes()
    s = d.getSeconds()
    ms = d.getMilliseconds()
    @set(h,m,s,ms)
  
  set: (h,m,s,ms)->
    sDeg = (6*s)+(ms/166)
    if @second
      TweenMax.to(@second, 0, {
        rotation: sDeg,
        transformOrigin: "50% 100%"
      })
    mDeg = (6*m)+(sDeg/60)
    if @minute
      TweenMax.to(@minute, 0, {
        rotation: mDeg,
        transformOrigin: "50% 100%"
  	  })
    hDeg = (30*h)+(mDeg/60)
    if @hour
      TweenMax.to(@hour, 0, {
        rotation: hDeg,
        transformOrigin: "50% 100%"
      })
    
   
    
# start clock
clock = new Clock({
  hour: "#hour", 
  minute: "#minute",
  second: "#second",
  refreshRate: 50 #milliseconds
})
    

scripts

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

style.css

html,
body{
  height: 100%;
  margin: 0;
  padding: 0;  
  overflow: visible;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: #30BF6D;
}

svg{
  width: 60vw;
  overflow: visible;
}

.brand,
.brand:visited{
  position: absolute;
  padding: 0;
  margin: 0;
  bottom: 5px;
  right: 10px;
  text-decoration: none;
  color: rgba(0,0,0,0.3);
  font-size: 14px;
  font-family: 'Pacifico', cursive;
}

.brand:hover{
  text-decoration: underline;
}

styles

<link href="//fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" />