fred.boniface/fredboniface.co.uk-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add pixelfed feed to homepage

Browse Source
This commit is contained in:
Fred Boniface 2023-11-04 00:46:01 +00:00
parent f31a282a89
commit 855ac37971
8 changed files with 259 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/lib/feeds/pixelfed.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import type { AtomFeed, PixelfedFeed } from "./feedTypes";
import EmptyCard from "$lib/card-collections/cards/EmptyCard.svelte";
import type { AtomFeed, PixelfedFeed } from "./feedTypes";
export let pixelfedFeed: string;
@ -56,15 +57,15 @@
}
</script>
{#await loadFeed(pixelfedFeed)}
<h5>Conneting to Pixelfed</h5>
{:then feedData}
<h5><a href="{feedData?.url}">Pixelfed</a></h5>
<p class="updated">{feedData?.updated}</p>
<h5>Loading Pixelfed feed</h5>
{:then feedData}
{#each feedData.content as feedItem}
<a href={feedItem.pixelfedUrl}>
<img class="pixelfedImg" src="{feedItem.imgUrl}" alt="{feedItem.title}">
</a>
<caption>{feedItem.title}</caption>
<EmptyCard>
<p>{feedItem.title?.split('|')[0]}</p>
<a href={feedItem.pixelfedUrl}>
<img class="pixelfedImg" src="{feedItem.imgUrl}" alt="{feedItem.title}">
</a>
</EmptyCard>
{/each}
{:catch}
<h5>Error connecting to Pixelfed</h5>
@ -72,7 +73,14 @@
<style>
.pixelfedImg {
width: 50%;
width: 80%;
max-width: 600px;
margin: auto;
}
p {
text-align: center;
margin: auto;
font-weight: bolder;
margin-bottom: 5px;
}
</style>

23
src/lib/footer.svelte
View File

@ -6,6 +6,26 @@
img: '/logos/git.svg',
link: 'https://git.fjla.uk/explore',
alt: 'See my work on Gitea'
},
{
img: '/logos/pixelfed.svg',
link: 'https://pixelfed.scot/@fbface',
alt: 'See my photography on Pixelfed'
},
{
img: '/logos/flickr.svg',
link: 'https://www.flickr.com/photos/fboniface/',
alt: "Find me on Flickr"
},
{
img: '/logos/mastodon.svg',
link: 'https://mastodon.social/@fb@ibe.social',
alt: 'Find me on Mastodon'
},
{
img: '/logos/firefish.svg',
link: 'https://ibe.social/@fb',
alt: 'Find me on Firefish'
}
];
</script>
@ -51,7 +71,8 @@
}
.link-image {
height: 20px;
height: 27px;
margin: 5px;
}
.link-columns {

11
src/routes/+page.server.ts Normal file
View File

@ -0,0 +1,11 @@
import type { PageServerLoad } from "./$types";
export const load: PageServerLoad = async () => {
try {
const res = await fetch("https://pixelfed.scot/users/fbface.atom")
const xml = await res.text();
return {xml: xml}
} catch (err) {
console.error("Error in load function", err)
}
}

11
src/routes/+page.svelte
View File

@ -5,6 +5,10 @@
import LatestPosts from '$lib/card-collections/LatestPosts.svelte';
import TagsCard from '$lib/card-collections/cards/TagsCard.svelte';
import Projects from '$lib/card-collections/Projects.svelte';
import Pixelfed from "$lib/feeds/pixelfed.svelte";
import type { PageData } from "../$types";
export let data: PageData;
const title: string = "Hi, I'm Fred";
const columnLength = 7;
@ -17,7 +21,6 @@
<p>
I enjoy creating websites and web applications, capturing landscapes through photography, and indulging in the world of model railways. Alongside these passions, I actively participate within the RMT Union.
</p>
<p>Sometimes, I try and write about it too.</p>
</div>
</div>
<div id="header-visual">
@ -29,9 +32,9 @@
</div>
</section>
<section id="meta-links">
<div id="projects" class="col">
<h1>Projects</h1>
<Projects />
<div id="pixelfed" class="col">
<h1>Photos</h1>
<Pixelfed pixelfedFeed={data.xml} />
</div>
<div id="posts" class="col">
<h1>Posts</h1>

114
static/logos/firefish.svg Normal file
View File

@ -0,0 +1,114 @@
<?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>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

1
static/logos/flickr.svg Normal file
View File

@ -0,0 +1 @@
<svg width="2500" height="2500" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#FFF" offset="0%"/><stop stop-color="#F3F3F3" offset="100%"/></linearGradient><linearGradient x1="50%" y1="3.298%" x2="50%" y2="100%" id="b"><stop stop-color="#DCDCDC" offset="0%"/><stop stop-color="#D2D2D2" offset="100%"/></linearGradient><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="c"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetInner1"/><feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"/><feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.248847939 0" in="shadowInnerInner1" result="shadowMatrixInner1"/><feMerge><feMergeNode in="SourceGraphic"/><feMergeNode in="shadowMatrixInner1"/></feMerge></filter><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="d"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetInner1"/><feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"/><feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.248847939 0" in="shadowInnerInner1" result="shadowMatrixInner1"/><feMerge><feMergeNode in="SourceGraphic"/><feMergeNode in="shadowMatrixInner1"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd"><rect fill="url(#a)" x="4.464" y="4.464" width="247.435" height="247.435" rx="28"/><path d="M46.703 8.017C25.3 8.017 7.885 25.432 7.885 46.836v162.311c0 21.404 17.414 38.819 38.818 38.819h162.31c21.406 0 38.819-17.415 38.819-38.819V46.836c0-21.404-17.413-38.819-38.819-38.819H46.703zm162.31 247.603H46.703c-25.625 0-46.472-20.849-46.472-46.473V46.836C.23 21.21 21.078.36 46.703.36h162.31c25.627 0 46.474 20.85 46.474 46.476v162.311c0 25.624-20.847 46.473-46.474 46.473z" fill="url(#b)"/><path d="M116.254 127.99c0 19.45-15.763 35.211-35.21 35.211-19.446 0-35.209-15.762-35.209-35.21 0-19.446 15.763-35.212 35.21-35.212 19.446 0 35.21 15.766 35.21 35.211" fill="#1D66D8" filter="url(#c)"/><path d="M209.884 127.99c0 19.45-15.765 35.211-35.21 35.211-19.448 0-35.212-15.762-35.212-35.21 0-19.446 15.764-35.212 35.211-35.212 19.446 0 35.211 15.766 35.211 35.211" fill="#FB0A84" filter="url(#d)"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

5
static/logos/mastodon.svg Normal file
View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="61.077mm" height="65.478mm" viewBox="0 0 216.41 232.01" xmlns="http://www.w3.org/2000/svg">
<path d="m211.81 139.09c-3.1812 16.366-28.492 34.278-57.562 37.749-15.159 1.8088-30.084 3.4712-45.999 2.7412-26.028-1.1925-46.565-6.2125-46.565-6.2125 0 2.5338 0.15625 4.9462 0.46875 7.2025 3.3838 25.686 25.47 27.225 46.391 27.942 21.116 0.7225 39.919-5.2062 39.919-5.2062l0.8675 19.09s-14.77 7.9312-41.081 9.39c-14.509 0.7975-32.524-0.365-53.506-5.9188-45.508-12.045-53.334-60.554-54.531-109.77-0.365-14.614-0.14-28.394-0.14-39.919 0-50.33 32.976-65.082 32.976-65.082 16.628-7.6362 45.159-10.848 74.82-11.09h0.72875c29.661 0.2425 58.211 3.4538 74.838 11.09 0 0 32.975 14.752 32.975 65.082 0 0 0.41375 37.134-4.5988 62.915" fill="#2b90d9"/>
<path d="m177.51 80.077v60.941h-24.144v-59.15c0-12.469-5.2462-18.798-15.74-18.798-11.602 0-17.418 7.5075-17.418 22.352v32.376h-24.001v-32.376c0-14.845-5.8162-22.352-17.419-22.352-10.494 0-15.74 6.3288-15.74 18.798v59.15h-24.144v-60.941c0-12.455 3.1712-22.352 9.5412-29.675 6.5688-7.3225 15.171-11.076 25.85-11.076 12.355 0 21.711 4.7488 27.898 14.248l6.0138 10.081 6.015-10.081c6.185-9.4988 15.541-14.248 27.898-14.248 10.678 0 19.28 3.7538 25.85 11.076 6.3688 7.3225 9.54 17.22 9.54 29.675" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

81
static/logos/pixelfed.svg Normal file
View File

@ -0,0 +1,81 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<defs>
<linearGradient id="a" x1="1" x2="0" y1=".55807" y2=".60118">
<stop stop-color="#FF5C34" offset="0"/>
<stop stop-color="#EB0256" offset="1"/>
</linearGradient>
<linearGradient id="h" x1=".5" x2=".3056" y1="1.1191">
<stop stop-color="#FFB000" offset="0"/>
<stop stop-color="#FF7725" offset="1"/>
</linearGradient>
<filter id="m" x="-.266" y="-.189" width="1.532" height="1.472">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.298686594 0"/>
</filter>
<linearGradient id="g" x1="38.66" x2="29.418" y1="42.314" y2="17.769" gradientTransform="scale(.85442 1.1704)" gradientUnits="userSpaceOnUse">
<stop stop-color="#21EFE3" offset="0"/>
<stop stop-color="#2598FF" offset="1"/>
</linearGradient>
<linearGradient id="f" x1="32.778" x2="-5.7372" y1="31.292" y2="34.564" gradientTransform="scale(.85442 1.1704)" gradientUnits="userSpaceOnUse">
<stop stop-color="#A63FDB" offset="0"/>
<stop stop-color="#FF257E" offset="1"/>
</linearGradient>
<linearGradient id="e" x1="26.799" x2="6.4908" y1="19.64" y2="20.515" gradientTransform="scale(.85442 1.1704)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
<linearGradient id="d" x1="26.799" x2="6.4908" y1="19.64" y2="20.515" gradientTransform="matrix(.73238 -.44006 .60279 1.0032 -5.4387 4.178)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
<linearGradient id="b" x1="15.185" x2="9.5917" y1="33.22" y2="1.0193" gradientTransform="matrix(.87275 .73232 -.5642 .67238 20.873 -10.32)" gradientUnits="userSpaceOnUse" xlink:href="#h"/>
<linearGradient id="c" x1="16.691" x2="57.873" y1="19.196" y2="21.721" gradientTransform="scale(.85442 1.1704)" gradientUnits="userSpaceOnUse">
<stop stop-color="#9EE85D" offset="0"/>
<stop stop-color="#0ED061" offset="1"/>
</linearGradient>
<linearGradient id="l" x1="40.014" x2="21.611" y1="3.0504" y2="22.693" gradientTransform="matrix(.80281 .67364 -.61335 .73096 20.873 -10.32)" gradientUnits="userSpaceOnUse">
<stop stop-color="#17C934" offset="0"/>
<stop stop-color="#03FF6E" offset="1"/>
</linearGradient>
<linearGradient id="k" x1="31.906" x2="56.143" y1="22.861" y2="28.198" gradientTransform="matrix(.67306 .56477 -.73159 .87187 20.873 -10.32)" gradientUnits="userSpaceOnUse">
<stop stop-color="#00FFF0" offset="0"/>
<stop stop-color="#0087FF" offset="1"/>
</linearGradient>
<linearGradient id="j" x1="18.604" x2="29.552" y1="60.089" y2="34.263" gradientTransform="matrix(.93317 .78302 -.52767 .62885 20.873 -10.32)" gradientUnits="userSpaceOnUse">
<stop stop-color="#A63FDB" offset="0"/>
<stop stop-color="#FF257E" offset="1"/>
</linearGradient>
<linearGradient id="i" x1="30.973" x2="1.1089" y1="27.509" y2="28.797" gradientTransform="matrix(.64007 .53708 -.7693 .91682 20.873 -10.32)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
</defs>
<path d="m24.845 25.209c-4.0661-5.5627-11.842-6.8376-17.367-2.8475-5.5256 3.9901-6.7089 11.734-2.6428 17.297l0.30762 0.42085c-6.6308-8.6726-6.9571-20.838-0.34676-29.753l0.1177-0.1564c4.0954-5.4421 11.877-6.4871 17.381-2.334 5.5039 4.153 6.6458 11.931 2.5504 17.374z" fill="url(#i)"/>
<path d="m24.845 25.209c-6.473 2.1894-9.8779 9.2223-7.605 15.709 2.2729 6.4862 9.3628 9.9695 15.836 7.7802l0.42883-0.14504c-8.0498 2.8803-17.428 1.495-24.513-4.4501-1.457-1.2226-2.741-2.5742-3.849-4.0233l-0.30762-0.42085c-4.0661-5.5627-2.8829-13.307 2.6428-17.297 5.5256-3.9901 13.301-2.7152 17.367 2.8475z" fill="url(#j)"/>
<path d="m24.845 25.209c0.04163 6.8456 5.6368 12.429 12.497 12.47 6.8603 0.04163 12.388-5.4741 12.346-12.32l-9.53e-4 -0.15675c0.07327 5.6792-1.798 11.389-5.7144 16.056-2.8834 3.4363-6.5158 5.879-10.468 7.2933l-0.42883 0.14504c-6.473 2.1894-13.563-1.2939-15.836-7.7802-2.2729-6.4862 1.132-13.519 7.605-15.709z" fill="url(#k)"/>
<path d="m24.845 25.209c6.5374 2.155 13.523-1.3654 15.604-7.8632 2.0804-6.4977-1.5328-13.512-8.0702-15.667l-0.53519-0.17642c3.1499 0.95898 6.1674 2.558 8.8551 4.8132 5.8388 4.8994 8.8984 11.87 8.9889 18.887l9.53e-4 0.15675c0.04163 6.8456-5.486 12.361-12.346 12.32-6.8603-0.04163-12.455-5.6249-12.497-12.47z" fill="url(#l)"/>
<path d="m24.845 25.209c4.0954-5.4421 2.9535-13.221-2.5504-17.374-5.5039-4.153-13.286-3.1081-17.381 2.334l-0.1177 0.1564c0.29338-0.39567 0.60043-0.78493 0.92119-1.1672 6.5281-7.7799 16.895-10.467 26.126-7.6564l0.53519 0.17642c6.5374 2.155 10.151 9.1694 8.0702 15.667-2.0804 6.4977-9.0664 10.018-15.604 7.8632z" fill="url(#b)"/>
<g transform="matrix(-.37461 .92718 -.92719 -.37461 68.842 2.1229)" opacity=".54425">
<path d="m28.379 9.2701 0.18698-0.07462c6.3931-2.5513 13.67 0.49954 16.253 6.8143 2.583 6.3148-0.50574 13.502-6.8989 16.053-0.05343-1.007-0.22773-1.9795-0.50829-2.9043 3.43-1.8567 5.7555-5.456 5.7555-9.5919 0-6.0367-4.9545-10.93-11.066-10.93-1.3058 0-2.5588 0.2234-3.7219 0.63361z" fill="url(#c)"/>
<path d="m28.379 9.2701 0.18698-0.07462c6.3931-2.5513 13.67 0.49954 16.253 6.8143 2.583 6.3148-0.50574 13.502-6.8989 16.053-0.05343-1.007-0.22773-1.9795-0.50829-2.9043 3.43-1.8567 5.7555-5.456 5.7555-9.5919 0-6.0367-4.9545-10.93-11.066-10.93-1.3058 0-2.5588 0.2234-3.7219 0.63361z" fill-opacity=".49989" style="mix-blend-mode:overlay"/>
</g>
<path d="m24.845 25.209c4.0954-5.4421 2.9535-13.221-2.5504-17.374-5.5039-4.153-13.286-3.1081-17.381 2.334l-0.1177 0.1564c0.29338-0.39567 0.60043-0.78493 0.92119-1.1672 6.5281-7.7799 16.895-10.467 26.126-7.6564l0.53519 0.17642c6.5374 2.155 10.151 9.1694 8.0702 15.667-2.0804 6.4977-9.0664 10.018-15.604 7.8632z" fill="url(#b)" opacity=".1"/>
<path d="m4.8245 10.491 0.12184-0.16026c4.166-5.4796 11.975-6.6123 17.441-2.5298 5.4664 4.0825 6.5206 11.834 2.3547 17.314-0.56445-0.83566-1.2147-1.5794-1.9315-2.2277 1.9838-3.3581 2.1234-7.6411-0.0068-11.186-3.1092-5.1745-9.8765-6.8175-15.115-3.6698-1.1193 0.67254-2.0782 1.5094-2.864 2.46z" fill="url(#d)" opacity=".18013"/>
<g transform="matrix(.85717 -.51504 .51504 .85717 -5.2723 4.3342)" opacity=".18013">
<path d="m5.5459 10.697 0.18698-0.07462c6.3932-2.5513 13.67 0.49954 16.253 6.8143 2.583 6.3148-0.50574 13.502-6.8989 16.053-0.05343-1.007-0.22773-1.9795-0.50829-2.9043 3.43-1.8567 5.7555-5.456 5.7555-9.5919 0-6.0367-4.9545-10.93-11.066-10.93-1.3058 0-2.5588 0.2234-3.7219 0.63361z" fill="url(#e)"/>
<path d="m5.5459 10.697 0.18698-0.07462c6.3932-2.5513 13.67 0.49954 16.253 6.8143 2.583 6.3148-0.50574 13.502-6.8989 16.053-0.05343-1.007-0.22773-1.9795-0.50829-2.9043 3.43-1.8567 5.7555-5.456 5.7555-9.5919 0-6.0367-4.9545-10.93-11.066-10.93-1.3058 0-2.5588 0.2234-3.7219 0.63361z" fill-opacity=".77284" style="mix-blend-mode:multiply"/>
</g>
<g transform="matrix(-.22495 -.97437 .97437 -.22495 -15.913 55.421)" opacity=".58415">
<path d="m10.654 23.765 0.18698-0.07462c6.3931-2.5513 13.67 0.49954 16.253 6.8143 2.583 6.3148-0.50574 13.502-6.8989 16.053-0.05343-1.007-0.22773-1.9795-0.50829-2.9043 3.43-1.8567 5.7555-5.456 5.7555-9.5919 0-6.0367-4.9545-10.93-11.066-10.93-1.3058 0-2.5588 0.2234-3.7219 0.63361z" fill="url(#f)"/>
<path d="m10.654 23.765 0.18698-0.07462c6.3931-2.5513 13.67 0.49954 16.253 6.8143 2.583 6.3148-0.50574 13.502-6.8989 16.053-0.05343-1.007-0.22773-1.9795-0.50829-2.9043 3.43-1.8567 5.7555-5.456 5.7555-9.5919 0-6.0367-4.9545-10.93-11.066-10.93-1.3058 0-2.5588 0.2234-3.7219 0.63361z" fill-opacity=".50309" style="mix-blend-mode:overlay"/>
</g>
<g transform="matrix(-.99863 -.052336 .052336 -.99863 57.154 72.549)" opacity=".56222">
<path d="m25.135 22.732 0.18698-0.07462c6.3932-2.5513 13.67 0.49954 16.253 6.8143 2.583 6.3148-0.50574 13.502-6.8989 16.053-0.05343-1.007-0.22773-1.9795-0.50829-2.9043 3.43-1.8567 5.7555-5.456 5.7555-9.5919 0-6.0367-4.9545-10.93-11.066-10.93-1.3058 0-2.5588 0.2234-3.7219 0.63361z" fill="url(#g)"/>
<path d="m25.135 22.732 0.18698-0.07462c6.3932-2.5513 13.67 0.49954 16.253 6.8143 2.583 6.3148-0.50574 13.502-6.8989 16.053-0.05343-1.007-0.22773-1.9795-0.50829-2.9043 3.43-1.8567 5.7555-5.456 5.7555-9.5919 0-6.0367-4.9545-10.93-11.066-10.93-1.3058 0-2.5588 0.2234-3.7219 0.63361z" style="mix-blend-mode:overlay"/>
</g>
<path d="m32.187 1.6156 0.1912 0.06303c6.5374 2.155 10.151 9.1694 8.0702 15.667s-9.0664 10.018-15.604 7.8632c0.60636-0.80576 1.0979-1.6627 1.4775-2.5516 3.821 0.78243 7.9161-0.48 10.575-3.6483 3.8804-4.6244 3.2306-11.558-1.4512-15.486-1.0003-0.83935-2.1037-1.4736-3.2584-1.907z" fill-opacity=".49618" style="mix-blend-mode:overlay"/>
<path transform="matrix(1 0 0 1 -1.215 -25)" d="m24.101 55.523h4.5448c4.2814 0 7.7522-3.3636 7.7522-7.5129 0-4.1493-3.4708-7.5129-7.7522-7.5129h-6.5595c-2.47 0-4.4724 1.9406-4.4724 4.3344v16.87z" filter="url(#m)"/>
<path d="m22.886 30.523h4.5448c4.2814 0 7.7522-3.3636 7.7522-7.5129 0-4.1493-3.4708-7.5129-7.7522-7.5129h-6.5595c-2.47 0-4.4724 1.9406-4.4724 4.3344v16.87z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB