Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »


0.0.5 • Public • Published

Analog clock ghit.me

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.


  • 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_rim backgrond color outer rim
  • rim={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

<!DOCTYPE html>
    <h1>Clock webpack live reload :)</h1>
    <!-- Completely modified clock (ugly, but show good properties ;) ) -->
    <clock radius="400" bg_canvas="grey" bg_clock="yellow" plates_inner_rim="red" 
        rim="purple" knob="brown" outer_rim="orange">
    <!-- Background transparant -->
    <clock radius="100" bg_canvas="transparant"></clock>
    <!-- standard clock -->
    <!-- Your copy of riot from cdn for example -->
    <script src="js/riot.min.js"></script> 
    <script src="bundle.js"></script> 


npm i analog-clock-riot

DownloadsWeekly Downloads






Last publish


  • avatar