Analog clock 
Borrowed(stole :P) clock from w3school and made as riot tag(component).
In your html you could just do <clock radius="{radius}"><clock> anywhere you like(even multiple times). But you need riot.js for this. See complete example(s) below which also links to runnable codepen (plain javascript).
To understand these attributes better a picture explains better than a thousand words, so I would advise to look at codepen and modify attributes real time to see what happens.
<clock>
radius="{int}"radius in pixels. Canvas will be this big, but clock only 90%.bg_canvas={color}background color canvas outside of clock.bg_clock={color}background color inside of clock.plates_inner_rim={color}background color plates(arrows pointing to time) plus background color rim inside of clock.outer_rimbackgrond color outer rimrim={color}the rest of the rim
How would it look like (animated GIF below)
I Recorded the clock as gif on linux thanks to byzanz
Example plain javascript
You could just copy paste this example. Also available at codepen
Clock webpack live reload :) <!-- Completely modified clock (ugly, but show good properties ;) ) --> <!-- Background transparant --> <!-- standard clock --> <!-- Your copy of riot from cdn for example -->