mirror of
https://github.com/meteor/meteor.git
synced 2026-05-02 03:01:46 -04:00
31 lines
1.0 KiB
HTML
31 lines
1.0 KiB
HTML
<head>
|
|
<title>SVG Clock</title>
|
|
</head>
|
|
|
|
<body>
|
|
{{> clock}}
|
|
</body>
|
|
|
|
<template name="clock">
|
|
<div id="clock">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-110 -110 220 220">
|
|
<g>
|
|
<circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="0" cy="0" r="100"/>
|
|
{{#each hours}}
|
|
{{#with hourData}}
|
|
<line id="hour{{i}}" {{radial degrees 0.9 1}} />
|
|
{{/with}}
|
|
{{/each}}
|
|
</g>
|
|
<g>
|
|
{{#with handData}}
|
|
<line {{radial hourDegrees 0 0.55}} style="stroke-width: 6px; stroke: green;" id="hourhand"/>
|
|
<line {{radial minuteDegrees 0 0.85}} style="stroke-width: 4px; stroke: blue;" id="minutehand"/>
|
|
<line {{radial secondDegrees 0 0.95}} style="stroke-width: 2px; stroke: red;" id="secondhand"/>
|
|
{{/with}}
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<p>Adapted from David Basoko's <a href="https://github.com/remy/html5demos/blob/master/demos/svg-clock.html">SVG clock demo</a>.</p>
|
|
</template>
|