-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
271 lines (240 loc) · 28 KB
/
about.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
267
268
269
270
271
<!-- Page "Mes Projets" -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@300&family=Goldman&display=swap" rel="stylesheet" />
<title>Static Template</title>
</head>
<body>
<div class="svg_1">
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 600" xmlns="http://www.w3.org/2000/svg"
class="transition duration-300 ease-in-out delay-150">
<style>
.path-0 {
animation: pathAnim-0 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-0 {
0% {
d: path("M 0,600 C 0,600 0,150 0,150 C 52.34444035346097,133.27282768777616 104.68888070692194,116.54565537555229 161,120 C 217.31111929307806,123.45434462444771 277.5889175257732,147.090206185567 333,156 C 388.4110824742268,164.909793814433 438.9554491899852,159.0935198821797 508,141 C 577.0445508100148,122.90648011782032 664.5892857142858,92.53571428571429 738,108 C 811.4107142857142,123.46428571428571 870.687407952872,184.76362297496317 928,200 C 985.312592047128,215.23637702503683 1040.6610824742268,184.409793814433 1103,173 C 1165.3389175257732,161.590206185567 1234.6682621502212,169.59720176730485 1292,169 C 1349.3317378497788,168.40279823269515 1394.6658689248893,159.20139911634757 1440,150 C 1440,150 1440,600 1440,600 Z"
);
}
25% {
d: path("M 0,600 C 0,600 0,150 0,150 C 75.8772091310751,181.92746686303389 151.7544182621502,213.85493372606774 201,204 C 250.2455817378498,194.14506627393226 272.8595360824743,142.5077319587629 328,128 C 383.1404639175257,113.49226804123711 470.8074374079529,136.1141384388807 544,138 C 617.1925625920471,139.8858615611193 675.9107142857142,121.03571428571429 738,123 C 800.0892857142858,124.96428571428571 865.5497054491902,147.74300441826216 921,142 C 976.4502945508098,136.25699558173784 1021.8904639175255,101.9922680412371 1085,106 C 1148.1095360824745,110.0077319587629 1228.8884388807069,152.28792341678943 1291,166 C 1353.1115611192931,179.71207658321057 1396.5557805596466,164.85603829160527 1440,150 C 1440,150 1440,600 1440,600 Z"
);
}
50% {
d: path("M 0,600 C 0,600 0,150 0,150 C 72.58155375552283,150.0176730486009 145.16310751104567,150.03534609720177 203,143 C 260.83689248895433,135.96465390279823 303.92912371134014,121.8762886597938 359,120 C 414.07087628865986,118.1237113402062 481.1203976435936,128.45949926362297 538,125 C 594.8796023564064,121.54050073637703 641.5892857142857,104.28571428571429 697,99 C 752.4107142857143,93.71428571428571 816.5224594992636,100.39764359351989 877,106 C 937.4775405007364,111.60235640648011 994.3208762886597,116.12371134020617 1057,116 C 1119.6791237113403,115.87628865979383 1188.1940353460973,111.10751104565537 1253,116 C 1317.8059646539027,120.89248895434463 1378.9029823269514,135.4462444771723 1440,150 C 1440,150 1440,600 1440,600 Z"
);
}
75% {
d: path("M 0,600 C 0,600 0,150 0,150 C 47.96539027982328,150.69826951399116 95.93078055964656,151.39653902798233 156,135 C 216.06921944035344,118.60346097201769 288.242268041237,85.11211340206187 359,100 C 429.757731958763,114.88788659793813 499.1001472754051,178.15500736377027 552,183 C 604.8998527245949,187.84499263622973 641.3571428571428,134.26785714285714 704,107 C 766.6428571428572,79.73214285714286 855.4712812960238,78.77356406480118 921,96 C 986.5287187039762,113.22643593519882 1028.7577319587626,148.63788659793812 1076,147 C 1123.2422680412374,145.36211340206188 1175.497790868925,106.67488954344626 1237,101 C 1298.502209131075,95.32511045655374 1369.2511045655374,122.66255522827687 1440,150 C 1440,150 1440,600 1440,600 Z"
);
}
100% {
d: path("M 0,600 C 0,600 0,150 0,150 C 52.34444035346097,133.27282768777616 104.68888070692194,116.54565537555229 161,120 C 217.31111929307806,123.45434462444771 277.5889175257732,147.090206185567 333,156 C 388.4110824742268,164.909793814433 438.9554491899852,159.0935198821797 508,141 C 577.0445508100148,122.90648011782032 664.5892857142858,92.53571428571429 738,108 C 811.4107142857142,123.46428571428571 870.687407952872,184.76362297496317 928,200 C 985.312592047128,215.23637702503683 1040.6610824742268,184.409793814433 1103,173 C 1165.3389175257732,161.590206185567 1234.6682621502212,169.59720176730485 1292,169 C 1349.3317378497788,168.40279823269515 1394.6658689248893,159.20139911634757 1440,150 C 1440,150 1440,600 1440,600 Z"
);
}
}
</style>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#002bdc"></stop>
<stop offset="95%" stop-color="#32ded4"></stop>
</linearGradient>
</defs>
<path
d="M 0,600 C 0,600 0,150 0,150 C 52.34444035346097,133.27282768777616 104.68888070692194,116.54565537555229 161,120 C 217.31111929307806,123.45434462444771 277.5889175257732,147.090206185567 333,156 C 388.4110824742268,164.909793814433 438.9554491899852,159.0935198821797 508,141 C 577.0445508100148,122.90648011782032 664.5892857142858,92.53571428571429 738,108 C 811.4107142857142,123.46428571428571 870.687407952872,184.76362297496317 928,200 C 985.312592047128,215.23637702503683 1040.6610824742268,184.409793814433 1103,173 C 1165.3389175257732,161.590206185567 1234.6682621502212,169.59720176730485 1292,169 C 1349.3317378497788,168.40279823269515 1394.6658689248893,159.20139911634757 1440,150 C 1440,150 1440,600 1440,600 Z"
stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.4"
class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 300)">
</path>
<style>
.path-1 {
animation: pathAnim-1 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-1 {
0% {
d: path("M 0,600 C 0,600 0,300 0,300 C 65.67986008836525,271.42452135493374 131.3597201767305,242.84904270986746 192,247 C 252.6402798232695,251.15095729013254 308.24097938144325,288.02835051546396 357,306 C 405.75902061855675,323.97164948453604 447.6763622974963,323.03755522827686 512,328 C 576.3236377025037,332.96244477172314 663.0535714285714,343.82142857142856 726,349 C 788.9464285714286,354.17857142857144 828.109351988218,353.6767304860088 887,326 C 945.890648011782,298.3232695139912 1024.5090206185566,243.4716494845361 1087,243 C 1149.4909793814434,242.5283505154639 1195.8545655375553,296.43667157584684 1252,315 C 1308.1454344624447,333.56332842415316 1374.0727172312222,316.7816642120766 1440,300 C 1440,300 1440,600 1440,600 Z"
);
}
25% {
d: path("M 0,600 C 0,600 0,300 0,300 C 57.242452135493366,301.3967231222386 114.48490427098673,302.7934462444772 164,294 C 213.51509572901327,285.2065537555228 255.30283505154642,266.22293814432993 327,285 C 398.6971649484536,303.77706185567007 500.3037555228277,360.31480117820325 561,346 C 621.6962444771723,331.68519882179675 641.4821428571428,246.51785714285717 694,247 C 746.5178571428572,247.48214285714283 831.7676730486008,333.6137702503682 903,342 C 974.2323269513992,350.3862297496318 1031.4471649484535,281.0270618556701 1096,251 C 1160.5528350515465,220.97293814432987 1232.4436671575845,230.27798232695142 1291,245 C 1349.5563328424155,259.7220176730486 1394.7781664212077,279.8610088365243 1440,300 C 1440,300 1440,600 1440,600 Z"
);
}
50% {
d: path("M 0,600 C 0,600 0,300 0,300 C 52.38917525773195,292.21005154639175 104.7783505154639,284.4201030927835 169,291 C 233.2216494845361,297.5798969072165 309.27577319587635,318.5296391752577 379,333 C 448.72422680412365,347.4703608247423 512.1185567010309,355.4613402061856 570,342 C 627.8814432989691,328.5386597938144 680.25,293.62499999999994 733,291 C 785.75,288.37500000000006 838.8814432989691,318.0386597938144 902,318 C 965.1185567010309,317.9613402061856 1038.2242268041236,288.2203608247422 1096,285 C 1153.7757731958764,281.7796391752578 1196.2216494845359,305.0798969072165 1251,312 C 1305.7783505154641,318.9201030927835 1372.889175257732,309.46005154639175 1440,300 C 1440,300 1440,600 1440,600 Z"
);
}
75% {
d: path("M 0,600 C 0,600 0,300 0,300 C 46.77282768777614,281.27448453608247 93.54565537555229,262.548969072165 156,264 C 218.4543446244477,265.451030927835 296.59020618556696,287.07860824742266 355,293 C 413.40979381443304,298.92139175257734 452.09351988217975,289.13659793814435 513,278 C 573.9064801178203,266.86340206185565 657.0357142857142,254.375 731,252 C 804.9642857142858,249.625 869.763622974963,257.36340206185565 933,279 C 996.236377025037,300.63659793814435 1057.909793814433,336.17139175257734 1106,339 C 1154.090206185567,341.82860824742266 1188.597201767305,311.95103092783506 1242,300 C 1295.402798232695,288.04896907216494 1367.7013991163476,294.02448453608247 1440,300 C 1440,300 1440,600 1440,600 Z"
);
}
100% {
d: path("M 0,600 C 0,600 0,300 0,300 C 65.67986008836525,271.42452135493374 131.3597201767305,242.84904270986746 192,247 C 252.6402798232695,251.15095729013254 308.24097938144325,288.02835051546396 357,306 C 405.75902061855675,323.97164948453604 447.6763622974963,323.03755522827686 512,328 C 576.3236377025037,332.96244477172314 663.0535714285714,343.82142857142856 726,349 C 788.9464285714286,354.17857142857144 828.109351988218,353.6767304860088 887,326 C 945.890648011782,298.3232695139912 1024.5090206185566,243.4716494845361 1087,243 C 1149.4909793814434,242.5283505154639 1195.8545655375553,296.43667157584684 1252,315 C 1308.1454344624447,333.56332842415316 1374.0727172312222,316.7816642120766 1440,300 C 1440,300 1440,600 1440,600 Z"
);
}
}
</style>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#002bdc"></stop>
<stop offset="95%" stop-color="#32ded4"></stop>
</linearGradient>
</defs>
<path
d="M 0,600 C 0,600 0,300 0,300 C 65.67986008836525,271.42452135493374 131.3597201767305,242.84904270986746 192,247 C 252.6402798232695,251.15095729013254 308.24097938144325,288.02835051546396 357,306 C 405.75902061855675,323.97164948453604 447.6763622974963,323.03755522827686 512,328 C 576.3236377025037,332.96244477172314 663.0535714285714,343.82142857142856 726,349 C 788.9464285714286,354.17857142857144 828.109351988218,353.6767304860088 887,326 C 945.890648011782,298.3232695139912 1024.5090206185566,243.4716494845361 1087,243 C 1149.4909793814434,242.5283505154639 1195.8545655375553,296.43667157584684 1252,315 C 1308.1454344624447,333.56332842415316 1374.0727172312222,316.7816642120766 1440,300 C 1440,300 1440,600 1440,600 Z"
stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53"
class="transition-all duration-300 ease-in-out delay-150 path-1" transform="rotate(-180 720 300)">
</path>
<style>
.path-2 {
animation: pathAnim-2 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-2 {
0% {
d: path("M 0,600 C 0,600 0,450 0,450 C 47.57676730486011,426.7192562592047 95.15353460972023,403.4385125184094 164,397 C 232.84646539027977,390.5614874815906 322.9626288659793,400.965206185567 379,411 C 435.0373711340207,421.034793814433 456.9959499263623,430.70066273932247 515,446 C 573.0040500736377,461.29933726067753 667.0535714285714,482.23214285714295 736,471 C 804.9464285714286,459.76785714285705 848.7897643593518,416.37076583210603 897,408 C 945.2102356406482,399.62923416789397 997.7873711340208,426.284793814433 1061,448 C 1124.2126288659792,469.715206185567 1198.0607511045653,486.490058910162 1263,486 C 1327.9392488954347,485.509941089838 1383.9696244477173,467.754970544919 1440,450 C 1440,450 1440,600 1440,600 Z"
);
}
25% {
d: path("M 0,600 C 0,600 0,450 0,450 C 52.38365243004418,442.61487481590575 104.76730486008836,435.2297496318115 160,428 C 215.23269513991164,420.7702503681885 273.3144329896908,413.6958762886598 337,429 C 400.6855670103092,444.3041237113402 469.97496318114884,481.9867452135494 532,475 C 594.0250368188512,468.0132547864506 648.7857142857142,416.3571428571428 704,404 C 759.2142857142858,391.6428571428572 814.8821796759943,418.58468335787927 885,432 C 955.1178203240057,445.41531664212073 1039.6855670103091,445.30412371134014 1102,445 C 1164.3144329896909,444.69587628865986 1204.375552282769,444.19882179676 1257,445 C 1309.624447717231,445.80117820324 1374.8122238586157,447.90058910161997 1440,450 C 1440,450 1440,600 1440,600 Z"
);
}
50% {
d: path("M 0,600 C 0,600 0,450 0,450 C 47.876104565537545,483.7453976435935 95.75220913107509,517.490795287187 155,505 C 214.2477908689249,492.50920471281296 284.86726804123714,433.7822164948454 351,425 C 417.13273195876286,416.2177835051546 478.77871870397644,457.38033873343164 544,451 C 609.2212812960236,444.61966126656836 678.0178571428571,390.69642857142856 745,397 C 811.9821428571429,403.30357142857144 877.149852724595,469.8339469808542 932,490 C 986.850147275405,510.1660530191458 1031.3827319587626,483.9677835051546 1089,478 C 1146.6172680412374,472.0322164948454 1217.3192194403534,486.2949189985273 1278,485 C 1338.6807805596466,483.7050810014727 1389.3403902798232,466.8525405007364 1440,450 C 1440,450 1440,600 1440,600 Z"
);
}
75% {
d: path("M 0,600 C 0,600 0,450 0,450 C 69.84554491899854,441.83836524300443 139.69108983799708,433.6767304860088 201,432 C 262.3089101620029,430.3232695139912 315.0811855670102,435.13144329896903 365,450 C 414.9188144329898,464.86855670103097 461.98416789396185,489.79749631811484 525,477 C 588.0158321060381,464.20250368188516 666.9821428571428,413.67857142857144 735,405 C 803.0178571428572,396.32142857142856 860.0872606774668,429.4882179675993 908,432 C 955.9127393225332,434.5117820324007 994.6688144329896,406.3685567010309 1056,418 C 1117.3311855670104,429.6314432989691 1201.2374815905744,481.0375552282769 1269,493 C 1336.7625184094256,504.9624447717231 1388.381259204713,477.48122238586154 1440,450 C 1440,450 1440,600 1440,600 Z"
);
}
100% {
d: path("M 0,600 C 0,600 0,450 0,450 C 47.57676730486011,426.7192562592047 95.15353460972023,403.4385125184094 164,397 C 232.84646539027977,390.5614874815906 322.9626288659793,400.965206185567 379,411 C 435.0373711340207,421.034793814433 456.9959499263623,430.70066273932247 515,446 C 573.0040500736377,461.29933726067753 667.0535714285714,482.23214285714295 736,471 C 804.9464285714286,459.76785714285705 848.7897643593518,416.37076583210603 897,408 C 945.2102356406482,399.62923416789397 997.7873711340208,426.284793814433 1061,448 C 1124.2126288659792,469.715206185567 1198.0607511045653,486.490058910162 1263,486 C 1327.9392488954347,485.509941089838 1383.9696244477173,467.754970544919 1440,450 C 1440,450 1440,600 1440,600 Z"
);
}
}
</style>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#002bdc"></stop>
<stop offset="95%" stop-color="#32ded4"></stop>
</linearGradient>
</defs>
<path
d="M 0,600 C 0,600 0,450 0,450 C 47.57676730486011,426.7192562592047 95.15353460972023,403.4385125184094 164,397 C 232.84646539027977,390.5614874815906 322.9626288659793,400.965206185567 379,411 C 435.0373711340207,421.034793814433 456.9959499263623,430.70066273932247 515,446 C 573.0040500736377,461.29933726067753 667.0535714285714,482.23214285714295 736,471 C 804.9464285714286,459.76785714285705 848.7897643593518,416.37076583210603 897,408 C 945.2102356406482,399.62923416789397 997.7873711340208,426.284793814433 1061,448 C 1124.2126288659792,469.715206185567 1198.0607511045653,486.490058910162 1263,486 C 1327.9392488954347,485.509941089838 1383.9696244477173,467.754970544919 1440,450 C 1440,450 1440,600 1440,600 Z"
stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1"
class="transition-all duration-300 ease-in-out delay-150 path-2" transform="rotate(-180 720 300)">
</path>
</svg>
</div>
<h2>Qui suis-je ?</h2>
<div class="b1">
<p class="about_1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur iste ex, iusto minima
numquam ipsa impedit reprehenderit veniam omnis optio obcaecati reiciendis atque. Incidunt hic voluptatibus
laborum est praesentium fugiat eaque harum nihil ut molestias! Modi, numquam at placeat asperiores quia
facere facilis autem molestiae praesentium sed corporis excepturi non neque quidem aliquid itaque sint
accusantium ratione. Distinctio, quo! Esse nulla reprehenderit modi at deleniti et explicabo, nemo
asperiores iure quis aperiam animi nisi voluptatem, iste culpa libero? Odio ex quae repellendus quidem
quaerat nobis ut reprehenderit autem quisquam! Nisi voluptate alias iusto? Tempora placeat eveniet fugit
excepturi labore consectetur! Blanditiis est nisi magni magnam asperiores iure ab nobis, cumque ipsum modi
deleniti labore facere similique dicta eius vel sed, necessitatibus esse sequi reiciendis officiis.
Consequuntur, doloremque beatae assumenda numquam eius corrupti omnis fugiat eos dolorem, enim, commodi
quisquam. Enim quidem voluptas ullam error ab voluptatibus rem libero, minus reprehenderit?</p>
<div class="pdp">
<img src="pdp.jpg" alt="Photo de Jonathan">
</div>
</div>
<div class="svg_2">
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 600" xmlns="http://www.w3.org/2000/svg"
class="transition duration-300 ease-in-out delay-150">
<style>
.path-0 {
animation: pathAnim-0 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-0 {
0% {
d: path("M 0,600 C 0,600 0,200 0,200 C 109.29186602870809,156.1531100478469 218.58373205741617,112.30622009569379 306,128 C 393.41626794258383,143.6937799043062 458.9569377990432,218.92822966507174 545,247 C 631.0430622009568,275.07177033492826 737.5885167464113,255.98086124401914 834,239 C 930.4114832535887,222.01913875598086 1016.688995215311,207.1483253588517 1116,201 C 1215.311004784689,194.8516746411483 1327.6555023923445,197.42583732057415 1440,200 C 1440,200 1440,600 1440,600 Z"
);
}
25% {
d: path("M 0,600 C 0,600 0,200 0,200 C 123.28229665071771,159.94258373205741 246.56459330143542,119.88516746411483 330,127 C 413.4354066985646,134.11483253588517 457.02392344497605,188.4019138755981 532,213 C 606.976076555024,237.5980861244019 713.3397129186603,232.50717703349284 816,216 C 918.6602870813397,199.49282296650716 1017.6172248803828,171.56937799043064 1121,167 C 1224.3827751196172,162.43062200956936 1332.1913875598086,181.21531100478467 1440,200 C 1440,200 1440,600 1440,600 Z"
);
}
50% {
d: path("M 0,600 C 0,600 0,200 0,200 C 85.69377990430621,164.41148325358853 171.38755980861242,128.82296650717703 275,130 C 378.6124401913876,131.17703349282297 500.1435406698565,169.1196172248804 611,180 C 721.8564593301435,190.8803827751196 822.0382775119616,174.69856459330143 895,172 C 967.9617224880384,169.30143540669857 1013.7033492822968,180.08612440191388 1100,187 C 1186.2966507177032,193.91387559808612 1313.1483253588517,196.95693779904306 1440,200 C 1440,200 1440,600 1440,600 Z"
);
}
75% {
d: path("M 0,600 C 0,600 0,200 0,200 C 97.44497607655504,217.89473684210526 194.88995215311007,235.78947368421055 291,218 C 387.1100478468899,200.21052631578945 481.88516746411483,146.73684210526315 585,145 C 688.1148325358852,143.26315789473685 799.5693779904307,193.26315789473685 901,217 C 1002.4306220095693,240.73684210526315 1093.8373205741627,238.21052631578948 1182,231 C 1270.1626794258373,223.78947368421052 1355.0813397129186,211.89473684210526 1440,200 C 1440,200 1440,600 1440,600 Z"
);
}
100% {
d: path("M 0,600 C 0,600 0,200 0,200 C 109.29186602870809,156.1531100478469 218.58373205741617,112.30622009569379 306,128 C 393.41626794258383,143.6937799043062 458.9569377990432,218.92822966507174 545,247 C 631.0430622009568,275.07177033492826 737.5885167464113,255.98086124401914 834,239 C 930.4114832535887,222.01913875598086 1016.688995215311,207.1483253588517 1116,201 C 1215.311004784689,194.8516746411483 1327.6555023923445,197.42583732057415 1440,200 C 1440,200 1440,600 1440,600 Z"
);
}
}
</style>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#002bdc"></stop>
<stop offset="95%" stop-color="#32ded4"></stop>
</linearGradient>
</defs>
<path
d="M 0,600 C 0,600 0,200 0,200 C 109.29186602870809,156.1531100478469 218.58373205741617,112.30622009569379 306,128 C 393.41626794258383,143.6937799043062 458.9569377990432,218.92822966507174 545,247 C 631.0430622009568,275.07177033492826 737.5885167464113,255.98086124401914 834,239 C 930.4114832535887,222.01913875598086 1016.688995215311,207.1483253588517 1116,201 C 1215.311004784689,194.8516746411483 1327.6555023923445,197.42583732057415 1440,200 C 1440,200 1440,600 1440,600 Z"
stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53"
class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
<style>
.path-1 {
animation: pathAnim-1 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-1 {
0% {
d: path("M 0,600 C 0,600 0,400 0,400 C 118.7846889952153,378.9952153110048 237.5693779904306,357.99043062200957 330,378 C 422.4306220095694,398.00956937799043 488.5071770334928,459.0334928229665 575,447 C 661.4928229665072,434.9665071770335 768.4019138755983,349.8755980861244 864,332 C 959.5980861244017,314.1244019138756 1043.8851674641148,363.46411483253587 1138,386 C 1232.1148325358852,408.53588516746413 1336.0574162679427,404.26794258373207 1440,400 C 1440,400 1440,600 1440,600 Z"
);
}
25% {
d: path("M 0,600 C 0,600 0,400 0,400 C 114.61244019138758,414.62200956937795 229.22488038277515,429.24401913875596 323,437 C 416.77511961722485,444.75598086124404 489.7129186602871,445.6459330143541 570,431 C 650.2870813397129,416.3540669856459 737.9234449760766,386.17224880382764 842,382 C 946.0765550239234,377.82775119617236 1066.5933014354066,399.665071770335 1169,407 C 1271.4066985645934,414.334928229665 1355.7033492822966,407.1674641148325 1440,400 C 1440,400 1440,600 1440,600 Z"
);
}
50% {
d: path("M 0,600 C 0,600 0,400 0,400 C 80.5263157894737,398.9473684210526 161.0526315789474,397.89473684210526 257,402 C 352.9473684210526,406.10526315789474 464.31578947368416,415.3684210526316 565,435 C 665.6842105263158,454.6315789473684 755.6842105263158,484.6315789473684 842,458 C 928.3157894736842,431.3684210526316 1010.9473684210527,348.10526315789474 1110,329 C 1209.0526315789473,309.89473684210526 1324.5263157894738,354.9473684210526 1440,400 C 1440,400 1440,600 1440,600 Z"
);
}
75% {
d: path("M 0,600 C 0,600 0,400 0,400 C 109.78947368421055,421.03349282296654 219.5789473684211,442.066985645933 322,452 C 424.4210526315789,461.933014354067 519.4736842105264,460.76555023923447 612,433 C 704.5263157894736,405.23444976076553 794.5263157894736,350.8708133971292 878,359 C 961.4736842105264,367.1291866028708 1038.421052631579,437.7511961722488 1131,455 C 1223.578947368421,472.2488038277512 1331.7894736842104,436.1244019138756 1440,400 C 1440,400 1440,600 1440,600 Z"
);
}
100% {
d: path("M 0,600 C 0,600 0,400 0,400 C 118.7846889952153,378.9952153110048 237.5693779904306,357.99043062200957 330,378 C 422.4306220095694,398.00956937799043 488.5071770334928,459.0334928229665 575,447 C 661.4928229665072,434.9665071770335 768.4019138755983,349.8755980861244 864,332 C 959.5980861244017,314.1244019138756 1043.8851674641148,363.46411483253587 1138,386 C 1232.1148325358852,408.53588516746413 1336.0574162679427,404.26794258373207 1440,400 C 1440,400 1440,600 1440,600 Z"
);
}
}
</style>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#002bdc"></stop>
<stop offset="95%" stop-color="#32ded4"></stop>
</linearGradient>
</defs>
<path
d="M 0,600 C 0,600 0,400 0,400 C 118.7846889952153,378.9952153110048 237.5693779904306,357.99043062200957 330,378 C 422.4306220095694,398.00956937799043 488.5071770334928,459.0334928229665 575,447 C 661.4928229665072,434.9665071770335 768.4019138755983,349.8755980861244 864,332 C 959.5980861244017,314.1244019138756 1043.8851674641148,363.46411483253587 1138,386 C 1232.1148325358852,408.53588516746413 1336.0574162679427,404.26794258373207 1440,400 C 1440,400 1440,600 1440,600 Z"
stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1"
class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
</svg>
</div>
</body>