fredboniface.co.uk-svelte/static/logos/firefish.svg

115 lines
3.7 KiB
XML

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>/* Eyes */
@keyframes firefish-logo-blink {
95% {
transform: scaleY(1);
}
97.5% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
#firefish-logo-eye-l,
#firefish-logo-eye-r {
transform-origin: center;
transform-box: fill-box;
animation-name: firefish-logo-blink;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/* Bubbles */
@keyframes firefish-logo-bloop {
0% {
transform: translateY(400px);
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
transform: translateY(-400px);
}
}
.firefish-logo-bubble {
animation-name: firefish-logo-bloop;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-timing-function: ease-out;
fill: #31748f;
opacity: 0;
}
#firefish-logo-bubble-1 {
animation-delay: 0s;
}
#firefish-logo-bubble-2 {
animation-delay: .2s;
}
#firefish-logo-bubble-3 {
animation-delay: .6s;
}
#firefish-logo-bubble-4 {
animation-delay: .8s;
}
#firefish-logo-bubble-5 {
animation-delay: 1s;
}</style>
<defs>
<linearGradient id="a" x1="26.41" x2="1492.5" y1="1765.7" y2="299.62" gradientUnits="userSpaceOnUse">
<stop stop-color="#ec476d" offset="0"/>
<stop stop-color="#f6ae4a" offset="1"/>
</linearGradient>
<linearGradient id="b" x1="512" x2="512" y1="1788" y2="1398.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#db44db" stop-opacity=".3" offset="0"/>
<stop stop-color="#db44db" stop-opacity=".21" offset=".11"/>
<stop stop-color="#db44db" stop-opacity=".12" offset=".27"/>
<stop stop-color="#db44db" stop-opacity=".05" offset=".44"/>
<stop stop-color="#db44db" stop-opacity=".01" offset=".65"/>
<stop stop-color="#db44db" stop-opacity="0" offset="1"/>
</linearGradient>
<linearGradient id="e" x1="-351.25" x2="1150.7" y1="1382.8" y2="-119.17" xlink:href="#a"/>
<linearGradient id="d" x1="412.3" x2="1915.3" y1="2147.8" y2="644.8" xlink:href="#a"/>
<linearGradient id="c" x1="28.25" x2="1531.2" y1="1763.8" y2="260.75" xlink:href="#a"/>
</defs>
<circle class="firefish-logo-bubble" cx="205" cy="500" r="40"/>
<circle class="firefish-logo-bubble" cx="140" cy="500" r="80"/>
<circle class="firefish-logo-bubble" cx="95" cy="500" r="70"/>
<circle class="firefish-logo-bubble" cx="200" cy="500" r="40"/>
<circle class="firefish-logo-bubble" cx="95" cy="500" r="20"/>
<path d="m928,768.11H96c-53.02,0-96,42.98-96,96v832c0,53.02,42.98,96,96,96h832c53.02,0,96-42.98,96-96v-832c0-53.02-42.98-96-96-96Z" fill="url(#a)"/>
<path d="m928 768.11h-832c-53.02 0-96 42.98-96 96v832c0 53.02 42.98 96 96 96h832c53.02 0 96-42.98 96-96v-832c0-53.02-42.98-96-96-96z" fill="url(#b)"/>
<path d="m927.66,639.79h-439.94c-52.98,0-95.94-42.95-95.94-95.94V103.91c0-85.47,103.34-128.27,163.77-67.84l439.94,439.94c60.44,60.44,17.63,163.77-67.84,163.77Z" fill="url(#e)"/>
<path d="m1694.7 1408.1h-445.51c-53.65 0-97.15-43.5-97.15-97.15v-445.51c0-86.55 104.64-129.9 165.84-68.7l445.51 445.51c61.2 61.2 17.86 165.84-68.7 165.84z" fill="url(#d)"/>
<path d="m1694.66,640h-445.51c-53.65,0-97.15-43.5-97.15-97.15V97.34c0-86.55,104.64-129.9,165.84-68.7l445.51,445.51c61.2,61.2,17.86,165.84-68.7,165.84Z" fill="url(#c)"/>
<circle cx="256" cy="1408.1" r="128" fill="#1e1e1e"/>
<circle cx="576" cy="1408.1" r="128" fill="#1e1e1e"/>
</svg>