diff options
Diffstat (limited to 'src/img/image-formats.svg')
| -rw-r--r-- | src/img/image-formats.svg | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/src/img/image-formats.svg b/src/img/image-formats.svg new file mode 100644 index 0000000..7248f25 --- /dev/null +++ b/src/img/image-formats.svg @@ -0,0 +1,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>
\ No newline at end of file |
