https://github.com/perty/elm-clock

A clock using Elm and SVG.
https://github.com/perty/elm-clock

Last synced: 11 months ago
JSON representation

A clock using Elm and SVG.

• Host: GitHub
• URL: https://github.com/perty/elm-clock
• Owner: perty
• Created: 2019-11-17T14:53:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-10-06T09:15:30.000Z (over 3 years ago)
• Last Synced: 2025-03-12T07:44:32.136Z (over 1 year ago)
• Language: Elm
• Size: 56.6 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# elm-clock

An analog clock that adjusts its size. Written in Elm and SVG.

## About

Demonstrates how to get the local time zone and 

using SVG to draw a clock. 

The clock adapts its size to the parent container.

![screen shot](./clock.png)

## Clock face

The function `clockFace` draws a circle and calls

the helper `tickMarks` to mark the perimeter with minute

indicators. 

The clock has its center at (0,0) to make life

easier. It is therefore translated (50,50) which

is dependent on the size being (100,100).

## Hands

The hands have different styles but have

the common problem of calculating the angle. 

The angle is zero at 15 minutes passed so to

calculate the angle, you first reduce by 15 

and multiply 360 (degrees) and then divide

by 60 (minutes).

To draw a hand, it is transformed using the SVG

`transform` function with the `rotate` argument, passing

the angle as a parameter.

The hand is a line from center of the clock and

some circle or polygon, depending on which hand.

## Letters E, L, M

For some reason, these letters appear on the clock face. They are not

of any font, they are polygons.