Time.elm

import Html exposing (Html)
import Html.App as Html
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Time exposing (Time, second)



main =
  Html.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }



-- MODEL


type alias Model = Time


init : (Model, Cmd Msg)
init =
  (0, Cmd.none)



-- UPDATE


type Msg
  = Tick Time

update : Msg -> Model -> (Model, Cmd Msg)
update action model =
  case action of
    Tick newSecond ->
      (newSecond, Cmd.none)



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  Time.every second Tick



-- VIEW
inDays : Time -> Float
inDays time =
  (Time.inMilliseconds time) / 86400000


drawHand : Float -> String -> Float -> Html msg
drawHand t strokeColour lineLength =
  let
    angle =
      turns t

    handX =
      toString (50 + lineLength * cos angle)

    handY =
      toString (50 + lineLength * sin angle)
  in
  line [ x1 "50", y1 "50", x2 handX, y2 handY, stroke strokeColour ] []


view : Model -> Html Msg
view model =
  svg [ viewBox "0 0 100 100", width "300px" ]
    [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] []
    , drawHand (Time.inMinutes model) "#023963" 40
    , drawHand (Time.inHours model) "#FF0000" 20
    , drawHand (inDays model) "#FFFF00" 10
    ]