clp/hilbert-clock
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

It's a proper clock! The hands fill up to one end, then empty, then it all starts again.

Browse source 
The period is 60 seconds for the small hand, and 60 minutes for the big hand, so it matches a standard clock.
This commit is contained in:
Christian Lawson-Perfect 2025-03-17 09:51:42 +00:00
parent 6ddcc2f893
commit 2c7badf010
2 changed files with 23 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -9,17 +9,17 @@
</head>
<body>
<main>
<svg id="board" viewBox="-0.3 -0.3 1.6 1.6">
<svg id="board" viewBox="-0.3 -0.3 1.6 1.6" style="max-height: 100svh">
<defs>
<linearGradient id="dots-gradient">
<stop offset="0%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</linearGradient>
</defs>
<rect x="-100" y="-100" width="200" height="200" fill="hsl(120,30%,50%)"/>
<path id="dots" fill="none" stroke="hsl(240,20%,80%)" stroke-width="0.01" stroke-linejoin="round" stroke-linecap="round"/>
<rect x="-100" y="-100" width="200" height="200" fill="hsl(140,60%,60%)"/>
<path class="curve" fill="none" stroke="hsl(24,50%,10%)" stroke-width="0.01" stroke-linejoin="round" stroke-linecap="square"/>
<path class="curve" fill="none" stroke="hsl(240,50%,50%)" stroke-width="0.01" stroke-linejoin="round" stroke-linecap="square"/>
<path id="dots" fill="none" stroke="hsl(240,20%,90%)" stroke-width="0.01" stroke-linejoin="round" stroke-linecap="round"/>
<text id="debug" fill="white" font-size="0.1"></debug>
</svg>
</main>