-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (79 loc) · 6.09 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquid</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<style>
@keyframes spin-slow {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.animate-spin-slow {
transform-origin: center;
animation: spin-slow 10s linear infinite;
}
</style>
<body class="bg-black">
<div class="flex justify-center items-center h-screen">
<svg class="w-64 h-64" viewBox="0 0 1400 356" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_1301_343" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1400"
height="356">
<path
d="M170.873 48.6166H125.116V0H170.873V48.6166ZM47.9016 235.218C47.9016 254.76 54.8128 271.681 68.6352 285.98C82.9342 299.802 100.093 306.713 120.112 306.713H170.873V355.33H120.112C86.7472 355.33 58.3876 343.652 35.0325 320.297C11.6775 296.466 0 268.106 0 235.218V0.71494H47.9016V235.218Z"
fill="white" />
<path
d="M320.856 50.7614H298.693V219.49H320.856L320.141 267.391H227.913L228.628 218.775H250.076V50.7614H228.628V2.14484L320.856 2.85978V50.7614ZM320.856 306.713L320.141 355.33L227.913 354.615L228.628 306.713H320.856Z"
fill="white" />
<path
d="M531.749 355.33H418.787V306.713H531.749V355.33ZM601.1 0.71494H649.716V355.33H601.1V236.648C576.791 257.144 548.67 267.391 516.736 267.391C479.558 267.391 447.862 254.284 421.647 228.069C395.909 201.854 383.04 170.396 383.04 133.696C383.04 96.9948 395.909 65.7754 421.647 40.0372C447.862 13.8224 479.558 0.71494 516.736 0.71494C548.67 0.71494 576.791 10.9626 601.1 31.4578V0.71494ZM455.965 194.466C472.647 210.672 492.666 218.775 516.021 218.775C539.852 218.775 559.871 210.672 576.076 194.466C592.759 177.784 601.1 157.766 601.1 134.411C601.1 110.579 592.759 90.5603 576.076 74.3548C559.871 57.6726 539.852 49.3315 516.021 49.3315C492.666 49.3315 472.647 57.6726 455.965 74.3548C439.759 90.5603 431.656 110.579 431.656 134.411C431.656 157.766 439.759 177.784 455.965 194.466Z"
fill="white" />
<path
d="M825.817 50.0465H697.126V2.14484L825.817 1.42988V50.0465ZM901.602 89.3687H950.218V355.33H856.56C825.579 355.33 799.126 344.606 777.201 323.157C755.276 301.232 744.313 274.779 744.313 243.798V137.27H697.126V89.3687H792.93V243.798C792.93 255.237 795.789 265.961 801.509 275.971C807.229 285.503 814.855 293.129 824.387 298.849C834.397 304.569 845.121 307.428 856.56 307.428H901.602V89.3687Z"
fill="white" />
<path
d="M1112.61 50.7614H1090.44V219.49H1112.61L1111.89 267.391H1019.66L1020.38 218.775H1041.83V50.7614H1020.38V2.14484L1112.61 2.85978V50.7614ZM1112.61 306.713L1111.89 355.33L1019.66 354.615L1020.38 306.713H1112.61Z"
fill="white" />
<path
d="M1400 355.33H1304.91C1268.69 355.33 1237.71 342.461 1211.97 316.723C1186.23 290.985 1173.36 260.003 1173.36 223.779C1173.36 187.555 1186.23 156.574 1211.97 130.836C1237.71 105.098 1268.69 92.2285 1304.91 92.2285H1351.38V1.42988H1400V355.33ZM1304.91 306.713H1351.38V140.13H1304.91C1282.03 140.13 1262.25 148.471 1245.57 165.153C1229.37 181.359 1221.26 200.901 1221.26 223.779C1221.26 246.658 1229.37 266.2 1245.57 282.405C1262.25 298.611 1282.03 306.713 1304.91 306.713ZM1314.92 49.3315L1222.69 50.0465V1.42988H1314.92V49.3315Z"
fill="white" />
</mask>
<g mask="url(#mask0_1301_343)">
<path class="animate-spin-slow" fill-rule="evenodd" clip-rule="evenodd"
d="M857.955 -741.673C1129.49 -729.389 1237.94 -388.016 1380.26 -156.441C1479.3 4.68979 1503.57 180.022 1538.66 365.869C1588.19 628.123 1785.29 919.142 1623.47 1131.38C1460.43 1345.23 1118.75 1324.26 857.955 1258.7C645.718 1205.34 554.154 979.155 400.021 823.803C247.06 669.632 -3.99774 581.729 -27.868 365.869C-52.7141 141.182 144.955 -29.4 286.15 -205.936C455.745 -417.979 586.71 -753.943 857.955 -741.673Z"
fill="url(#paint0_linear_1301_343)" />
<path class="animate-spin-slow" fill-rule="evenodd" clip-rule="evenodd"
d="M1143.19 -1759.41C1425.13 -1842.46 1720.65 -1647.29 1928.89 -1439.87C2137.54 -1232.04 2258.08 -948.616 2252.84 -654.167C2247.68 -364.628 2118.23 -87.9056 1901.38 104.025C1696.24 285.595 1415.13 361.109 1143.19 327.987C899.153 298.264 720.245 116.387 549.638 -60.6158C383.552 -232.928 158.286 -417.918 196.526 -654.167C233.757 -884.185 563.436 -905.37 715.015 -1082.34C895.598 -1293.17 876.9 -1680.98 1143.19 -1759.41Z"
fill="url(#paint1_linear_1301_343)" />
<path class="animate-spin-slow" fill-rule="evenodd" clip-rule="evenodd"
d="M-237.373 -677.694C30.2705 -757.862 382.655 -731.432 550.927 -508.398C716.021 -289.578 556.038 15.1245 485.106 279.902C437.773 456.587 346.945 605.538 217.805 735.08C88.3864 864.901 -58.8852 962.853 -237.373 1004.63C-484.827 1062.55 -763.855 1160.88 -970.73 1013.26C-1192.39 855.094 -1323.1 543.033 -1253.03 279.902C-1188.14 36.2339 -845.749 27.979 -662.278 -145.004C-490.478 -306.983 -463.563 -609.942 -237.373 -677.694Z"
fill="url(#paint2_linear_1301_343)" />
</g>
<defs>
<linearGradient id="paint0_linear_1301_343" x1="1686.45" y1="944.856" x2="376.654" y2="-189.696"
gradientUnits="userSpaceOnUse">
<stop stop-color="#EBAA7B" />
<stop offset="1" stop-color="#B04A29" />
</linearGradient>
<linearGradient id="paint1_linear_1301_343" x1="1287.21" y1="-1779" x2="775.179" y2="261.648"
gradientUnits="userSpaceOnUse">
<stop stop-color="#7BC9EB" />
<stop offset="1" stop-color="#292FB0" />
</linearGradient>
<linearGradient id="paint2_linear_1301_343" x1="-175.465" y1="1002.12" x2="276.684" y2="-737.505"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FFDCEF" />
<stop offset="1" stop-color="#FF5DB4" />
</linearGradient>
</defs>
</svg>
</div>
</body>
</html>