-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
51 lines (43 loc) · 1.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="ClockScript.js" type="module"></script>
<title>HTML-SVG</title>
</head>
<body>
<svg id="clock" viewBox="0 0 100 100" width="250" height="250">
<circle class="face" cx="50" cy="50" r="45"/>
<g class="ticks">
<line x1="50.00" y1="05.00" x2="50.00" y2="10.00"/>
<line x1="72.50" y1="11.03" x2="70.00" y2="15.36"/>
<line x1="88.97" y1="27.50" x2="84.64" y2="30.00"/>
<line x1="95.00" y1="50.00" x2="90.00" y2="50.00"/>
<line x1="88.97" y1="72.50" x2="84.64" y2="70.00"/>
<line x1="72.50" y1="88.97" x2="70.00" y2="84.64"/>
<line x1="50.00" y1="95.00" x2="50.00" y2="90.00"/>
<line x1="27.50" y1="88.97" x2="30.00" y2="84.64"/>
<line x1="11.03" y1="72.50" x2="15.00" y2="70.00"/>
<line x1="5.000" y1="50.00" x2="10.36" y2="50.00"/>
<line x1="11.03" y1="27.50" x2="15.00" y2="30.00"/>
<line x1="27.50" y1="11.03" x2="30.00" y2="15.36"/>
</g>
<g class="numbers">
<text x="50" y="22">12</text>
<text x="84" y="55">3</text>
<text x="50" y="88">6</text>
<text x="16" y="55">9</text>
</g>
<g class="hourhand">
<line class="hourhand" x1="50" y1="50" x2="50" y2="28"></line>
</g>
<g class="minutehand">
<line class="minutehand" x1="50" y1="50" x2="50" y2="20"></line>
</g>
<g class="secondhand">
<line class="secondhand" x1="50" y1="50" x2="50" y2="15"></line>
</g>
</svg>
</body>