non-ticking clock for Polymer
Last updated 2 years ago by .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install alfa-clock 
SYNC missed versions from official npm registry.

Published on


Polymer web component to display a clock.

use example:

   <link rel="import" href="alfa-clock.html">

        alfa-clock {float: left;}{
            --seconds-color: red; 
            --ring-css: 6px solid red; 
            --hands-color: darkred; 
            --shadow-color: none; 
            --face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg); 
        alfa-clock.bigger{ --size: 400px; --brand-font: 2em Arial}
    <alfa-clock class="red" clock-brand="red clock"></alfa-clock>
    <alfa-clock class="bigger" clock-brand="bigger clock"></alfa-clock>


variable default descr
--size: 250px; clock diameter
--seconds-color: lime; seconds hand color
--hands-color: white; other hands color
--shadow-color: black; other hands shadow
-ring-css: 2px solid silver; css for a ring around the clock face
--brand-font: 1em Arial, Helvetica, sans-serif; css font for a branding text on clock face
--brand-color: grey; NOTE: SVG filter will change this color
--face-filter: none; to color an SVG face


The clock face is made with SVG image containing numbers for hours.
To change the color of SVG, a CSS filter is applied.
--face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg);
Try to manipulate saturation and hue-rotate to achieve desired color. It is hard, but blame the CSS committee.

Examples of colors:

--face-filter: invert(1); /* black */
--face-filter: invert(.5) sepia(1) saturate(5) hue-rotate(60deg);  /* green */
--face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg); /* red */



Current Tags

  • 1.0.0                                ...           latest (2 years ago)

1 Versions

  • 1.0.0                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 1
Last Month 1
Dependencies (0)
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2017 © |