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
|
<svg height="800" width="800" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" xml:space="preserve">
<style>
text {
font-family: monospace;
font-weight: 800;
font-size: 80px;
}
.webp2 {
animation: webp2 7.5s infinite;
}
.jxl {
animation: jxl 7.5s infinite;
}
.avif {
animation: avif 7.5s infinite;
}
@keyframes webp2 {
0% {
fill: #FFF0;
stroke: #FFFF;
stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;
}
23.33% {fill: rgba(72,138,20,0); stroke: #FFFF; }
26.666% {fill: rgba(72,138,20,0); stroke: #FFFF; stroke-width: 5; }
33.33% {
fill: #FFFF; stroke: rgba(54,95,160,0);
stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 5;
}
35% {
fill: #FFF0; stroke: rgba(54,95,160,0);
stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
}
100% {
fill: #FFF0; stroke: rgba(54,95,160,0);
stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
}
}
@keyframes avif {
0% {
fill: #FFF0;
stroke: #FFFF;
stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 0;
}
33.33% {
fill: #FFF0;
stroke: #FFFF;
stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;
}
56.66% {fill: rgba(72,138,20,0); stroke: #FFFF; }
54% {fill: rgba(72,138,20,0); stroke: #FFFF; stroke-width: 5; }
66.66% {
fill: #FFFF; stroke: rgba(54,95,160,0);
stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 5;
}
68% {
fill: #FFF0; stroke: rgba(54,95,160,0);
stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
}
100% {
fill: #FFF0; stroke: rgba(54,95,160,0);
stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
}
}
@keyframes jxl {
0% {
fill: #FFF0;
stroke: #FFFF;
stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 0;
}
66.66% {
fill: #FFF0;
stroke: #FFFF;
stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;
}
81% {fill: rgba(72,138,20,0); stroke: #FFFF; }
87% {fill: rgba(72,138,20,0); stroke: #FFFF; stroke-width: 5; }
100% {
fill: #FFFF; stroke: rgba(54,95,160,0);
stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 5;
}
}
</style>
<path style="fill:#ECEDEF;" d="M100.641,0c-14.139,0-25.6,11.461-25.6,25.6v460.8c0,14.139,11.461,25.6,25.6,25.6h375.467
c14.139,0,25.6-11.461,25.6-25.6V85.333L416.375,0H100.641z"/>
<path style="fill:#D9DCDF;" d="M441.975,85.333h59.733L416.375,0v59.733C416.375,73.872,427.836,85.333,441.975,85.333z"/>
<path style="fill:#C6CACF;" d="M399.308,42.667H75.041v153.6h324.267c4.713,0,8.533-3.821,8.533-8.533V51.2
C407.841,46.487,404.02,42.667,399.308,42.667z"/>
<path style="fill:#FF8C78;" d="M382.241,179.2H18.843c-7.602,0-11.41-9.191-6.034-14.567L75.041,102.4L12.809,40.167
C7.433,34.791,11.241,25.6,18.843,25.6h363.398c4.713,0,8.533,3.821,8.533,8.533v136.533
C390.775,175.379,386.954,179.2,382.241,179.2z"/>
<g>
<text x="22%" y="27%" class="webp2">WebP2</text>
<text x="23%" y="27%" class="avif">AVIF</text>
<text x="27%" y="27%" class="jxl">JXL</text>
</g>
<path style="fill:#3C9FE8;" d="M399.308,477.867H177.441c-9.426,0-17.067-7.641-17.067-17.067V238.933
c0-9.426,7.641-17.067,17.067-17.067h221.867c9.426,0,17.067,7.641,17.067,17.067V460.8
C416.375,470.226,408.734,477.867,399.308,477.867z"/>
<path style="fill:#8AC451;" d="M160.375,460.8c0,9.426,7.641,17.067,17.067,17.067h221.867c9.426,0,17.067-7.641,17.067-17.067
v-25.6h-256L160.375,460.8L160.375,460.8z"/>
<circle style="fill:#FFD791;" cx="279.84" cy="281.6" r="42.667"/>
<circle style="fill:#FFC44F;" cx="279.84" cy="281.6" r="25.6"/>
<g>
<path style="fill:#C5E8FA;" d="M211.575,256h-17.067c-4.713,0-8.533-3.821-8.533-8.533c0-4.713,3.821-8.533,8.533-8.533h17.067
c4.713,0,8.533,3.821,8.533,8.533C220.108,252.179,216.288,256,211.575,256z"/>
<path style="fill:#C5E8FA;" d="M365.175,290.133h-17.067c-4.713,0-8.533-3.821-8.533-8.533c0-4.713,3.821-8.533,8.533-8.533h17.067
c4.713,0,8.533,3.821,8.533,8.533C373.708,286.313,369.888,290.133,365.175,290.133z"/>
<path style="fill:#C5E8FA;" d="M382.241,315.733h-17.067c-4.713,0-8.533-3.821-8.533-8.533s3.821-8.533,8.533-8.533h17.067
c4.713,0,8.533,3.821,8.533,8.533S386.955,315.733,382.241,315.733z"/>
</g>
<polygon style="fill:#C4DF64;" points="160.375,358.4 220.108,290.133 322.508,409.6 365.175,358.4 416.375,418.133 416.375,435.2
160.375,435.2 "/>
<g>
<polygon style="fill:#ECEDEF;" points="365.175,358.4 329.619,401.067 401.746,401.067 "/>
<polygon style="fill:#ECEDEF;" points="220.108,290.133 167.841,349.867 271.308,349.867 "/>
</g>
</svg>
|
