-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
74 lines (62 loc) · 4.78 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<title>Nazareth Knot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { padding: 0; margin: 0; }
body { background: #fff; width: 100%; height: 100%; font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif; text-align: center; }
body, h1 { font-weight: 100; }
a { opacity: 0.7; }
#content { position: absolute; bottom: 10px; right: 10px; color: #999; text-align: left; }
svg { max-height: 100%; max-width: 100%; }
</style>
<div id="content">
<h1>Nazareth Knot</h1>
<p>By <a href="http://bernhardhaeussner.de">Bernhard Häussner</a>, May 2016.<br/>Code on <a href="https://github.com/bxt/Nazareth-Knot">GitHub</a>.</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:lang="en" viewBox="-250 -250 500 500" id="knot">
<defs>
<style>
/* .bottom { opacity: 0.6; } */
.top, .bottom { stroke-width: 15px; fill: none; }
.a { stroke: #999; }
.b { stroke: #f90; }
.d, .e { stroke: #408; }
.c, .f { stroke: #090; }
.white { stroke-width: 20px; fill: none; stroke: #fff; }
.a.top, .b.top { stroke-dasharray: 40,110,40,35,55,55,30,83; stroke-dashoffset: -20; }
.c.top { stroke-dasharray: 64,126,34.55,43; stroke-dashoffset: -29; }
.a.top.white, .b.top.white { stroke-dasharray: 38,112,38,37,53,57,28,85; stroke-dashoffset: -21; }
.c.top.white { stroke-dasharray: 62,128,32.55,45; stroke-dashoffset: -30; }
.d.top { stroke-dasharray: 25,133; }
.d.top.white { stroke-dasharray: 23,135; stroke-dashoffset: -1; }
.e.top { stroke-dasharray: 29,94; stroke-dashoffset: -56; }
.e.top.white { stroke-dasharray: 27,96; stroke-dashoffset: -57; }
</style>
<path id="path-a" d="M -109.078 122.936 L -80 193.137 L -9.799 164.059 L -122.936 -109.078 L -193.137 -80 L -164.059 -9.799 L 109.078 -122.936 L 80 -193.137 L 9.799 -164.059 L 122.936 109.078 L 193.137 80 L 164.059 9.799 Z" />
<path id="path-b" d="M -164.059 9.799 L -193.137 80 L -122.936 109.078 L -9.799 -164.059 L -80 -193.137 L -109.078 -122.936 L 164.059 -9.799 L 193.137 -80 L 122.936 -109.078 L 9.799 164.059 L 80 193.137 L 109.078 122.936 Z" />
<path id="path-c" d="M -44.579 151.623 A 16.936 16.936 0 1 0 -75.692 138.736 A 50.809 50.809 0 1 1 -138.736 75.692 A 16.936 16.936 0 1 0 -151.623 44.579 A 50.809 50.809 0 1 1 -151.623 -44.579 A 16.936 16.936 0 1 0 -138.736 -75.692 A 50.809 50.809 0 1 1 -75.692 -138.736 A 16.936 16.936 0 1 0 -44.579 -151.623 A 50.809 50.809 0 1 1 44.579 -151.623 A 16.936 16.936 0 1 0 75.692 -138.736 A 50.809 50.809 0 1 1 138.736 -75.692 A 16.936 16.936 0 1 0 151.623 -44.579 A 50.809 50.809 0 1 1 151.623 44.579 A 16.936 16.936 0 1 0 138.736 75.692 A 50.809 50.809 0 1 1 75.692 138.736 A 16.936 16.936 0 1 0 44.579 151.623 A 50.809 50.809 0 1 1 -44.579 151.623 Z" />
<path id="path-d" d="M -44.579 151.623 A 16.936 16.936 0 0 1 -75.692 138.736 A 50.809 50.809 0 0 0 -138.736 75.692 A 16.936 16.936 0 0 1 -151.623 44.579 A 50.809 50.809 0 0 0 -151.623 -44.579 A 16.936 16.936 0 0 1 -138.736 -75.692 A 50.809 50.809 0 0 0 -75.692 -138.736 A 16.936 16.936 0 0 1 -44.579 -151.623 A 50.809 50.809 0 0 0 44.579 -151.623 A 16.936 16.936 0 0 1 75.692 -138.736 A 50.809 50.809 0 0 0 138.736 -75.692 A 16.936 16.936 0 0 1 151.623 -44.579 A 50.809 50.809 0 0 0 151.623 44.579 A 16.936 16.936 0 0 1 138.736 75.692 A 50.809 50.809 0 0 0 75.692 138.736 A 16.936 16.936 0 0 1 44.579 151.623 A 50.809 50.809 0 0 0 -44.579 151.623 Z" />
<path id="path-e" d="M -25.855 -29.041 A 16.936 16.936 0 0 0 -38.817 2.253 L 25.855 29.041 A 16.936 16.936 0 0 0 38.817 -2.253 Z" />
<path id="path-f" d="M 29.041 -25.855 A 16.936 16.936 0 0 0 -2.253 -38.817 L -29.041 25.855 A 16.936 16.936 0 0 0 2.253 38.817 Z" />
</defs>
<use xlink:href="#path-a" class="a bottom" />
<use xlink:href="#path-b" class="b bottom" />
<use xlink:href="#path-c" class="c bottom white" />
<use xlink:href="#path-c" class="c bottom" />
<use xlink:href="#path-d" class="d bottom white" />
<use xlink:href="#path-d" class="d bottom" />
<use xlink:href="#path-c" class="c top white" />
<use xlink:href="#path-c" class="c top" />
<use xlink:href="#path-a" class="a top white" />
<use xlink:href="#path-b" class="b top white" />
<use xlink:href="#path-a" class="a top" />
<use xlink:href="#path-b" class="b top" />
<use xlink:href="#path-d" class="d top white" />
<use xlink:href="#path-d" class="d top" />
<use xlink:href="#path-e" class="e bottom" />
<use xlink:href="#path-f" class="f bottom white" />
<use xlink:href="#path-f" class="f bottom" />
<use xlink:href="#path-e" class="e top white" />
<use xlink:href="#path-e" class="e top" />
</svg>