Clock-component.ract

<div class='rvc-clock-demo'> <!-- so the SVG keeps its aspect ratio -->
    <svg viewBox='0 0 100 100'>

        <!-- first create a group and move it to 50,50 so
             all co-ords are relative to the center -->
        <g transform='translate(50,50)'>
            <circle class='clock-face' r='48'/>

            <!-- markers every minute (major markers every 5 minutes) -->
            {{#minor:i}}
                <line class='minor' y1='42' y2='45' transform='rotate( {{
                360 * i / minor.length
                }} )'/>
            {{/minor}}

            {{#major:i}}
                <line class='major' y1='35' y2='45' transform='rotate( {{
                360 * i / major.length
                }} )'/>
            {{/major}}

            <!-- hour hand -->
            <line class='hour' y1='2' y2='-20' transform='rotate( {{
            30 * date.getHours() +
            date.getMinutes() / 2
            }} )'/>

            <!-- minute hand -->
            <line class='minute' y1='4' y2='-30' transform='rotate( {{
            6 * date.getMinutes() +
            date.getSeconds() / 10
            }} )'/>

            <!-- second hand -->
            <g transform='rotate( {{
            6 * date.getSeconds()
            }} )'>
                <line class='second' y1='10' y2='-38'/>
                <line class='second-counterweight' y1='10' y2='2'/>
            </g>

        </g>

    </svg>
</div>


<style>
    .rvc-clock-demo {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
    }

    .rvc-clock-demo svg {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .rvc-clock-demo .clock-face {
        stroke: #333;
        fill: white;
    }

    .rvc-clock-demo .minor {
        stroke: #999;
        stroke-width: 0.5;
    }

    .rvc-clock-demo .major {
        stroke: #333;
        stroke-width: 1;
    }

    .rvc-clock-demo .hour {
        stroke: #333;
    }

    .rvc-clock-demo .minute {
        stroke: #666;
    }

    .rvc-clock-demo .second, .second-counterweight {
        stroke: rgb(180,0,0);
    }

    .rvc-clock-demo .second-counterweight {
        stroke-width: 3;
    }
</style>

<script>
    component.exports = {
        data: {
            minor: new Array( 60 ),
            major: new Array( 12 )
        },

        init: function () {
            var self = this, interval;

            this.set( 'date', new Date() );

            interval = setInterval( function () {
                self.set( 'date', new Date() );
            });

            this.on( 'teardown', function () {
                clearInterval( interval );
            });
        }
    };
</script>