[READ-ONLY] Mirror of https://github.com/flo-bit/flo-bit.github.io. my personal website, w/ astro, svelte, tailwind, typescript, threlte
flo-bit.dev/
portfolio
portfolio-website
svelte
sveltekit
tailwind
threejs
threlte
typescript
safari svg path fix
+47
-310
+21
src/lib/3D/Planet.svelte
+21
src/lib/3D/Planet.svelte
···
1
+
<script lang="ts">
2
+
import { T } from "@threlte/core";
3
+
import { Planet } from "./worlds/planet";
4
+
5
+
import { useSuspense } from '@threlte/extras'
6
+
const suspend = useSuspense()
7
+
8
+
let presets = ['forest', 'beach', 'snowForest'];
9
+
10
+
let planet = new Planet({ preset: presets[Math.floor(Math.random() * presets.length)] });
11
+
let planetMesh = suspend(planet.create());
12
+
13
+
export const redo = () => {
14
+
planet = new Planet({ preset: presets[Math.floor(Math.random() * presets.length)] });
15
+
planetMesh = suspend(planet.create());
16
+
}
17
+
</script>
18
+
19
+
{#await planetMesh then mesh}
20
+
<T is={mesh} />
21
+
{/await}
-22
src/lib/3D/PlanetModel.svelte
-22
src/lib/3D/PlanetModel.svelte
···
1
-
<script lang="ts">
2
-
import { T } from "@threlte/core";
3
-
import { Planet } from "./worlds/planet";
4
-
import { onMount } from "svelte";
5
-
6
-
import { useSuspense } from '@threlte/extras'
7
-
const suspend = useSuspense()
8
-
9
-
let presets = ['forest', 'beach', 'snowForest'];
10
-
11
-
let planet = new Planet({ preset: presets[Math.floor(Math.random() * presets.length)] });
12
-
let planetMesh = suspend(planet.create());
13
-
14
-
export const redo = () => {
15
-
planet = new Planet({ preset: presets[Math.floor(Math.random() * presets.length)] });
16
-
planetMesh = suspend(planet.create());
17
-
}
18
-
</script>
19
-
20
-
{#await planetMesh then mesh}
21
-
<T is={mesh} />
22
-
{/await}
-55
src/lib/3D/PlanetModelOld.svelte
-55
src/lib/3D/PlanetModelOld.svelte
···
1
-
<!--
2
-
Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
3
-
Command: npx @threlte/gltf@2.0.1 static/planet.gltf -t -T
4
-
-->
5
-
<script lang="ts">
6
-
import * as THREE from 'three';
7
-
import { Group } from 'three';
8
-
import { T, type Props, type Events, type Slots, forwardEventHandlers } from '@threlte/core';
9
-
import { useGltf } from '@threlte/extras';
10
-
11
-
type $$Props = Props<THREE.Group>;
12
-
type $$Events = Events<THREE.Group>;
13
-
type $$Slots = Slots<THREE.Group> & { fallback: {}; error: { error: any } };
14
-
15
-
export const ref = new Group();
16
-
17
-
type GLTFResult = {
18
-
nodes: {
19
-
mesh_0: THREE.Mesh;
20
-
mesh_1: THREE.Mesh;
21
-
};
22
-
materials: {};
23
-
};
24
-
25
-
const gltf = useGltf<GLTFResult>('/planet-transformed.glb', { useDraco: true });
26
-
27
-
const component = forwardEventHandlers();
28
-
</script>
29
-
30
-
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
31
-
{#await gltf}
32
-
<slot name="fallback" />
33
-
{:then gltf}
34
-
<T.Mesh
35
-
geometry={gltf.nodes.mesh_0.geometry}
36
-
material={gltf.nodes.mesh_0.material}
37
-
material.opacity={1.0}
38
-
material.transparent={false}
39
-
material.flatShading={true}
40
-
material.envMapIntensity={0.3}
41
-
>
42
-
<T.Mesh
43
-
geometry={gltf.nodes.mesh_1.geometry}
44
-
material={gltf.nodes.mesh_1.material}
45
-
material.transparent={true}
46
-
material.flatShading={true}
47
-
material.envMapIntensity={0.3}
48
-
/>
49
-
</T.Mesh>
50
-
{:catch error}
51
-
<slot name="error" {error} />
52
-
{/await}
53
-
54
-
<slot {ref} />
55
-
</T>
+16
-20
src/lib/3D/Scene.svelte
+16
-20
src/lib/3D/Scene.svelte
···
1
1
<script lang="ts">
2
2
import { T, useTask, useThrelte } from '@threlte/core';
3
-
import {
4
-
interactivity,
5
-
OrbitControls,
6
-
useCursor,
7
-
Environment,
8
-
FakeGlowMaterial
9
-
} from '@threlte/extras';
3
+
import { interactivity, useCursor } from '@threlte/extras';
10
4
import { Quaternion, Euler, Vector2, Group } from 'three';
11
5
import { onMount } from 'svelte';
12
6
import { spring } from './Utils';
13
7
14
8
import Stars from './Stars.svelte';
15
9
import Nebula from './Nebula.svelte';
16
-
import PlanetModel from './PlanetModel.svelte';
10
+
import PlanetModel from './Planet.svelte';
17
11
import { SheetObject } from '@threlte/theatre';
18
12
19
13
const { onPointerEnter, onPointerLeave } = useCursor();
···
52
46
planet.position.set(pos * 2, 0, 0);
53
47
}
54
48
});
55
-
49
+
56
50
const onPointerMove = (event: PointerEvent | TouchEvent) => {
57
51
if (!isDragging) return;
58
52
event.preventDefault();
59
53
60
-
let clientX, clientY;
61
-
if (event instanceof TouchEvent) {
54
+
let clientX = 0, clientY = 0;
55
+
if (window.TouchEvent && event instanceof TouchEvent) {
62
56
clientX = event.touches[0].clientX;
63
57
clientY = event.touches[0].clientY;
64
-
} else {
58
+
} else if(event instanceof PointerEvent) {
65
59
clientX = event.clientX;
66
60
clientY = event.clientY;
67
61
}
···
85
79
86
80
const onPointerDown = (event: PointerEvent | TouchEvent) => {
87
81
isDragging = true;
88
-
let clientX, clientY;
89
-
if (event instanceof TouchEvent) {
82
+
let clientX = 0, clientY = 0;
83
+
if (window.TouchEvent && event instanceof TouchEvent) {
90
84
clientX = event.touches[0].clientX;
91
85
clientY = event.touches[0].clientY;
92
-
} else {
86
+
} else if(event instanceof PointerEvent) {
93
87
clientX = event.clientX;
94
88
clientY = event.clientY;
95
89
}
···
104
98
const onPointerUp = () => {
105
99
isDragging = false;
106
100
107
-
if(totalMove.length() < 10) {
108
-
redo();
109
-
}
101
+
// if (totalMove.length() < 10) {
102
+
// redo();
103
+
// }
110
104
totalMove.set(0, 0);
111
105
};
112
106
···
195
189
on:touchend={() => {
196
190
onPointerUp();
197
191
}}
192
+
on:dblclick={() => {
193
+
redo();
194
+
}}
198
195
scale={size}
199
196
>
200
-
<PlanetModel bind:redo/>
197
+
<PlanetModel bind:redo />
201
198
</T.Group>
202
199
</Transform>
203
200
</SheetObject>
204
201
205
202
<!-- <Environment files="aerodynamics_workshop_1k.hdr" /> -->
206
-
207
203
208
204
<Stars />
209
205
<Nebula />
-206
src/lib/3D/state-new.json
-206
src/lib/3D/state-new.json
···
1
-
{
2
-
"sheetsById": {
3
-
"default": {
4
-
"staticOverrides": {
5
-
"byObject": {
6
-
"planet": {
7
-
"position": {
8
-
"x": 0,
9
-
"y": -1.54635628247858,
10
-
"z": 0
11
-
},
12
-
"rotation": {
13
-
"x": 0,
14
-
"y": 0,
15
-
"z": 0
16
-
},
17
-
"scale": {
18
-
"x": 1,
19
-
"y": 1,
20
-
"z": 1
21
-
}
22
-
},
23
-
"camera": {
24
-
"position": {
25
-
"x": 0,
26
-
"y": 0,
27
-
"z": 5
28
-
},
29
-
"rotation": {
30
-
"x": 50,
31
-
"y": 0,
32
-
"z": 0
33
-
},
34
-
"scale": {
35
-
"x": 1,
36
-
"y": 1,
37
-
"z": 1
38
-
}
39
-
}
40
-
}
41
-
},
42
-
"sequence": {
43
-
"subUnitsPerUnit": 30,
44
-
"length": 10,
45
-
"type": "PositionalSequence",
46
-
"tracksByObject": {
47
-
"planet": {
48
-
"trackData": {
49
-
"dnnWz3pFAE": {
50
-
"type": "BasicKeyframedTrack",
51
-
"__debugName": "planet:[\"position\",\"x\"]",
52
-
"keyframes": []
53
-
},
54
-
"voGNNDqzWc": {
55
-
"type": "BasicKeyframedTrack",
56
-
"__debugName": "planet:[\"position\",\"y\"]",
57
-
"keyframes": []
58
-
},
59
-
"3POG3W7VuU": {
60
-
"type": "BasicKeyframedTrack",
61
-
"__debugName": "planet:[\"position\",\"z\"]",
62
-
"keyframes": []
63
-
}
64
-
},
65
-
"trackIdByPropPath": {
66
-
"[\"position\",\"x\"]": "dnnWz3pFAE",
67
-
"[\"position\",\"y\"]": "voGNNDqzWc",
68
-
"[\"position\",\"z\"]": "3POG3W7VuU"
69
-
}
70
-
},
71
-
"camera": {
72
-
"trackData": {
73
-
"zvhTdyhI_a": {
74
-
"type": "BasicKeyframedTrack",
75
-
"__debugName": "camera:[\"rotation\",\"x\"]",
76
-
"keyframes": [
77
-
{
78
-
"id": "azbx576M9F",
79
-
"position": 0,
80
-
"connectedRight": true,
81
-
"handles": [
82
-
0.5,
83
-
1,
84
-
0.5,
85
-
0
86
-
],
87
-
"type": "bezier",
88
-
"value": 50
89
-
},
90
-
{
91
-
"id": "7ttM3u2xiz",
92
-
"position": 2,
93
-
"connectedRight": true,
94
-
"handles": [
95
-
0.5,
96
-
1,
97
-
0.5,
98
-
0
99
-
],
100
-
"type": "bezier",
101
-
"value": 0
102
-
}
103
-
]
104
-
},
105
-
"onnFYicqIh": {
106
-
"type": "BasicKeyframedTrack",
107
-
"__debugName": "camera:[\"rotation\",\"y\"]",
108
-
"keyframes": []
109
-
},
110
-
"RTGMZwrVXl": {
111
-
"type": "BasicKeyframedTrack",
112
-
"__debugName": "camera:[\"rotation\",\"z\"]",
113
-
"keyframes": [
114
-
{
115
-
"id": "8OvNz5yMka",
116
-
"position": 0,
117
-
"connectedRight": true,
118
-
"handles": [
119
-
0.5,
120
-
1,
121
-
0.5,
122
-
0
123
-
],
124
-
"type": "bezier",
125
-
"value": 0
126
-
},
127
-
{
128
-
"id": "i7PWk_TiFo",
129
-
"position": 2,
130
-
"connectedRight": true,
131
-
"handles": [
132
-
0.5,
133
-
1,
134
-
0.5,
135
-
0
136
-
],
137
-
"type": "bezier",
138
-
"value": 0
139
-
}
140
-
]
141
-
},
142
-
"zo10cwF9iF": {
143
-
"type": "BasicKeyframedTrack",
144
-
"__debugName": "camera:[\"position\",\"x\"]",
145
-
"keyframes": []
146
-
},
147
-
"5j2_W2p49o": {
148
-
"type": "BasicKeyframedTrack",
149
-
"__debugName": "camera:[\"position\",\"y\"]",
150
-
"keyframes": []
151
-
},
152
-
"CCNZpB9sxP": {
153
-
"type": "BasicKeyframedTrack",
154
-
"__debugName": "camera:[\"position\",\"z\"]",
155
-
"keyframes": [
156
-
{
157
-
"id": "0pulbv92kF",
158
-
"position": 0,
159
-
"connectedRight": true,
160
-
"handles": [
161
-
0.5,
162
-
1,
163
-
0.77,
164
-
0
165
-
],
166
-
"type": "bezier",
167
-
"value": 10
168
-
},
169
-
{
170
-
"id": "AYruCOJ6oj",
171
-
"position": 2,
172
-
"connectedRight": true,
173
-
"handles": [
174
-
0.175,
175
-
1,
176
-
0.5,
177
-
0
178
-
],
179
-
"type": "bezier",
180
-
"value": 0
181
-
}
182
-
]
183
-
}
184
-
},
185
-
"trackIdByPropPath": {
186
-
"[\"rotation\",\"x\"]": "zvhTdyhI_a",
187
-
"[\"rotation\",\"y\"]": "onnFYicqIh",
188
-
"[\"rotation\",\"z\"]": "RTGMZwrVXl",
189
-
"[\"position\",\"x\"]": "zo10cwF9iF",
190
-
"[\"position\",\"y\"]": "5j2_W2p49o",
191
-
"[\"position\",\"z\"]": "CCNZpB9sxP"
192
-
}
193
-
}
194
-
}
195
-
}
196
-
}
197
-
},
198
-
"definitionVersion": "0.4.0",
199
-
"revisionHistory": [
200
-
"bOZ-LeLKY9-GAkh7",
201
-
"fADzXr5CC7jTQseN",
202
-
"l30cMOfZ3-bzgBCO",
203
-
"53Zd3JAcFU6OEATa",
204
-
"IZpHhIeaW9cKqnVz"
205
-
]
206
-
}
+2
src/lib/components/Hero.svelte
+2
src/lib/components/Hero.svelte
+8
-7
src/lib/components/Loading.svelte
+8
-7
src/lib/components/Loading.svelte
···
10
10
<svg
11
11
xmlns="http://www.w3.org/2000/svg"
12
12
viewBox="197.118 353.993 729.100 91.712"
13
+
width="100%"
14
+
height="100%"
13
15
class="stroke-[8] max-w-3xl fill-transparent hello z-30"
14
16
style="stroke: url(#gradient);"
15
17
data-flip-id="text"
···
37
39
/>
38
40
<path
39
41
style="--delay: 1.0s"
40
-
d="M 562.42,400.80 C 562.14 401.49, 562.23 402.08, 562.48 403.60 C 562.73 405.11, 562.90 406.25, 563.66 408.36 C 564.43 410.47, 565.02 411.86, 566.30 414.16 C 567.58 416.47, 568.42 417.97, 570.05 419.90 C 571.68 421.82, 572.62 422.61, 574.45 423.79 C 576.28 424.96, 577.22 425.42, 579.21 425.76 C 581.20 426.10, 582.32 426.17, 584.41 425.48 C 586.49 424.79, 587.67 423.98, 589.64 422.32 C 591.61 420.67, 592.60 419.40, 594.25 417.19 C 595.90 414.98, 596.87 413.47, 597.90 411.28 C 598.93 409.10, 599.11 407.49, 599.39 406.26 C 599.68 405.02, 599.23 404.76, 599.31 405.10 C 599.39 405.44, 599.12 406.36, 599.79 407.95 C 600.46 409.55, 600.91 411.02, 602.65 413.08 C 604.39 415.14, 605.88 416.55, 608.48 418.24 C 611.08 419.93, 612.69 420.54, 615.67 421.54 C 618.65 422.54, 620.32 422.86, 623.39 423.23 C 626.45 423.60, 628.09 423.70, 630.99 423.41 C 633.90 423.12, 635.45 422.82, 637.91 421.77 C 640.37 420.71, 641.45 419.93, 643.32 418.14 C 645.18 416.35, 646.13 415.16, 647.25 412.82 C 648.36 410.48, 648.52 408.84, 648.88 406.42 C 649.23 404.00, 649.23 402.86, 649.01 400.72 C 648.79 398.58, 648.52 397.48, 647.75 395.74 C 646.98 394.00, 646.37 393.15, 645.15 392.01 C 643.93 390.87, 642.96 390.53, 641.65 390.05 C 640.34 389.57, 639.61 389.54, 638.60 389.62 C 637.60 389.69, 637.14 390.06, 636.62 390.41 C 636.10 390.76, 636.05 391.01, 635.98 391.38 "
42
+
d="M 562.42,400.80 C 562.14 401.49, 562.23 402.08, 562.48 403.60 C 562.73 405.11, 562.90 406.25, 563.66 408.36 C 564.43 410.47, 565.02 411.86, 566.30 414.16 C 567.58 416.47, 568.42 417.97, 570.05 419.90 C 571.68 421.82, 572.62 422.61, 574.45 423.79 C 576.28 424.96, 577.22 425.42, 579.21 425.76 C 581.20 426.10, 582.32 426.17, 584.41 425.48 C 586.49 424.79, 587.67 423.98, 589.64 422.32 C 591.61 420.67, 592.60 419.40, 594.25 417.19 C 595.90 414.98, 596.87 413.47, 597.90 411.28 C 598.93 409.10, 599.11 407.49, 599.39 406.26 C 599.68 405.02, 599.23 404.76, 599.31 405.10 C 599.39 405.44, 599.12 406.36, 599.79 407.95 C 600.46 409.55, 600.91 411.02, 602.65 413.08 C 604.39 415.14, 605.88 416.55, 608.48 418.24 C 611.08 419.93, 612.69 420.54, 615.67 421.54 C 618.65 422.54, 620.32 422.86, 623.39 423.23 C 626.45 423.60, 628.09 423.70, 630.99 423.41 C 633.90 423.12, 635.45 422.82, 637.91 421.77 C 640.37 420.71, 641.45 419.93, 643.32 418.14 C 645.18 416.35, 646.13 415.16, 647.25 412.82 C 648.36 410.48, 648.52 408.84, 648.88 406.42 C 649.23 404.00, 649.23 402.86, 649.01 400.72 C 648.79 398.58, 648.52 397.48, 647.75 395.74 C 646.98 394.00, 646.37 393.15, 645.15 392.01 C 643.93 390.87, 642.96 390.53, 641.65 390.05 C 640.34 389.57, 639.61 389.54, 638.60 389.62 C 637.60 389.69, 637.14 390.06, 636.62 390.41 C 636.10 390.76, 636.05 391.01, 635.98 391.38"
41
43
/>
42
44
<path
43
45
style="--delay: 1.4s"
44
-
d="M 687.05,397.09 C 687.10 396.35, 686.94 395.47, 686.01 394.45 C 685.08 393.43, 684.22 392.59, 682.39 392.00 C 680.55 391.41, 679.16 391.21, 676.83 391.49 C 674.51 391.76, 673.12 392.11, 670.76 393.39 C 668.40 394.67, 667.04 395.80, 665.02 397.86 C 663.01 399.93, 661.87 401.23, 660.68 403.71 C 659.49 406.20, 659.00 407.77, 659.09 410.27 C 659.17 412.77, 659.63 414.10, 661.10 416.21 C 662.58 418.32, 663.95 419.48, 666.48 420.81 C 669.02 422.15, 670.61 422.43, 673.78 422.90 C 676.94 423.37, 678.94 423.31, 682.32 423.15 C 685.69 422.99, 687.65 422.87, 690.65 422.10 C 693.64 421.33, 694.98 420.63, 697.30 419.30 C 699.62 417.97, 700.76 417.20, 702.23 415.45 C 703.70 413.69, 704.29 412.54, 704.64 410.52 C 704.99 408.51, 704.73 407.34, 703.97 405.39 C 703.20 403.43, 702.45 402.32, 700.79 400.75 C 699.14 399.17, 697.93 398.51, 695.69 397.49 "
46
+
d="M 687.05,397.09 C 687.10 396.35, 686.94 395.47, 686.01 394.45 C 685.08 393.43, 684.22 392.59, 682.39 392.00 C 680.55 391.41, 679.16 391.21, 676.83 391.49 C 674.51 391.76, 673.12 392.11, 670.76 393.39 C 668.40 394.67, 667.04 395.80, 665.02 397.86 C 663.01 399.93, 661.87 401.23, 660.68 403.71 C 659.49 406.20, 659.00 407.77, 659.09 410.27 C 659.17 412.77, 659.63 414.10, 661.10 416.21 C 662.58 418.32, 663.95 419.48, 666.48 420.81 C 669.02 422.15, 670.61 422.43, 673.78 422.90 C 676.94 423.37, 678.94 423.31, 682.32 423.15 C 685.69 422.99, 687.65 422.87, 690.65 422.10 C 693.64 421.33, 694.98 420.63, 697.30 419.30 C 699.62 417.97, 700.76 417.20, 702.23 415.45 C 703.70 413.69, 704.29 412.54, 704.64 410.52 C 704.99 408.51, 704.73 407.34, 703.97 405.39 C 703.20 403.43, 702.45 402.32, 700.79 400.75 C 699.14 399.17, 697.93 398.51, 695.69 397.49"
45
47
/>
46
48
<path
47
49
style="--delay: 1.5s"
48
-
d="M 714.71,395.76 C 714.21 396.26, 713.93 396.81, 713.73 398.19 C 713.54 399.57, 713.51 400.64, 713.75 402.67 C 714.00 404.69, 714.34 406.09, 714.97 408.33 C 715.60 410.56, 716.03 411.90, 716.91 413.84 C 717.78 415.77, 718.36 416.81, 719.36 418.00 C 720.36 419.18, 720.93 419.63, 721.90 419.76 C 722.87 419.90, 723.56 419.60, 724.22 418.67 C 724.89 417.73, 725.10 416.85, 725.21 415.08 C 725.33 413.31, 725.11 411.95, 724.81 409.81 C 724.51 407.67, 724.01 406.34, 723.73 404.39 C 723.45 402.44, 723.28 401.52, 723.43 400.06 C 723.57 398.60, 723.76 398.01, 724.46 397.08 C 725.17 396.15, 725.61 395.95, 726.96 395.41 C 728.31 394.87, 729.21 394.75, 731.21 394.39 C 733.21 394.04, 734.47 393.89, 736.96 393.63 C 739.45 393.37, 740.90 393.26, 743.67 393.09 C 746.43 392.92, 748.16 392.97, 750.81 392.77 "
50
+
d="M 714.71,395.76 C 714.21 396.26, 713.93 396.81, 713.73 398.19 C 713.54 399.57, 713.51 400.64, 713.75 402.67 C 714.00 404.69, 714.34 406.09, 714.97 408.33 C 715.60 410.56, 716.03 411.90, 716.91 413.84 C 717.78 415.77, 718.36 416.81, 719.36 418.00 C 720.36 419.18, 720.93 419.63, 721.90 419.76 C 722.87 419.90, 723.56 419.60, 724.22 418.67 C 724.89 417.73, 725.10 416.85, 725.21 415.08 C 725.33 413.31, 725.11 411.95, 724.81 409.81 C 724.51 407.67, 724.01 406.34, 723.73 404.39 C 723.45 402.44, 723.28 401.52, 723.43 400.06 C 723.57 398.60, 723.76 398.01, 724.46 397.08 C 725.17 396.15, 725.61 395.95, 726.96 395.41 C 728.31 394.87, 729.21 394.75, 731.21 394.39 C 733.21 394.04, 734.47 393.89, 736.96 393.63 C 739.45 393.37, 740.90 393.26, 743.67 393.09 C 746.43 392.92, 748.16 392.97, 750.81 392.77"
49
51
/>
50
52
<path
51
53
style="--delay: 1.65s"
52
-
d="M 770.66,372.10 C 770.12 372.85, 769.64 373.70, 769.51 375.90 C 769.39 378.09, 769.59 379.78, 770.03 383.07 C 770.48 386.37, 770.92 388.62, 771.74 392.37 C 772.56 396.12, 773.18 398.20, 774.15 401.81 C 775.12 405.43, 775.51 407.42, 776.58 410.47 C 777.65 413.52, 778.32 414.83, 779.49 417.06 C 780.66 419.29, 781.14 420.14, 782.42 421.61 C 783.71 423.07, 784.99 424.04, 785.91 424.39 C 786.84 424.73, 787.28 424.24, 787.07 423.33 "
54
+
d="M 770.66,372.10 C 770.12 372.85, 769.64 373.70, 769.51 375.90 C 769.39 378.09, 769.59 379.78, 770.03 383.07 C 770.48 386.37, 770.92 388.62, 771.74 392.37 C 772.56 396.12, 773.18 398.20, 774.15 401.81 C 775.12 405.43, 775.51 407.42, 776.58 410.47 C 777.65 413.52, 778.32 414.83, 779.49 417.06 C 780.66 419.29, 781.14 420.14, 782.42 421.61 C 783.71 423.07, 784.99 424.04, 785.91 424.39 C 786.84 424.73, 787.28 424.24, 787.07 423.33"
53
55
/>
54
56
<path
55
57
style="--delay: 1.8s"
56
-
d="M 831.93,412.49 C 831.90 411.74, 831.59 410.93, 830.60 409.98 C 829.60 409.03, 828.81 408.41, 826.95 407.74 C 825.09 407.07, 823.74 406.60, 821.31 406.64 C 818.89 406.67, 817.39 407.19, 814.82 407.94 C 812.25 408.69, 810.89 409.21, 808.47 410.39 C 806.04 411.58, 804.61 412.27, 802.71 413.85 C 800.80 415.44, 799.84 416.55, 798.94 418.32 C 798.05 420.10, 797.88 421.05, 798.24 422.74 C 798.59 424.42, 799.20 425.40, 800.72 426.75 C 802.24 428.10, 803.51 428.80, 805.83 429.50 C 808.15 430.20, 809.61 430.32, 812.31 430.24 C 815.01 430.16, 816.61 429.85, 819.31 429.10 C 822.01 428.35, 823.36 427.80, 825.79 426.50 C 828.23 425.20, 829.38 424.52, 831.49 422.60 C 833.60 420.68, 834.72 419.48, 836.35 416.90 C 837.97 414.32, 838.59 412.77, 839.62 409.70 C 840.64 406.63, 840.99 404.87, 841.46 401.56 C 841.93 398.24, 841.96 396.31, 841.98 393.12 C 842.00 389.93, 841.97 388.11, 841.56 385.62 C 841.15 383.13, 840.55 381.90, 839.94 380.67 C 839.32 379.44, 838.85 379.13, 838.50 379.47 C 838.14 379.81, 837.82 380.58, 838.16 382.37 C 838.51 384.15, 838.96 385.55, 840.23 388.41 C 841.49 391.26, 842.74 393.17, 844.47 396.64 C 846.20 400.10, 847.21 402.14, 848.88 405.73 C 850.54 409.32, 851.30 411.24, 852.78 414.59 C 854.27 417.93, 854.95 419.71, 856.30 422.46 C 857.65 425.20, 858.42 426.46, 859.53 428.31 C 860.64 430.17, 861.13 430.78, 861.86 431.73 C 862.59 432.68, 862.79 432.74, 863.19 433.06 C 863.59 433.39, 863.64 433.34, 863.87 433.35 C 864.09 433.37, 864.19 433.31, 864.32 433.13 C 864.45 432.94, 864.51 432.98, 864.51 432.44 "
58
+
d="M 831.93,412.49 C 831.90 411.74, 831.59 410.93, 830.60 409.98 C 829.60 409.03, 828.81 408.41, 826.95 407.74 C 825.09 407.07, 823.74 406.60, 821.31 406.64 C 818.89 406.67, 817.39 407.19, 814.82 407.94 C 812.25 408.69, 810.89 409.21, 808.47 410.39 C 806.04 411.58, 804.61 412.27, 802.71 413.85 C 800.80 415.44, 799.84 416.55, 798.94 418.32 C 798.05 420.10, 797.88 421.05, 798.24 422.74 C 798.59 424.42, 799.20 425.40, 800.72 426.75 C 802.24 428.10, 803.51 428.80, 805.83 429.50 C 808.15 430.20, 809.61 430.32, 812.31 430.24 C 815.01 430.16, 816.61 429.85, 819.31 429.10 C 822.01 428.35, 823.36 427.80, 825.79 426.50 C 828.23 425.20, 829.38 424.52, 831.49 422.60 C 833.60 420.68, 834.72 419.48, 836.35 416.90 C 837.97 414.32, 838.59 412.77, 839.62 409.70 C 840.64 406.63, 840.99 404.87, 841.46 401.56 C 841.93 398.24, 841.96 396.31, 841.98 393.12 C 842.00 389.93, 841.97 388.11, 841.56 385.62 C 841.15 383.13, 840.55 381.90, 839.94 380.67 C 839.32 379.44, 838.85 379.13, 838.50 379.47 C 838.14 379.81, 837.82 380.58, 838.16 382.37 C 838.51 384.15, 838.96 385.55, 840.23 388.41 C 841.49 391.26, 842.74 393.17, 844.47 396.64 C 846.20 400.10, 847.21 402.14, 848.88 405.73 C 850.54 409.32, 851.30 411.24, 852.78 414.59 C 854.27 417.93, 854.95 419.71, 856.30 422.46 C 857.65 425.20, 858.42 426.46, 859.53 428.31 C 860.64 430.17, 861.13 430.78, 861.86 431.73 C 862.59 432.68, 862.79 432.74, 863.19 433.06 C 863.59 433.39, 863.64 433.34, 863.87 433.35 C 864.09 433.37, 864.19 433.31, 864.32 433.13 C 864.45 432.94, 864.51 432.98, 864.51 432.44"
57
59
/>
58
60
<path
59
61
style="--delay: 2.1s"
60
-
d="M 909.81,357.64 C 909.30 358.49, 909.06 359.62, 908.91 361.81 C 908.76 363.99, 908.89 365.66, 909.07 368.58 C 909.25 371.50, 909.51 373.23, 909.80 376.41 C 910.08 379.58, 910.13 381.38, 910.49 384.46 C 910.86 387.54, 911.15 389.05, 911.63 391.81 C 912.11 394.58, 912.41 396.07, 912.91 398.29 C 913.41 400.52, 913.64 401.44, 914.14 402.94 C 914.64 404.44, 914.91 405.27, 915.41 405.80 C 915.92 406.34, 916.34 406.27, 916.66 405.61 "
62
+
d="M 909.81,357.64 C 909.30 358.49, 909.06 359.62, 908.91 361.81 C 908.76 363.99, 908.89 365.66, 909.07 368.58 C 909.25 371.50, 909.51 373.23, 909.80 376.41 C 910.08 379.58, 910.13 381.38, 910.49 384.46 C 910.86 387.54, 911.15 389.05, 911.63 391.81 C 912.11 394.58, 912.41 396.07, 912.91 398.29 C 913.41 400.52, 913.64 401.44, 914.14 402.94 C 914.64 404.44, 914.91 405.27, 915.41 405.80 C 915.92 406.34, 916.34 406.27, 916.66 405.61"
61
63
/>
62
64
<path
63
65
style="--delay: 2.2s"
···
67
69
</svg>
68
70
{/if}
69
71
<div class="absolute bg-black h-screen w-full z-10 background"></div>
70
-
71
72
</div>
72
73
73
74
<style>