-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
266 lines (248 loc) · 13.2 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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Endless Night Ride!</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100">
<defs>
<linearGradient id="darkGrad" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="#000" />
<stop offset="95%" stop-color="#444" />
</linearGradient>
<linearGradient id="lightGrad">
<stop offset="50%" stop-color="#000" />
<stop offset="100%" stop-color="#fff" />
</linearGradient>
<linearGradient id="skyGrad" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="rgba(0,0,0,0)" />
<stop offset="50%" stop-color="rgba(0,0,0,0)" stop-opacity="0" />
<stop offset="95%" stop-color="#fff" />
</linearGradient>
<linearGradient id="skyGrad2" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="rgba(0,0,0,0)" stop-opacity="0" />
<stop offset="100%" stop-color="#fff" stop-opacity="0.8" />
</linearGradient>
<linearGradient id="grassGrad" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="darkgreen" />
<stop offset="70%" stop-color="green" />
</linearGradient>
<linearGradient id="grassGradFront" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="orange" />
<stop offset="60%" stop-color="#c6e24d" />
</linearGradient>
<linearGradient id="gravelGrad" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#c6e24d" />
<stop offset="60%" stop-color="orange" />
</linearGradient>
<linearGradient id="windowGrad" gradientTransform="rotate(-8)">
<stop offset="0%" stop-color="rgba(20,50,50,0.8)" />
<stop offset="15%" stop-color="rgba(20,50,50,0.8)" />
<stop offset="50%" stop-color="rgba(20,50,50,0.95)" />
</linearGradient>
<linearGradient id="tireGrad">
<stop offset="0%" stop-color="#000" />
<stop offset="50%" stop-color="#444" />
<stop offset="100%" stop-color="#000" />
</linearGradient>
<filter id="blur1" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.8" />
</filter>
<filter id="blur2" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<filter id="blur3" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.7" />
</filter>
<filter id="blur4" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.3" />
</filter>
<mask id="light">
<rect x="0" y="0" width="100%" height="100%" fill="#fff" />
<path id="lightPath" d="M 228.3 58 L 450 53 v30 L 228.3 64.6z" fill="url(#lightGrad)" />
</mask>
</defs>
<g opacity="1">
<!-- sky -->
<rect id="sky" height="50" width="100%" fill="url('#skyGrad')" y="0" />
<!-- mountains -->
<g id="mountain1" filter="url(#blur2)">
<!-- mountain 1 -->
<path id="mtn1" d="M 56 50 L 140 50 L 111 19 L 100 15 L 90 17 L 79 25 Z" fill="silver" />
<!-- mountain 2 -->
<path id="mtn2" d="M 17 50 L 90 50 L 78 23 L 50 17 L 34 27 Z" fill="lightgrey" filter="brightness(80%)" />
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="370 0" to="-150 0" dur="20s" begin="-2s" repeatCount="indefinite" />
</g>
<g id="mountain2" filter="url(#blur1)">
<path id="mtn3" d="M 118 50 L 60 50 L 72 33 L 83 27 L 102 30 L 114 43 Z" fill="lightgrey" filter="brightness(90%)" />
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="370 0" to="-150 0" dur="20.1s" begin="-12s" repeatCount="indefinite" />
</g>
<g id="mountain3" transform="scale(0.7 0.7) translate(180 25)" filter="url(#blur1)">
<use href="#mtn3" filter="brightness(78%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="320 0" to="-270 0" dur="14.1s" begin="-3s" repeatCount="indefinite" />
</use>
</g>
<!-- sky gradient overlay -->
<rect id="skyOverlay" height="50" width="100%" fill="url('#skyGrad2')" y="0" />
<!-- top gravel -->
<rect height="7" width="100%" fill="url('#gravelGrad')" y="60.5" />
<!-- top grass -->
<rect height="10.5" width="100%" fill="url('#grassGrad')" y="50" />
<!-- trees -->
<g filter="url(#blur3)">
<g id="treeGroup1">
<g id="tree1">
<!-- trunk -->
<rect height="5" width="2" x="99" y="45" fill="brown" />
<!-- tree branch -->
<path id="t1" d="M 92 46 L 108 46 L 100 25 Z" fill="forestgreen" />
</g>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="12s" repeatCount="indefinite" />
</g>
<use href="#tree1" filter="brightness(75%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="12s" begin="-5s" repeatCount="indefinite" />
</use>
<g transform="translate(0 1)">
<use href="#tree1" filter="brightness(90%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="12s" begin="-7s" repeatCount="indefinite" />
</use>
</g>
<g transform="translate(0 1.5)">
<use href="#tree1" filter="brightness(110%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="12.1s" begin="-1s" repeatCount="indefinite" />
</use>
</g>
<use href="#tree1" filter="brightness(112%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="12.1s" begin="-11s" repeatCount="indefinite" />
</use>
<g transform="scale(1.1 1.1) translate(0 0)">
<use href="#tree1" filter="brightness(105%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="13.1s" begin="-12.4s" repeatCount="indefinite" />
</use>
<use href="#tree1" filter="brightness(115%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="13.1s" begin="-7.7s" repeatCount="indefinite" />
</use>
</g>
<g transform="scale(0.8 0.8) translate(0 20)">
<use href="#tree1" filter="brightness(111%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="9.1s" begin="-4.4s" repeatCount="indefinite" />
</use>
<use href="#tree1" filter="brightness(95%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="9.1s" begin="-11.4s" repeatCount="indefinite" />
</use>
</g>
</g>
<!-- grass base -->
<rect height="20" width="100%" fill="url('#grassGradFront')" y="80" />
<!-- road -->
<g>
<rect height="10" width="100%" fill="#92918f" y="70" />
<line x1="0" x2="600" y1="75" y2="75" stroke="#fff" stroke-width="0.75" stroke-dasharray="8 6">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="-196 0" dur="0.9s" repeatCount="indefinite" />
</line>
</g>
<!-- gutter -->
<g>
<rect height="2" width="100%" fill="#716662" y="68" />
<rect height="0.5" width="100%" fill="tan" y="67.5" />
</g>
<!-- brush -->
<g>
<path filter="url(#blur4)" id="brush1" d="M 100 63 Q 101 60 97 58 Q 100 60 100 63 Q 101 58 107 54 Q 101 60 100 63 Q 102 58 107 58 Q 102 60 100 63" fill="orange" />
<path filter="url(#blur4)" id="brush2" d="M 70 63 Q 68 60 66 59 Q 70 60 70 63 Q 71 58 67 55 Q 70 60 70 63 Q 72 58 75 58 Q 72 60 70 63 Q 72 59 71 55 Q 71 57 70 63" fill="orange" />
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="330 0" to="-106 0" dur="2.2s" repeatCount="indefinite" />
</g>
<use href="#brush1" filter="brightness(120%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="330 0" to="-106 0" dur="2.22s" begin="-1.9s" repeatCount="indefinite" />
</use>
<use href="#brush1" filter="brightness(90%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="330 0" to="-106 0" dur="2.25s" begin="-0.8s" repeatCount="indefinite" />
</use>
<use href="#brush2" filter="brightness(90%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="330 0" to="-106 0" dur="2.29s" begin="-0.67s" repeatCount="indefinite" />
</use>
<g>
<path id="grass1" d="M 100 100 Q 97 97 92 95 Q 100 96 100 100 Q 101 92 94 90 Q 100 95 100 100 Q 103 92 107 95 Q 103 95 100 100 Q 103 94 100 88 Q 101 91 100 100 M 200 100 Q 197 97 192 95 Q 200 96 200 100 Q 201 92 194 90 Q 200 95 200 100 Q 203 92 207 95 Q 203 95 200 100 Q 203 94 202 90 Q 201 91 200 100" fill="green" />
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="420 0" to="-200 0" dur="1.5s" begin="-1s" repeatCount="indefinite" />
</g>
<use href="#grass1" filter="brightness(80%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="420 0" to="-200 0" dur="1.6s" begin="-2s" repeatCount="indefinite" />
</use>
<use href="#grass1" filter="brightness(90%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="420 0" to="-200 0" dur="1.55s" begin="-1.5s" repeatCount="indefinite" />
</use>
<g transform="scale(1.2 1.2) translate(-50 -16)">
<use href="#grass1" filter="brightness(120%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="420 0" to="-200 0" dur="1.8s" begin="-.33s" repeatCount="indefinite" />
</use>
<use href="#grass1">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="420 0" to="-200 0" dur="1.8s" begin="-1.33s" repeatCount="indefinite" />
</use>
</g>
<g id="car" class="cybertruck" stroke="#222" stroke-width="0.2">
<ellipse cx="177" cy="77" rx="50" ry="4.5" fill="#000" filter="url(#blur2)" />
<!-- far tires -->
<circle fill="#000" cx="150" cy="69" r="9" />
<circle fill="#000" cx="210" cy="69" r="9" />
<!-- undercarriage -->
<path fill="#000" d="M 223.8 68.9 l -19.3 2 h -64.6 l -3.7 -1.3 l 0.5 -5 l 4.3 -6.1 l 10.9 0 l 5.1 6.8 l 0.5 0.7 l 0.3 2.3 h 47 l 0.3 -2.2 l 4.7 -7 l 10.3 0.4 l 3.7 5.3 z" />
<!-- trim -->
<path fill="#111" d="M 228 64.7 l -4.2 0.1 l -3.7 -5.3 l -10.3 -0.4 l -4.7 7 l -0.3 2.2 h -47 l -0.3 -2.3 l -5.6 -7.5 h -10.9 l -4.3 6.1 l -7.9 -0.6 l 0 -0.9 l 6.5 0.5 l 4.7 -6.9 l 13 0.2 l 5.8 8.4 l 44.3 0.9 l 5.6 -8.7 l 12.1 0.4 l 4.2 6.3 l 3 -0.2 z" />
<!-- bumpers -->
<path fill="#333" d="M 227.4 68 l -3.6 1 v -4.2 l 4.6 -0.1 l 0 1.6 z" />
<path fill="#222" d="M 204.5 70.9 h -47.3 l -0.2 -5.6 l 0.5 0.7 l 0.3 2.3 h 47 z" />
<path fill="#333" d="M 136.2 69.8 l -9.4 -3.5 l -0.3 -2 l 0.3 -0.3 l 2 0 l 7.9 0.6 z" />
<!-- main body -->
<g class="carBody">
<path fill="#666" d="M 225 57 l -99.6 -5.6 l 1.6 11.6 l 8.3 0.6 l 4.7 -6.9 l 13 0.2 l 5.8 8.4 l 44.3 0.9 l 5.6 -8.7 l 12.1 0.4 l 4.2 6.3 z" />
<path fill="#555" d="M 225 64.2 l 3.2 -0.2 l 0.3 -5.4 l -3.5 -0.9 z" />
<path fill="#999" d="M 228.2 57.8 l -42.1 -14.2 l -60.7 7.8 l 99.6 5.6 l 0 0.2 l 3.2 0.8 z" />
</g>
<!-- windows -->
<path fill="#222" d="M 214.5 54.5 l -51.2 -3.5 l 0.3 -3.9 l 22.4 -2.5 z" />
<g fill="#333">
<path d="M 212.4 54.1 l -8.8 -0.6 l -1 -2.8 z" />
<path d="M 199.7 53.2 l -16 -1.1 l -1.8 -6.7 l 4.1 -0.4 l 12.5 4.3 z" />
<path d="M 180.7 51.8 l -15.3 -1 l -0.2 -3.5 l 14.6 -1.6 z" />
</g>
<!--headlight-->
<path fill="#ff0" d="M 228.3 58.6 l -3.3 -0.9 v -0.5 l 3.3 0.8 z" />
<!-- door lines -->
<g fill="none" stroke="#000" stroke-width="0.2">
<path d="M 163.5 68.3 l 0 -2.9 l -0.6 -11.9 l 0.4 -2.5" />
<path d="M 183.5 68.4 l 0 -2.6 l -0.5 -11.2 l -0.3 -2.2" />
<path d="M 202.9 68.3 l 0.2 -2.1 l 0.1 -10.4 l -0.4 -2.1" />
<!-- door handles -->
<path d="M 188.6 55.8 l -4.1 -0.1 l 0 -0.8 l 4 0.2 z" />
<path d="M 168.4 54.7 l -4 -0.1 l -0.1 -0.8 l 4.1 0.2 z" />
</g>
<!-- near wheels -->
<!-- front -->
<g class="frontWheel">
<circle fill="#111" cx="214.5" cy="70" r="9" />
<circle fill="#222" cx="214.5" cy="70" r="6.5" />
<circle fill="none" cx="214.5" cy="70" r="4" stroke-width="4" stroke="#333" stroke-dasharray="0 1.75 0" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 214.5 70; 360 214.5 70" dur="100ms" begin="0s" repeatCount="indefinite" />
</g>
<!-- rear -->
<g class="rearWheel">
<circle fill="#111" cx="146.5" cy="70" r="9" />
<circle fill="#222" cx="146.5" cy="70" r="6.5" />
<circle fill="none" cx="146.5" cy="70" r="4" stroke-width="4" stroke="#333" stroke-dasharray="0 1.75 0" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 146.5 70; 360 146.5 70" dur="100ms" begin="0s" repeatCount="indefinite" />
</g>
</g>
<!-- dark gradient overlay -->
<rect id="darkOverlay" height="200%" width="200%" fill="url('#darkGrad')" opacity="0.7" mask="url(#light)" />
<g id="lights">
<ellipse cx="126" cy="52.2" rx="1" ry="1.5" fill="#f00" filter="url(#blur1)" />
<ellipse cx="226.5" cy="58" rx="3" ry="1" fill="#fff" filter="url(#blur1)" />
</g>
</svg>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>