-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.html
183 lines (173 loc) · 6.04 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Solar System</title>
<meta name="description" content="Solar system made using by Three.js" />
<style>
body {
margin: 0;
}
canvas {
position: fixed;
z-index: 5;
inset: 0;
}
/* styles for loader fallback */
@keyframes zoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
.loader-container {
z-index: 100;
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
background-color: black;
}
.stars {
position: absolute;
top: 50%;
left: 50%;
height: 1px;
width: 1px;
background-color: #fff;
border-radius: 50%;
box-shadow: 24vw 9vh 1px 0px #fff, 12vw -24vh 0px 1px #fff,
-45vw -22vh 0px 0px #fff, -37vw -40vh 0px 1px #fff,
29vw 19vh 0px 1px #fff, 4vw -8vh 0px 1px #fff, -5vw 21vh 1px 1px #fff,
-27vw 26vh 1px 1px #fff, -47vw -3vh 1px 1px #fff,
-28vw -30vh 0px 1px #fff, -43vw -27vh 0px 1px #fff,
4vw 22vh 1px 1px #fff, 36vw 23vh 0px 0px #fff, -21vw 24vh 1px 1px #fff,
-16vw 2vh 1px 0px #fff, -16vw -6vh 0px 0px #fff, 5vw 26vh 0px 0px #fff,
-34vw 41vh 0px 0px #fff, 1vw 42vh 1px 1px #fff,
11vw -13vh 1px 1px #fff, 48vw -8vh 1px 0px #fff,
22vw -15vh 0px 0px #fff, 45vw 49vh 0px 0px #fff,
43vw -27vh 1px 1px #fff, 20vw -2vh 0px 0px #fff, 8vw 22vh 0px 1px #fff,
39vw 48vh 1px 1px #fff, -21vw -11vh 0px 1px #fff,
-40vw 45vh 0px 1px #fff, 11vw -30vh 1px 0px #fff,
26vw 30vh 1px 0px #fff, 45vw -29vh 0px 1px #fff,
-2vw 18vh 0px 0px #fff, -29vw -45vh 1px 0px #fff,
-7vw -27vh 1px 1px #fff, 42vw 24vh 0px 0px #fff,
45vw -48vh 1px 0px #fff, -36vw -18vh 0px 0px #fff,
-44vw 13vh 0px 1px #fff, 36vw 16vh 0px 1px #fff,
40vw 24vh 0px 0px #fff, 18vw 11vh 0px 0px #fff,
-15vw -23vh 1px 0px #fff, -24vw 48vh 0px 1px #fff,
27vw -45vh 1px 0px #fff, -2vw -24vh 0px 1px #fff,
-15vw -28vh 0px 0px #fff, -43vw 13vh 1px 0px #fff,
7vw 27vh 1px 0px #fff, 47vw 5vh 0px 0px #fff, -45vw 15vh 1px 1px #fff,
-5vw -28vh 0px 1px #fff, 38vw 25vh 1px 1px #fff,
-39vw -1vh 1px 0px #fff, 5vw 0vh 1px 0px #fff, 49vw 13vh 0px 0px #fff,
48vw 10vh 0px 1px #fff, 19vw -28vh 0px 0px #fff, 4vw 7vh 0px 0px #fff,
21vw 21vh 1px 1px #fff, -15vw -15vh 0px 1px #fff,
-6vw -42vh 1px 0px #fff, -15vw 48vh 1px 1px #fff,
-23vw 25vh 1px 1px #fff, -48vw 25vh 0px 1px #fff,
-31vw -19vh 0px 1px #fff, 4vw 37vh 1px 1px #fff,
-43vw 28vh 0px 0px #fff, 3vw -25vh 0px 1px #fff,
-39vw 14vh 0px 1px #fff, -40vw 31vh 0px 1px #fff,
35vw -36vh 1px 1px #fff, 16vw 49vh 0px 0px #fff, 6vw 39vh 0px 0px #fff,
3vw -35vh 0px 1px #fff, -44vw -2vh 1px 0px #fff,
-6vw 21vh 1px 0px #fff, 48vw 9vh 1px 1px #fff, -43vw 30vh 1px 1px #fff,
29vw -12vh 1px 1px #fff, -48vw 13vh 1px 0px #fff,
-42vw 32vh 1px 1px #fff, 34vw 15vh 1px 1px #fff,
29vw -37vh 1px 1px #fff, 28vw 2vh 0px 0px #fff;
animation: zoom 16s alternate infinite;
}
.loader-hidden {
opacity: 0;
pointer-events: none;
transition: all 1000ms ease-in-out;
}
@keyframes hexagon-intro-anim {
0% {
stroke-dasharray: 600;
stroke-dashoffset: 600;
}
99% {
stroke-dasharray: 570;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 600;
stroke-dashoffset: 0;
}
}
.logo {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hexagon {
stroke-linecap: round;
stroke-dasharray: 600;
animation: hexagon-intro-anim 1000ms ease-in-out forwards;
}
@keyframes letter-intro-anim {
0% {
opacity: 0;
animation: scale(0.5) translate(95, 50) rotate(180 5.85 45.5);
}
100% {
opacity: 1;
animation: scale(1) translate(95, 50) rotate(180 5.85 45.5);
}
}
.letter {
opacity: 0;
transform: scale(0.5) translate(95, 50) rotate(180 5.85 45.5);
animation: letter-intro-anim 1000ms ease-in-out forwards;
animation-delay: 1000ms;
}
</style>
</head>
<body>
<div id="loader" class="loader-container">
<div class="stars"></div>
<svg
id="logo"
role="img"
width="64"
height="64"
class="logo"
version="1.1"
aria-hidden="true"
viewBox="-5 -5 210 210"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<polygon
class="hexagon"
stroke-width="10"
fill="rgb(0, 0, 0)"
stroke="rgb(255, 232, 31)"
points="52,16.8615612366939 148,16.8615612366939 196,100 148,183.138438763306 52,183.138438763306 4,100"
></polygon>
<path
id="letter-m"
class="letter"
transform="translate(58, 55)"
fill="rgb(255, 232, 31)"
stroke="rgb(255, 232, 31)"
d="M 11.7 91 L 0 91 L 0 0 L 17.29 0 L 42.51 57.59 L 67.34 0 L 85.02 0 L 85.02 91 L 72.67 91 L 72.67 15.73 L 48.36 70.46 L 36.14 70.46 L 11.7 15.73 L 11.7 91 Z"
></path>
</svg>
</div>
<script>
window.addEventListener("load", () => {
const loader = document.getElementById("loader");
setTimeout(() => loader.classList.add("loader-hidden"), 3000);
setTimeout(() => loader.remove(), 4000);
});
</script>
<script defer type="module" src="/src/index.js"></script>
</body>
</html>