alpha
Login
or
Join now
flo-bit.dev
/
flo-bit.github.io
Star
0
Fork
0
Atom
Configure Feed
Issues
Pull Requests
Commits
Tags
Feed URL
Select the types of activity you want to include in your feed.
[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
Star
0
Fork
0
Atom
Configure Feed
Issues
Pull Requests
Commits
Tags
Feed URL
Select the types of activity you want to include in your feed.
Overview
Issues
Pulls
Pipelines
add handwritten hello world
author
Florian
date
2 years ago
(Sep 3, 2024, 6:15 AM +0200)
commit
4af5b831
4af5b831046737382e9d7a413d2895d8e9c499d6
parent
49e82d33
49e82d33a6ab0aa3523b3a9e8ceaf0b6186ce22e
+221
-11
4 changed files
Expand all
Collapse all
Unified
Split
package-lock.json
package.json
src
lib
components
Hero.svelte
routes
test
+page.svelte
+29
package-lock.json
View file
Reviewed
···
19
19
"alea": "^1.0.1",
20
20
"autoprefixer": "^10.4.16",
21
21
"clsx": "^2.1.1",
22
22
+
"gradient-path": "^2.3.0",
22
23
"most-visible": "^2.0.0",
23
24
"postcss": "^8.4.32",
24
25
"postprocessing": "^6.33.4",
···
27
28
"tailwind-variants": "^0.2.1",
28
29
"tailwindcss": "^3.4.0",
29
30
"threlte-uikit": "^0.4.2",
31
31
+
"tinygradient": "^1.1.5",
30
32
"vite-imagetools": "^6.2.9"
31
33
},
32
34
"devDependencies": {
···
1713
1715
"meshoptimizer": "~0.18.1"
1714
1716
}
1715
1717
},
1718
1718
+
"node_modules/@types/tinycolor2": {
1719
1719
+
"version": "1.4.6",
1720
1720
+
"resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.6.tgz",
1721
1721
+
"integrity": "sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw=="
1722
1722
+
},
1716
1723
"node_modules/@types/webxr": {
1717
1724
"version": "0.5.16",
1718
1725
"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.16.tgz",
···
3168
3175
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
3169
3176
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
3170
3177
"dev": true
3178
3178
+
},
3179
3179
+
"node_modules/gradient-path": {
3180
3180
+
"version": "2.3.0",
3181
3181
+
"resolved": "https://registry.npmjs.org/gradient-path/-/gradient-path-2.3.0.tgz",
3182
3182
+
"integrity": "sha512-vZdF/Z0EpqUztzWXFjFC16lqcialHacYoRonslk/bC6CuujkuIrqx7etlzdYHY4SnUU94LRWESamZKfkGh7yYQ==",
3183
3183
+
"dependencies": {
3184
3184
+
"tinygradient": "^1.0.0"
3185
3185
+
}
3171
3186
},
3172
3187
"node_modules/graphemer": {
3173
3188
"version": "1.4.0",
···
5082
5097
"dependencies": {
5083
5098
"globalyzer": "0.1.0",
5084
5099
"globrex": "^0.1.2"
5100
5100
+
}
5101
5101
+
},
5102
5102
+
"node_modules/tinycolor2": {
5103
5103
+
"version": "1.6.0",
5104
5104
+
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
5105
5105
+
"integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
5106
5106
+
},
5107
5107
+
"node_modules/tinygradient": {
5108
5108
+
"version": "1.1.5",
5109
5109
+
"resolved": "https://registry.npmjs.org/tinygradient/-/tinygradient-1.1.5.tgz",
5110
5110
+
"integrity": "sha512-8nIfc2vgQ4TeLnk2lFj4tRLvvJwEfQuabdsmvDdQPT0xlk9TaNtpGd6nNRxXoK6vQhN6RSzj+Cnp5tTQmpxmbw==",
5111
5111
+
"dependencies": {
5112
5112
+
"@types/tinycolor2": "^1.4.0",
5113
5113
+
"tinycolor2": "^1.0.0"
5085
5114
}
5086
5115
},
5087
5116
"node_modules/to-regex-range": {
+2
package.json
View file
Reviewed
···
50
50
"alea": "^1.0.1",
51
51
"autoprefixer": "^10.4.16",
52
52
"clsx": "^2.1.1",
53
53
+
"gradient-path": "^2.3.0",
53
54
"most-visible": "^2.0.0",
54
55
"postcss": "^8.4.32",
55
56
"postprocessing": "^6.33.4",
···
58
59
"tailwind-variants": "^0.2.1",
59
60
"tailwindcss": "^3.4.0",
60
61
"threlte-uikit": "^0.4.2",
62
62
+
"tinygradient": "^1.1.5",
61
63
"vite-imagetools": "^6.2.9"
62
64
}
63
65
}
+98
-3
src/lib/components/Hero.svelte
View file
Reviewed
···
1
1
-
<div class="relative isolate overflow-hidden section h-screen pointer-events-none ml-48" id="home">
1
1
+
<div
2
2
+
class="relative isolate overflow-hidden section h-screen pointer-events-none ml-12 sm:ml-48"
3
3
+
id="home"
4
4
+
>
2
5
<div class="mx-auto max-w-5xl px-6 py-40 lg:px-8">
3
6
<h1
4
4
-
class="text-6xl mt-0 md:mt-36 font-bold tracking-tight text-right w-full text-zinc-900 dark:text-zinc-100 md:text-8xl"
7
7
+
class="text-6xl mt-0 md:mt-36 font-bold tracking-tight text-right flex justify-end w-full text-zinc-900 dark:text-zinc-100 md:text-8xl"
5
8
>
6
6
-
hello world
9
9
+
<span class="sr-only">hello world!</span>
10
10
+
<svg
11
11
+
xmlns="http://www.w3.org/2000/svg"
12
12
+
viewBox="197.118 353.993 729.100 91.712"
13
13
+
class="stroke-[8] max-w-lg fill-transparent"
14
14
+
style="stroke: url(#gradient);"
15
15
+
>
16
16
+
<linearGradient
17
17
+
id="gradient"
18
18
+
x1="197.118"
19
19
+
y1="0"
20
20
+
x2="926.218"
21
21
+
y2="0"
22
22
+
gradientUnits="userSpaceOnUse"
23
23
+
>
24
24
+
<stop offset="0%" stop-color="#22d3ee" />
25
25
+
<stop offset="25%" stop-color="#2dd4bf" />
26
26
+
<stop offset="75%" stop-color="#34d399" />
27
27
+
<stop offset="100%" stop-color="#4ade80" />
28
28
+
<!-- <stop offset="0%" stop-color="rgba(255, 0, 0, 1)"/>
29
29
+
<stop offset="10%" stop-color="rgba(255, 154, 0, 1)"/>
30
30
+
<stop offset="20%" stop-color="rgba(208, 222, 33, 1)"/>
31
31
+
<stop offset="30%" stop-color="rgba(79, 220, 74, 1)"/>
32
32
+
<stop offset="40%" stop-color="rgba(63, 218, 216, 1)"/>
33
33
+
<stop offset="50%" stop-color="rgba(47, 201, 226, 1)"/>
34
34
+
<stop offset="60%" stop-color="rgba(28, 127, 238, 1)"/>
35
35
+
<stop offset="70%" stop-color="rgba(95, 21, 242, 1)"/>
36
36
+
<stop offset="80%" stop-color="rgba(186, 12, 248, 1)"/>
37
37
+
<stop offset="90%" stop-color="rgba(251, 7, 217, 1)"/>
38
38
+
<stop offset="100%" stop-color="rgba(255, 0, 0, 1)"/> -->
39
39
+
</linearGradient>
40
40
+
<g class="paths">
41
41
+
<path
42
42
+
d="M 200.70,365.61 C 200.26 366.92, 199.99 368.69, 200.18 372.13 C 200.37 375.56, 200.92 377.90, 201.64 382.78 C 202.35 387.66, 202.88 391.11, 203.74 396.53 C 204.61 401.95, 205.02 404.88, 205.95 409.87 C 206.88 414.87, 207.51 417.39, 208.38 421.52 C 209.26 425.65, 209.48 427.56, 210.34 430.53 C 211.20 433.49, 211.70 434.62, 212.69 436.34 C 213.67 438.06, 214.22 438.66, 215.27 439.12 C 216.32 439.58, 217.02 439.61, 217.96 438.64 C 218.90 437.68, 219.43 436.69, 219.98 434.31 C 220.53 431.92, 220.34 430.01, 220.71 426.73 C 221.08 423.45, 221.15 421.23, 221.85 417.89 C 222.55 414.55, 223.30 412.71, 224.23 410.05 C 225.15 407.39, 225.67 406.15, 226.49 404.59 C 227.31 403.02, 227.50 402.54, 228.34 402.23 C 229.19 401.92, 229.70 402.21, 230.71 403.04 C 231.73 403.87, 232.12 404.66, 233.42 406.40 C 234.73 408.14, 235.46 409.31, 237.24 411.73 C 239.02 414.16, 240.39 415.82, 242.32 418.52 C 244.26 421.23, 245.08 422.80, 246.92 425.26 C 248.75 427.71, 249.68 428.81, 251.51 430.80 C 253.35 432.79, 254.14 433.78, 256.09 435.19 C 258.03 436.61, 258.98 437.22, 261.26 437.88 C 263.53 438.54, 264.89 438.68, 267.45 438.48 C 270.01 438.28, 271.39 438.08, 274.05 436.88 C 276.70 435.68, 278.08 434.54, 280.73 432.47 C 283.37 430.41, 284.84 429.08, 287.27 426.56 C 289.70 424.05, 291.00 422.62, 292.90 419.89 C 294.80 417.15, 295.82 415.52, 296.78 412.89 C 297.74 410.26, 297.88 408.81, 297.69 406.72 C 297.51 404.62, 297.05 403.67, 295.87 402.42 C 294.70 401.17, 293.72 400.57, 291.82 400.46 C 289.93 400.35, 288.53 400.66, 286.38 401.87 C 284.24 403.07, 282.96 404.25, 281.11 406.48 C 279.26 408.71, 278.35 410.19, 277.14 413.03 C 275.94 415.86, 275.17 417.60, 275.08 420.65 C 274.98 423.69, 275.32 425.58, 276.68 428.25 C 278.03 430.93, 279.26 432.15, 281.85 434.04 C 284.45 435.92, 286.08 436.57, 289.65 437.68 C 293.23 438.78, 295.50 439.27, 299.71 439.57 C 303.93 439.88, 306.26 439.72, 310.73 439.21 C 315.20 438.69, 317.56 438.21, 322.06 437.00 C 326.57 435.79, 329.08 435.12, 333.26 433.17 C 337.45 431.22, 339.52 430.02, 342.99 427.25 C 346.46 424.47, 348.06 422.83, 350.61 419.30 C 353.16 415.78, 354.24 413.78, 355.72 409.62 C 357.20 405.45, 357.61 402.97, 358.02 398.49 C 358.44 394.02, 358.35 391.49, 357.81 387.24 C 357.27 382.98, 356.66 380.80, 355.33 377.22 C 354.00 373.63, 353.02 372.00, 351.17 369.32 C 349.31 366.64, 348.24 365.48, 346.07 363.83 C 343.89 362.18, 342.59 361.50, 340.29 361.09 C 337.99 360.68, 336.66 360.72, 334.56 361.77 C 332.45 362.82, 331.19 363.67, 329.76 366.32 C 328.33 368.97, 327.89 370.99, 327.39 375.01 C 326.90 379.03, 326.81 381.62, 327.27 386.43 C 327.73 391.24, 328.25 394.21, 329.70 399.07 C 331.16 403.92, 332.23 406.52, 334.56 410.71 C 336.90 414.89, 338.41 416.79, 341.39 420.01 C 344.36 423.22, 346.19 424.69, 349.43 426.77 C 352.67 428.86, 354.42 429.60, 357.60 430.42 C 360.77 431.25, 362.43 431.29, 365.29 430.89 C 368.15 430.49, 369.61 430.00, 371.91 428.43 C 374.22 426.86, 375.23 425.63, 376.80 423.05 C 378.37 420.48, 378.95 418.91, 379.75 415.55 C 380.54 412.19, 380.61 410.05, 380.77 406.26 C 380.93 402.48, 380.82 400.40, 380.54 396.63 C 380.26 392.86, 380.02 390.79, 379.38 387.43 C 378.73 384.08, 378.38 382.32, 377.32 379.88 C 376.25 377.43, 375.51 376.42, 374.05 375.23 C 372.59 374.04, 371.49 373.60, 370.04 373.94 C 368.58 374.28, 367.58 375.00, 366.79 376.93 C 366.00 378.85, 365.81 380.46, 366.10 383.56 C 366.39 386.66, 367.15 388.77, 368.22 392.45 C 369.30 396.12, 370.02 398.28, 371.47 401.91 C 372.93 405.55, 373.84 407.38, 375.50 410.64 C 377.15 413.89, 377.93 415.48, 379.75 418.18 C 381.57 420.88, 382.52 422.08, 384.58 424.15 C 386.65 426.22, 387.81 427.09, 390.09 428.53 C 392.38 429.97, 393.65 430.60, 396.01 431.37 C 398.37 432.15, 399.65 432.48, 401.91 432.41 C 404.16 432.34, 406.24 431.65, 407.27 431.00"
43
43
+
/>
44
44
+
<path
45
45
+
style="--delay: 1.1s"
46
46
+
d="M 436.98,404.86 C 436.51 404.37, 435.97 404.10, 434.69 404.03 C 433.42 403.95, 432.36 403.80, 430.61 404.48 C 428.87 405.16, 427.64 405.87, 425.96 407.41 C 424.29 408.96, 423.25 410.06, 422.24 412.22 C 421.22 414.37, 420.87 415.81, 420.90 418.21 C 420.94 420.61, 421.19 422.17, 422.41 424.22 C 423.63 426.27, 424.71 427.14, 427.01 428.47 C 429.31 429.80, 430.91 430.36, 433.91 430.88 C 436.92 431.41, 438.75 431.39, 442.03 431.10 C 445.31 430.82, 447.14 430.41, 450.31 429.48 C 453.48 428.54, 455.20 428.00, 457.88 426.43 C 460.56 424.87, 461.97 423.78, 463.71 421.64 C 465.44 419.50, 466.12 418.14, 466.55 415.73 C 466.98 413.31, 466.79 411.92, 465.85 409.56 C 464.90 407.20, 463.93 405.80, 461.82 403.91 C 459.71 402.01, 457.98 401.13, 455.29 400.07 C 452.60 399.01, 450.78 398.78, 448.39 398.61 C 446.00 398.43, 444.90 398.76, 443.33 399.18 C 441.76 399.60, 441.04 400.16, 440.54 400.70"
47
47
+
/>
48
48
+
<path
49
49
+
style="--delay: 1.4s"
50
50
+
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 "
51
51
+
/>
52
52
+
<path
53
53
+
style="--delay: 1.8s"
54
54
+
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 "
55
55
+
/>
56
56
+
<path
57
57
+
style="--delay: 2.0s"
58
58
+
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 "
59
59
+
/>
60
60
+
<path
61
61
+
style="--delay: 2.2s"
62
62
+
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 "
63
63
+
/>
64
64
+
<path
65
65
+
style="--delay: 2.4s"
66
66
+
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 "
67
67
+
/>
68
68
+
<path
69
69
+
style="--delay: 2.8s"
70
70
+
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 "
71
71
+
/>
72
72
+
<path
73
73
+
style="--delay: 2.9s"
74
74
+
d="M 920.82,441.46 C 920.47 441.77, 920.59 442.48, 921.03 442.65 C 921.47 442.81, 922.66 442.60, 923.01 442.29 C 923.37 441.99, 923.24 441.28, 922.80 441.11 C 922.36 440.95, 921.17 441.16, 920.82 441.46"
75
75
+
/>
76
76
+
</g>
77
77
+
</svg>
7
78
</h1>
8
79
</div>
9
80
</div>
81
81
+
82
82
+
<style>
83
83
+
.paths path {
84
84
+
--line-length: 700;
85
85
+
--delay: 0s;
86
86
+
--animation-speed: 1s;
87
87
+
88
88
+
stroke-dasharray: var(--line-length);
89
89
+
stroke-dashoffset: var(--line-length);
90
90
+
animation: drawPath var(--animation-speed) linear 1 forwards;
91
91
+
animation-delay: var(--delay);
92
92
+
93
93
+
stroke-linecap: round;
94
94
+
}
95
95
+
96
96
+
@keyframes drawPath {
97
97
+
0% {
98
98
+
stroke-dashoffset: var(--line-length);
99
99
+
}
100
100
+
100% {
101
101
+
stroke-dashoffset: 0;
102
102
+
}
103
103
+
}
104
104
+
</style>
+92
-8
src/routes/test/+page.svelte
View file
Reviewed
···
1
1
-
<script>
2
2
-
import Scene from '$lib/3D/Scene.svelte';
3
1
4
4
-
import { Canvas } from '@threlte/core';
5
5
-
</script>
2
2
+
<div class="h-full w-full flex items-center justify-center p-20">
3
3
+
<svg
4
4
+
xmlns="http://www.w3.org/2000/svg"
5
5
+
viewBox="197.118 353.993 729.100 91.712"
6
6
+
class="stroke-[6] max-w-3xl"
7
7
+
style="stroke: url(#gradient);"
8
8
+
>
9
9
+
<linearGradient
10
10
+
id="gradient"
11
11
+
x1="197.118"
12
12
+
y1="0"
13
13
+
x2="926.218"
14
14
+
y2="0"
15
15
+
gradientUnits="userSpaceOnUse"
16
16
+
>
17
17
+
<stop offset="0%" stop-color="#06b6d4"/>
18
18
+
<stop offset="50%" stop-color="#4f46e5"/>
19
19
+
<stop offset="100%" stop-color="#e11d48"/>
20
20
+
<!-- <stop offset="0%" stop-color="rgba(255, 0, 0, 1)"/>
21
21
+
<stop offset="10%" stop-color="rgba(255, 154, 0, 1)"/>
22
22
+
<stop offset="20%" stop-color="rgba(208, 222, 33, 1)"/>
23
23
+
<stop offset="30%" stop-color="rgba(79, 220, 74, 1)"/>
24
24
+
<stop offset="40%" stop-color="rgba(63, 218, 216, 1)"/>
25
25
+
<stop offset="50%" stop-color="rgba(47, 201, 226, 1)"/>
26
26
+
<stop offset="60%" stop-color="rgba(28, 127, 238, 1)"/>
27
27
+
<stop offset="70%" stop-color="rgba(95, 21, 242, 1)"/>
28
28
+
<stop offset="80%" stop-color="rgba(186, 12, 248, 1)"/>
29
29
+
<stop offset="90%" stop-color="rgba(251, 7, 217, 1)"/>
30
30
+
<stop offset="100%" stop-color="rgba(255, 0, 0, 1)"/> -->
31
31
+
</linearGradient>
32
32
+
<g class="paths">
33
33
+
<path
34
34
+
d="M 200.70,365.61 C 200.26 366.92, 199.99 368.69, 200.18 372.13 C 200.37 375.56, 200.92 377.90, 201.64 382.78 C 202.35 387.66, 202.88 391.11, 203.74 396.53 C 204.61 401.95, 205.02 404.88, 205.95 409.87 C 206.88 414.87, 207.51 417.39, 208.38 421.52 C 209.26 425.65, 209.48 427.56, 210.34 430.53 C 211.20 433.49, 211.70 434.62, 212.69 436.34 C 213.67 438.06, 214.22 438.66, 215.27 439.12 C 216.32 439.58, 217.02 439.61, 217.96 438.64 C 218.90 437.68, 219.43 436.69, 219.98 434.31 C 220.53 431.92, 220.34 430.01, 220.71 426.73 C 221.08 423.45, 221.15 421.23, 221.85 417.89 C 222.55 414.55, 223.30 412.71, 224.23 410.05 C 225.15 407.39, 225.67 406.15, 226.49 404.59 C 227.31 403.02, 227.50 402.54, 228.34 402.23 C 229.19 401.92, 229.70 402.21, 230.71 403.04 C 231.73 403.87, 232.12 404.66, 233.42 406.40 C 234.73 408.14, 235.46 409.31, 237.24 411.73 C 239.02 414.16, 240.39 415.82, 242.32 418.52 C 244.26 421.23, 245.08 422.80, 246.92 425.26 C 248.75 427.71, 249.68 428.81, 251.51 430.80 C 253.35 432.79, 254.14 433.78, 256.09 435.19 C 258.03 436.61, 258.98 437.22, 261.26 437.88 C 263.53 438.54, 264.89 438.68, 267.45 438.48 C 270.01 438.28, 271.39 438.08, 274.05 436.88 C 276.70 435.68, 278.08 434.54, 280.73 432.47 C 283.37 430.41, 284.84 429.08, 287.27 426.56 C 289.70 424.05, 291.00 422.62, 292.90 419.89 C 294.80 417.15, 295.82 415.52, 296.78 412.89 C 297.74 410.26, 297.88 408.81, 297.69 406.72 C 297.51 404.62, 297.05 403.67, 295.87 402.42 C 294.70 401.17, 293.72 400.57, 291.82 400.46 C 289.93 400.35, 288.53 400.66, 286.38 401.87 C 284.24 403.07, 282.96 404.25, 281.11 406.48 C 279.26 408.71, 278.35 410.19, 277.14 413.03 C 275.94 415.86, 275.17 417.60, 275.08 420.65 C 274.98 423.69, 275.32 425.58, 276.68 428.25 C 278.03 430.93, 279.26 432.15, 281.85 434.04 C 284.45 435.92, 286.08 436.57, 289.65 437.68 C 293.23 438.78, 295.50 439.27, 299.71 439.57 C 303.93 439.88, 306.26 439.72, 310.73 439.21 C 315.20 438.69, 317.56 438.21, 322.06 437.00 C 326.57 435.79, 329.08 435.12, 333.26 433.17 C 337.45 431.22, 339.52 430.02, 342.99 427.25 C 346.46 424.47, 348.06 422.83, 350.61 419.30 C 353.16 415.78, 354.24 413.78, 355.72 409.62 C 357.20 405.45, 357.61 402.97, 358.02 398.49 C 358.44 394.02, 358.35 391.49, 357.81 387.24 C 357.27 382.98, 356.66 380.80, 355.33 377.22 C 354.00 373.63, 353.02 372.00, 351.17 369.32 C 349.31 366.64, 348.24 365.48, 346.07 363.83 C 343.89 362.18, 342.59 361.50, 340.29 361.09 C 337.99 360.68, 336.66 360.72, 334.56 361.77 C 332.45 362.82, 331.19 363.67, 329.76 366.32 C 328.33 368.97, 327.89 370.99, 327.39 375.01 C 326.90 379.03, 326.81 381.62, 327.27 386.43 C 327.73 391.24, 328.25 394.21, 329.70 399.07 C 331.16 403.92, 332.23 406.52, 334.56 410.71 C 336.90 414.89, 338.41 416.79, 341.39 420.01 C 344.36 423.22, 346.19 424.69, 349.43 426.77 C 352.67 428.86, 354.42 429.60, 357.60 430.42 C 360.77 431.25, 362.43 431.29, 365.29 430.89 C 368.15 430.49, 369.61 430.00, 371.91 428.43 C 374.22 426.86, 375.23 425.63, 376.80 423.05 C 378.37 420.48, 378.95 418.91, 379.75 415.55 C 380.54 412.19, 380.61 410.05, 380.77 406.26 C 380.93 402.48, 380.82 400.40, 380.54 396.63 C 380.26 392.86, 380.02 390.79, 379.38 387.43 C 378.73 384.08, 378.38 382.32, 377.32 379.88 C 376.25 377.43, 375.51 376.42, 374.05 375.23 C 372.59 374.04, 371.49 373.60, 370.04 373.94 C 368.58 374.28, 367.58 375.00, 366.79 376.93 C 366.00 378.85, 365.81 380.46, 366.10 383.56 C 366.39 386.66, 367.15 388.77, 368.22 392.45 C 369.30 396.12, 370.02 398.28, 371.47 401.91 C 372.93 405.55, 373.84 407.38, 375.50 410.64 C 377.15 413.89, 377.93 415.48, 379.75 418.18 C 381.57 420.88, 382.52 422.08, 384.58 424.15 C 386.65 426.22, 387.81 427.09, 390.09 428.53 C 392.38 429.97, 393.65 430.60, 396.01 431.37 C 398.37 432.15, 399.65 432.48, 401.91 432.41 C 404.16 432.34, 406.24 431.65, 407.27 431.00"
35
35
+
/>
36
36
+
<path
37
37
+
style="--delay: 1.1s"
38
38
+
d="M 436.98,404.86 C 436.51 404.37, 435.97 404.10, 434.69 404.03 C 433.42 403.95, 432.36 403.80, 430.61 404.48 C 428.87 405.16, 427.64 405.87, 425.96 407.41 C 424.29 408.96, 423.25 410.06, 422.24 412.22 C 421.22 414.37, 420.87 415.81, 420.90 418.21 C 420.94 420.61, 421.19 422.17, 422.41 424.22 C 423.63 426.27, 424.71 427.14, 427.01 428.47 C 429.31 429.80, 430.91 430.36, 433.91 430.88 C 436.92 431.41, 438.75 431.39, 442.03 431.10 C 445.31 430.82, 447.14 430.41, 450.31 429.48 C 453.48 428.54, 455.20 428.00, 457.88 426.43 C 460.56 424.87, 461.97 423.78, 463.71 421.64 C 465.44 419.50, 466.12 418.14, 466.55 415.73 C 466.98 413.31, 466.79 411.92, 465.85 409.56 C 464.90 407.20, 463.93 405.80, 461.82 403.91 C 459.71 402.01, 457.98 401.13, 455.29 400.07 C 452.60 399.01, 450.78 398.78, 448.39 398.61 C 446.00 398.43, 444.90 398.76, 443.33 399.18 C 441.76 399.60, 441.04 400.16, 440.54 400.70"
39
39
+
/>
40
40
+
<path
41
41
+
style="--delay: 1.4s"
42
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 "
43
43
+
/>
44
44
+
<path
45
45
+
style="--delay: 1.8s"
46
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 "
47
47
+
/>
48
48
+
<path
6
49
7
7
-
<div class="fixed left-0 right-0 top-0 h-screen -z-50">
8
8
-
<Canvas>
9
9
-
<Scene pos={0} />
10
10
-
</Canvas>
50
50
+
style="--delay: 2.0s"
51
51
+
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 "
52
52
+
/>
53
53
+
<path
54
54
+
style="--delay: 2.2s"
55
55
+
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 "
56
56
+
/>
57
57
+
<path
58
58
+
style="--delay: 2.4s"
59
59
+
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 "
60
60
+
/>
61
61
+
<path
62
62
+
style="--delay: 2.8s"
63
63
+
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 "
64
64
+
/>
65
65
+
<path
66
66
+
style="--delay: 2.9s"
67
67
+
d="M 920.82,441.46 C 920.47 441.77, 920.59 442.48, 921.03 442.65 C 921.47 442.81, 922.66 442.60, 923.01 442.29 C 923.37 441.99, 923.24 441.28, 922.80 441.11 C 922.36 440.95, 921.17 441.16, 920.82 441.46"
68
68
+
/>
69
69
+
</g>
70
70
+
</svg>
11
71
</div>
72
72
+
73
73
+
<style>
74
74
+
.paths path {
75
75
+
--line-length: 700;
76
76
+
--delay: 0s;
77
77
+
--animation-speed: 1s;
78
78
+
79
79
+
stroke-dasharray: var(--line-length);
80
80
+
stroke-dashoffset: var(--line-length);
81
81
+
animation: drawPath var(--animation-speed) linear 1 forwards;
82
82
+
animation-delay: var(--delay);
83
83
+
84
84
+
stroke-linecap: round;
85
85
+
}
86
86
+
87
87
+
@keyframes drawPath {
88
88
+
0% {
89
89
+
stroke-dashoffset: var(--line-length);
90
90
+
}
91
91
+
100% {
92
92
+
stroke-dashoffset: 0;
93
93
+
}
94
94
+
}
95
95
+
</style>