-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path22.html
100 lines (100 loc) · 12.1 KB
/
22.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
<!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>Document</title>
</head>
<body>
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 700" 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,700 C 0,700 0,140 0,140 C 137.10714285714286,164.85714285714286 274.2142857142857,189.71428571428572 382,186 C 489.7857142857143,182.28571428571428 568.25,150 686,132 C 803.75,113.99999999999999 960.7857142857144,110.28571428571428 1093,114 C 1225.2142857142856,117.71428571428572 1332.6071428571427,128.85714285714286 1440,140 C 1440,140 1440,700 1440,700 Z");
}
25%{
d: path("M 0,700 C 0,700 0,140 0,140 C 152.35714285714286,137.64285714285714 304.7142857142857,135.28571428571428 404,147 C 503.2857142857143,158.71428571428572 549.5000000000001,184.49999999999997 667,186 C 784.4999999999999,187.50000000000003 973.2857142857142,164.71428571428572 1114,153 C 1254.7142857142858,141.28571428571428 1347.357142857143,140.64285714285714 1440,140 C 1440,140 1440,700 1440,700 Z");
}
50%{
d: path("M 0,700 C 0,700 0,140 0,140 C 79.53571428571428,110 159.07142857142856,80 292,90 C 424.92857142857144,100 611.2500000000001,150 736,166 C 860.7499999999999,182 923.9285714285713,164 1031,154 C 1138.0714285714287,144 1289.0357142857142,142 1440,140 C 1440,140 1440,700 1440,700 Z");
}
75%{
d: path("M 0,700 C 0,700 0,140 0,140 C 100.60714285714286,128.75 201.21428571428572,117.5 329,129 C 456.7857142857143,140.5 611.75,174.75000000000003 756,172 C 900.25,169.24999999999997 1033.7857142857142,129.5 1146,118 C 1258.2142857142858,106.5 1349.107142857143,123.25 1440,140 C 1440,140 1440,700 1440,700 Z");
}
100%{
d: path("M 0,700 C 0,700 0,140 0,140 C 137.10714285714286,164.85714285714286 274.2142857142857,189.71428571428572 382,186 C 489.7857142857143,182.28571428571428 568.25,150 686,132 C 803.75,113.99999999999999 960.7857142857144,110.28571428571428 1093,114 C 1225.2142857142856,117.71428571428572 1332.6071428571427,128.85714285714286 1440,140 C 1440,140 1440,700 1440,700 Z");
}
}</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#002bdc44"></stop><stop offset="95%" stop-color="#32ded444"></stop></linearGradient></defs><path d="M 0,700 C 0,700 0,140 0,140 C 137.10714285714286,164.85714285714286 274.2142857142857,189.71428571428572 382,186 C 489.7857142857143,182.28571428571428 568.25,150 686,132 C 803.75,113.99999999999999 960.7857142857144,110.28571428571428 1093,114 C 1225.2142857142856,117.71428571428572 1332.6071428571427,128.85714285714286 1440,140 C 1440,140 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="url(#gradient)" 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,700 C 0,700 0,280 0,280 C 150.03571428571428,299.32142857142856 300.07142857142856,318.64285714285717 414,310 C 527.9285714285714,301.35714285714283 605.75,264.75 723,263 C 840.25,261.25 996.9285714285713,294.3571428571429 1123,303 C 1249.0714285714287,311.6428571428571 1344.5357142857142,295.82142857142856 1440,280 C 1440,280 1440,700 1440,700 Z");
}
25%{
d: path("M 0,700 C 0,700 0,280 0,280 C 114.60714285714286,258 229.21428571428572,236 355,247 C 480.7857142857143,258 617.75,302 746,308 C 874.25,314 993.7857142857142,282 1108,271 C 1222.2142857142858,260 1331.107142857143,270 1440,280 C 1440,280 1440,700 1440,700 Z");
}
50%{
d: path("M 0,700 C 0,700 0,280 0,280 C 109.67857142857142,304.82142857142856 219.35714285714283,329.64285714285717 328,326 C 436.64285714285717,322.35714285714283 544.2499999999999,290.25 658,283 C 771.7500000000001,275.75 891.6428571428573,293.35714285714283 1023,297 C 1154.3571428571427,300.64285714285717 1297.1785714285713,290.32142857142856 1440,280 C 1440,280 1440,700 1440,700 Z");
}
75%{
d: path("M 0,700 C 0,700 0,280 0,280 C 147.92857142857144,282.4642857142857 295.8571428571429,284.92857142857144 410,277 C 524.1428571428571,269.07142857142856 604.5000000000001,250.74999999999997 727,247 C 849.4999999999999,243.25000000000003 1014.1428571428571,254.07142857142856 1140,262 C 1265.857142857143,269.92857142857144 1352.9285714285716,274.9642857142857 1440,280 C 1440,280 1440,700 1440,700 Z");
}
100%{
d: path("M 0,700 C 0,700 0,280 0,280 C 150.03571428571428,299.32142857142856 300.07142857142856,318.64285714285717 414,310 C 527.9285714285714,301.35714285714283 605.75,264.75 723,263 C 840.25,261.25 996.9285714285713,294.3571428571429 1123,303 C 1249.0714285714287,311.6428571428571 1344.5357142857142,295.82142857142856 1440,280 C 1440,280 1440,700 1440,700 Z");
}
}</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#002bdc66"></stop><stop offset="95%" stop-color="#32ded466"></stop></linearGradient></defs><path d="M 0,700 C 0,700 0,280 0,280 C 150.03571428571428,299.32142857142856 300.07142857142856,318.64285714285717 414,310 C 527.9285714285714,301.35714285714283 605.75,264.75 723,263 C 840.25,261.25 996.9285714285713,294.3571428571429 1123,303 C 1249.0714285714287,311.6428571428571 1344.5357142857142,295.82142857142856 1440,280 C 1440,280 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="url(#gradient)" class="transition-all duration-300 ease-in-out delay-150 path-1"></path><style>
.path-2{
animation:pathAnim-2 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-2{
0%{
d: path("M 0,700 C 0,700 0,420 0,420 C 89.14285714285714,397.6428571428571 178.28571428571428,375.2857142857143 314,375 C 449.7142857142857,374.7142857142857 632.0000000000001,396.49999999999994 759,415 C 885.9999999999999,433.50000000000006 957.7142857142858,448.7142857142858 1062,449 C 1166.2857142857142,449.2857142857142 1303.142857142857,434.6428571428571 1440,420 C 1440,420 1440,700 1440,700 Z");
}
25%{
d: path("M 0,700 C 0,700 0,420 0,420 C 108.07142857142858,430.4642857142857 216.14285714285717,440.92857142857144 336,445 C 455.85714285714283,449.07142857142856 587.4999999999999,446.74999999999994 722,433 C 856.5000000000001,419.25000000000006 993.8571428571429,394.0714285714286 1114,390 C 1234.142857142857,385.9285714285714 1337.0714285714284,402.96428571428567 1440,420 C 1440,420 1440,700 1440,700 Z");
}
50%{
d: path("M 0,700 C 0,700 0,420 0,420 C 146.96428571428572,403.3928571428571 293.92857142857144,386.7857142857143 404,395 C 514.0714285714286,403.2142857142857 587.25,436.24999999999994 690,445 C 792.75,453.75000000000006 925.0714285714284,438.2142857142857 1055,430 C 1184.9285714285716,421.7857142857143 1312.4642857142858,420.8928571428571 1440,420 C 1440,420 1440,700 1440,700 Z");
}
75%{
d: path("M 0,700 C 0,700 0,420 0,420 C 120.39285714285714,446.9642857142857 240.78571428571428,473.92857142857144 354,464 C 467.2142857142857,454.07142857142856 573.2500000000001,407.25000000000006 702,402 C 830.7499999999999,396.74999999999994 982.2142857142856,433.07142857142856 1109,443 C 1235.7857142857144,452.92857142857144 1337.8928571428573,436.4642857142857 1440,420 C 1440,420 1440,700 1440,700 Z");
}
100%{
d: path("M 0,700 C 0,700 0,420 0,420 C 89.14285714285714,397.6428571428571 178.28571428571428,375.2857142857143 314,375 C 449.7142857142857,374.7142857142857 632.0000000000001,396.49999999999994 759,415 C 885.9999999999999,433.50000000000006 957.7142857142858,448.7142857142858 1062,449 C 1166.2857142857142,449.2857142857142 1303.142857142857,434.6428571428571 1440,420 C 1440,420 1440,700 1440,700 Z");
}
}</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#002bdc88"></stop><stop offset="95%" stop-color="#32ded488"></stop></linearGradient></defs><path d="M 0,700 C 0,700 0,420 0,420 C 89.14285714285714,397.6428571428571 178.28571428571428,375.2857142857143 314,375 C 449.7142857142857,374.7142857142857 632.0000000000001,396.49999999999994 759,415 C 885.9999999999999,433.50000000000006 957.7142857142858,448.7142857142858 1062,449 C 1166.2857142857142,449.2857142857142 1303.142857142857,434.6428571428571 1440,420 C 1440,420 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="url(#gradient)" class="transition-all duration-300 ease-in-out delay-150 path-2"></path><style>
.path-3{
animation:pathAnim-3 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-3{
0%{
d: path("M 0,700 C 0,700 0,560 0,560 C 110.39285714285714,560.4642857142858 220.78571428571428,560.9285714285714 354,568 C 487.2142857142857,575.0714285714286 643.2499999999999,588.7499999999999 760,588 C 876.7500000000001,587.2500000000001 954.2142857142858,572.0714285714287 1061,565 C 1167.7857142857142,557.9285714285713 1303.892857142857,558.9642857142857 1440,560 C 1440,560 1440,700 1440,700 Z");
}
25%{
d: path("M 0,700 C 0,700 0,560 0,560 C 107.92857142857142,583.3214285714286 215.85714285714283,606.6428571428571 355,609 C 494.14285714285717,611.3571428571429 664.5,592.7500000000001 783,584 C 901.5,575.2499999999999 968.1428571428571,576.3571428571429 1069,574 C 1169.857142857143,571.6428571428571 1304.9285714285716,565.8214285714286 1440,560 C 1440,560 1440,700 1440,700 Z");
}
50%{
d: path("M 0,700 C 0,700 0,560 0,560 C 117.5,543.25 235,526.5 372,538 C 509,549.5 665.5,589.25 766,606 C 866.5,622.75 911,616.5 1014,605 C 1117,593.5 1278.5,576.75 1440,560 C 1440,560 1440,700 1440,700 Z");
}
75%{
d: path("M 0,700 C 0,700 0,560 0,560 C 90.14285714285714,563.1428571428571 180.28571428571428,566.2857142857143 315,565 C 449.7142857142857,563.7142857142857 629,558 757,549 C 885,540 961.7142857142858,527.7142857142857 1067,529 C 1172.2857142857142,530.2857142857143 1306.142857142857,545.1428571428571 1440,560 C 1440,560 1440,700 1440,700 Z");
}
100%{
d: path("M 0,700 C 0,700 0,560 0,560 C 110.39285714285714,560.4642857142858 220.78571428571428,560.9285714285714 354,568 C 487.2142857142857,575.0714285714286 643.2499999999999,588.7499999999999 760,588 C 876.7500000000001,587.2500000000001 954.2142857142858,572.0714285714287 1061,565 C 1167.7857142857142,557.9285714285713 1303.892857142857,558.9642857142857 1440,560 C 1440,560 1440,700 1440,700 Z");
}
}</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#002bdcff"></stop><stop offset="95%" stop-color="#32ded4ff"></stop></linearGradient></defs><path d="M 0,700 C 0,700 0,560 0,560 C 110.39285714285714,560.4642857142858 220.78571428571428,560.9285714285714 354,568 C 487.2142857142857,575.0714285714286 643.2499999999999,588.7499999999999 760,588 C 876.7500000000001,587.2500000000001 954.2142857142858,572.0714285714287 1061,565 C 1167.7857142857142,557.9285714285713 1303.892857142857,558.9642857142857 1440,560 C 1440,560 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="url(#gradient)" class="transition-all duration-300 ease-in-out delay-150 path-3"></path></svg>
</body>
</html>