Analogue clock by PaperJS

Code

var amount = 12
var length = 20
var group = new Group()

var handWidth = 5
var handLength = 110

var circle = new Path.Circle({
    radius: 130,
    strokeColor: 'black',
    strokeWidth: 5,
    position: view.center
})

var center = new Path.Circle({
    radius: 7,
    fillColor: 'black',
    position: view.center
})

for (var i = 0; i < amount; i++){
    var line = new Path.Line({
        from: [0, 0],
        to: [length, 0],
        strokeColor: 'black',
        strokeWidth: 5,
        position: view.center,
        parent: group,
        strokeCap: 'round'
    })
    line.rotate(360 / amount * i, view.center + [100, 0])
}

group.position = view.center


function createHand(width, strokeWidth, color){

    var hand = new Path.Line({
        from: [0, 0],
        to: [0, width],
        strokeColor: color,
        strokeWidth: strokeWidth,
        position: view.center,
        strokeCap: 'round'
    })

    hand.translate([0, -width/2])
    hand.pivot = view.center

    return hand
}

var hoursHand = createHand(60, 10, 'black')
var minutesHand = createHand(100, 5, 'black')
var secondsHand = createHand(120, 3, 'orange')

function initialState(){
    var now = new Date()
    var hours = now.getHours()
    var minutes = now.getMinutes()
    var seconds = now.getSeconds()

    var hoursAngle = 360 / 12 * hours
    hoursHand.rotation = hoursAngle

    var minutesAngle = 360 / 60 * minutes
    minutesHand.rotation = minutesAngle

    var secondsAngle = 360 / 60 * seconds
    secondsHand.rotation = secondsAngle
}

var currentSeconds;

initialState()


var seconds, minutes;

function updateSeconds(){
    seconds = new Date().getSeconds()
    var angle = 360 / 60
    secondsHand.rotation = angle

    minutes = new Date().getMinutes()

    if (seconds == 0){
        minutesHand.rotation = angle
    }

    if (minutes == 0){
        hoursHand.rotation = angle
    }
    
}
setInterval(updateSeconds, 1000)

center.bringToFront()