calckey/animated.svg

154 lines
4.9 KiB
XML
Raw Permalink Normal View History

2023-07-19 17:06:57 +00:00
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1792 1792">
<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="firefish-logo-linear-gradient" x1="26.41" y1="1765.71" x2="1492.49" y2="299.62"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ec476d" />
<stop offset="1" stop-color="#f6ae4a" />
</linearGradient>
<linearGradient id="firefish-logo-linear-gradient-purple" x1="512" y1="1788" x2="512" y2="1398.68"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#db44db" stop-opacity=".3" />
<stop offset=".11" stop-color="#db44db" stop-opacity=".21" />
<stop offset=".27" stop-color="#db44db" stop-opacity=".12" />
<stop offset=".44" stop-color="#db44db" stop-opacity=".05" />
<stop offset=".65" stop-color="#db44db" stop-opacity=".01" />
<stop offset="1" stop-color="#db44db" stop-opacity="0" />
</linearGradient>
<linearGradient id="firefish-logo-linear-gradient-3" x1="-351.25" y1="1382.82" x2="1150.74" y2="-119.17"
xlink:href="#firefish-logo-linear-gradient" />
<linearGradient id="firefish-logo-linear-gradient-4" x1="412.3" y1="2147.8" x2="1915.31" y2="644.8"
xlink:href="#firefish-logo-linear-gradient" />
<linearGradient id="firefish-logo-linear-gradient-5" x1="28.25" y1="1763.75" x2="1531.25" y2="260.75"
xlink:href="#firefish-logo-linear-gradient" />
</defs>
<!-- Bubbles -->
<circle id="firefish-logo-bubble-1" class="firefish-logo-bubble" cx="205" cy="500" r="40" />
<circle id="firefish-logo-bubble-2" class="firefish-logo-bubble" cx="140" cy="500" r="80" />
<circle id="firefish-logo-bubble-3" class="firefish-logo-bubble" cx="95" cy="500" r="70" />
<circle id="firefish-logo-bubble-4" class="firefish-logo-bubble" cx="200" cy="500" r="40" />
<circle id="firefish-logo-bubble-5" class="firefish-logo-bubble" cx="95" cy="500" r="20" />
<g id="firefish-logo-firefish">
<g id="firefish-logo-fish">
<g id="firefish-logo-body">
<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(#firefish-logo-linear-gradient)" />
</g>
<g id="firefish-logo-body-purple-grad">
<path
d="m928,768.11H96C42.98,768.11,0,811.09,0,864.11v832c0,53.02,42.98,96,96,96h832c53.02,0,96-42.98,96-96v-832c0-53.02-42.98-96-96-96Z"
fill="url(#firefish-logo-linear-gradient-purple)" />
</g>
<g id="firefish-logo-fin-l">
<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(#firefish-logo-linear-gradient-3)" />
</g>
<g id="firefish-logo-fin-b">
<path
d="m1694.66,1408.11h-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(#firefish-logo-linear-gradient-4)" />
</g>
<g id="firefish-logo-fin-r">
<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(#firefish-logo-linear-gradient-5)" />
</g>
<g id="firefish-logo-eye-l">
<circle cx="256" cy="1408.11" r="128" fill="#fff" />
</g>
<g id="firefish-logo-eye-r">
<circle cx="576" cy="1408.11" r="128" fill="#fff" />
</g>
</g>
</g>
</svg>