hilbert-clock/index.html
Christian Lawson-Perfect 2c7badf010 It's a proper clock! The hands fill up to one end, then empty, then it all starts again.
The period is 60 seconds for the small hand, and 60 minutes for the big hand, so it matches a standard clock.
2025-03-17 09:52:21 +00:00

27 lines
No EOL
1.1 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>A thing made by CLP</title>
<script type="module" src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<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(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>
</body>
</html>