function clock(datetime, coords, options) {
options = options || {}
let size = options.size || 640
let color_day = options.color_day || 'white'
let color_night = options.color_night || 'black'
let color_day_ticks = options.color_day_ticks || 'black'
let color_night_ticks = options.color_night_ticks || 'white'
let color_border = options.color_border || '#CCC'
let color_hand_hours = options.color_hand_hours || '#888'
let color_hand_minutes = options.color_hand_minutes || '#333'
let color_hand_seconds = options.color_hand_seconds || 'red'
let sun = suncalc.getTimes(datetime, coords.latitude, coords.longitude)
let sunrise_angle = (new Date(sun.sunrise) - d3.timeDay(datetime)) / 864e5 * 2 * Math.PI
let sunset_angle = (new Date(sun.sunset) - d3.timeDay(datetime)) / 864e5 * 2 * Math.PI
let clip_uid = DOM.uid("clip")
return `<svg width="${size}" height="${size}" viewBox="50 50 500 500" style="display: inline-block;">
<defs>
<clipPath id="${clip_uid.id}">
<path d="${(d3.arc().innerRadius(0).outerRadius(225).startAngle(sunrise_angle).endAngle(sunset_angle))()}"/>
</clipPath>
</defs>
<g transform="translate(300,300)">
<g>
<circle r="225" fill="${color_night}"/>
${ticks(color_night_ticks)}
</g>
<g clip-path="${clip_uid}">
<circle r="225" fill="${color_day}"/>
${ticks(color_day_ticks)}
</g>
<circle r="230" stroke-width="18" fill="none" stroke="${color_border}"/>
<g transform="rotate(${(datetime - d3.timeDay(datetime)) / 864e5 * 360})">
<path d="M-13,47h26l-3,-186h-17z" fill="${color_hand_hours}"/>
</g>
<g transform="rotate(${(datetime - d3.timeHour(datetime)) / 36e5 * 360})">
<path d="M-9,40h18l-3,-220h-12z" fill="${color_hand_minutes}"/>
</g>
<g transform="rotate(${(datetime - d3.timeMinute(datetime)) / 6e4 * 360})">
<line y1="50" y2="-200" stroke="${color_hand_seconds}" stroke-width="4" />
<circle r="7" fill="${color_hand_seconds}" />
</g>
</g>
</svg>`
}