mirror of
https://github.com/meteor/meteor.git
synced 2026-05-02 03:01:46 -04:00
38 lines
1000 B
HTML
38 lines
1000 B
HTML
<head>
|
|
<title>SVG Clock Demo</title>
|
|
</head>
|
|
|
|
<body>
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
width="350" height="350"
|
|
viewBox="-110 -110 220 220"
|
|
style="display: block; margin: 0 auto;">
|
|
|
|
<!-- bounding circle -->
|
|
<circle style="stroke: black; fill: #eee;"
|
|
cx="0" cy="0" r="100"/>
|
|
|
|
<!-- hour, minute and second hands -->
|
|
{{#with handData}}
|
|
<line {{radial hourDegrees 0 .55}}
|
|
style="stroke-width: 6px;
|
|
stroke: green;" />
|
|
<line {{radial minuteDegrees 0 .85}}
|
|
style="stroke-width: 4px;
|
|
stroke: blue;" />
|
|
<line {{radial secondDegrees 0 .95}}
|
|
style="stroke-width: 2px;
|
|
stroke: red;" />
|
|
{{/with}}
|
|
|
|
<!-- tick marks -->
|
|
{{#each hours}}
|
|
<line {{radial degrees 0.9 1}}
|
|
style="stroke-width: 3px;
|
|
stroke: black;" />
|
|
{{/each}}
|
|
</svg>
|
|
</body>
|
|
|
|
<!-- Adapted from David Basoko's SVG clock demo -->
|