tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #381 from StuSerious/master

Browse Source 
feat: lossless image optimization.
This commit is contained in:
Donkie
2024-05-20 22:36:05 +02:00
committed by GitHub
parent c4693d3f34 6fea0b77b9
commit 7bd2eac94b
10 changed files with 6 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
client/icons/spool.svg
View File

@@ -1,93 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" id="svg5" width="235" height="500" version="1.1" viewBox="0 0 235 500" xml:space="preserve"><desc id="desc1">Created with Fabric.js 5.3.0</desc><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#343434;fill-rule:nonzero;opacity:1" id="path1" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.58757483,0,0,3.9476902,197.13549,250.04675)" vector-effect="non-scaling-stroke"/><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:red;fill-rule:nonzero;opacity:1" id="path2" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.38157612,0,0,3.4623174,197.13549,250.04674)" vector-effect="non-scaling-stroke"/><path style="stroke:#000;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:red;fill-rule:nonzero;opacity:1" id="path3" stroke-linecap="round" d="M -38.50267 -65.24064 L 38.502680000000005 -65.24064 L 38.502680000000005 65.24064 L -38.50267 65.24064 z" transform="matrix(2.073642,0,0,3.3577086,117.29471,250.04674)" vector-effect="non-scaling-stroke"/><g id="OvgM38-6CZm9R47a1TDIX" transform="matrix(0.58757483,0,0,3.9476902,37.453957,250.04674)"><filter id="SVGID_1" width="1.272" height="1.114" x="-.057" y="-.057"><feGaussianBlur id="feGaussianBlur3" in="SourceAlpha" stdDeviation="3"/><feOffset id="feOffset3" dx="20" dy="0" result="oBlur"/><feFlood id="feFlood3" flood-color="#000" flood-opacity=".67"/><feComposite id="feComposite3" in2="oBlur" operator="in"/><feMerge id="feMerge4"><feMergeNode id="feMergeNode3"/><feMergeNode id="feMergeNode4" in="SourceGraphic"/></feMerge></filter><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#343434;fill-rule:nonzero;opacity:1;filter:url(#SVGID_1)" id="path4" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="translate(8.4959392e-7)" vector-effect="non-scaling-stroke"/><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#111;fill-rule:nonzero;opacity:1" id="path5" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="scale(0.41451706)" vector-effect="non-scaling-stroke"/></g></svg>
<svg
version="1.1"
width="235"
height="500"
viewBox="0 0 235 500"
xml:space="preserve"
id="svg5"
sodipodi:docname="spool.svg"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview5"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="1.6588725"
inkscape:cx="132.92161"
inkscape:cy="209.47963"
inkscape:window-width="1350"
inkscape:window-height="1237"
inkscape:window-x="1189"
inkscape:window-y="48"
inkscape:window-maximized="0"
inkscape:current-layer="svg5" />&#10;<desc
id="desc1">Created with Fabric.js 5.3.0</desc>&#10;<defs
id="defs1">&#10;</defs>&#10;&#10;&#10;&#10;&#10;<path
style="stroke:rgb(110, 11, 48);stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:rgb(52, 52, 52);fill-rule:nonzero;opacity:1"
vector-effect="non-scaling-stroke"
transform="matrix(0.58757483,0,0,3.9476902,197.13549,250.04675)"
d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
stroke-linecap="round"
id="path1"
inkscape:label="rightside" /><path
style="stroke:rgb(110, 11, 48);stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:rgb(255, 0, 0);fill-rule:nonzero;opacity:1"
vector-effect="non-scaling-stroke"
transform="matrix(0.38157612,0,0,3.4623174,197.13549,250.04674)"
d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
stroke-linecap="round"
id="path2"
inkscape:label="filament_right" /><path
style="stroke:rgb(0, 0, 0);stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:rgb(255, 0, 0);fill-rule:nonzero;opacity:1"
vector-effect="non-scaling-stroke"
transform="matrix(2.073642,0,0,3.3577086,117.29471,250.04674)"
d="M -38.50267 -65.24064 L 38.502680000000005 -65.24064 L 38.502680000000005 65.24064 L -38.50267 65.24064 z"
stroke-linecap="round"
id="path3"
inkscape:label="filament_main" /><g
transform="matrix(0.58757483,0,0,3.9476902,37.453957,250.04674)"
id="OvgM38-6CZm9R47a1TDIX"
inkscape:label="fg">&#10;<filter
id="SVGID_1"
y="-0.056899467"
height="1.1137989"
x="-0.056899467"
width="1.271853">&#10; <feGaussianBlur
in="SourceAlpha"
stdDeviation="3"
id="feGaussianBlur3" />&#10; <feOffset
dx="20"
dy="0"
result="oBlur"
id="feOffset3" />&#10; <feFlood
flood-color="rgb(0,0,0)"
flood-opacity="0.67"
id="feFlood3" />&#10; <feComposite
in2="oBlur"
operator="in"
id="feComposite3" />&#10; <feMerge
id="feMerge4">&#10; <feMergeNode
id="feMergeNode3" />&#10; <feMergeNode
in="SourceGraphic"
id="feMergeNode4" />&#10; </feMerge>&#10;</filter>&#10;&#10;<path
style="stroke:rgb(110, 11, 48);stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:rgb(52, 52, 52);fill-rule:nonzero;opacity:1;filter:url(#SVGID_1)"
vector-effect="non-scaling-stroke"
transform="translate(8.4959392e-7)"
d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
stroke-linecap="round"
id="path4"
inkscape:label="leftside" /><path
style="stroke:rgb(110, 11, 48);stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:rgb(17, 17, 17);fill-rule:nonzero;opacity:1"
vector-effect="non-scaling-stroke"
transform="scale(0.41451706)"
d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
stroke-linecap="round"
id="path5"
inkscape:label="hole" /></g>&#10;</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

90
client/icons/spoolman.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

62
client/icons/spoolman_monochrome.svg
View File

@@ -1,61 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" id="svg8" width="220" height="220" version="1.1" viewBox="0 0 220 220" xml:space="preserve"><desc id="desc1">Created with Fabric.js 5.3.0</desc><defs id="defs1"><clipPath id="clipPath13" clipPathUnits="userSpaceOnUse"><path id="path13" style="display:none;opacity:1;fill:#bebebe;fill-rule:nonzero;stroke:#fff;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0" d="m -13.757715,-7.7471481 0.343537,-0.55719 v 0 c 2.876446,-4.6653799 7.9428216,-7.5315019 13.42331996,-7.5937639 l 0.37756065,-0.0043 0.0795148,8.0507248 v 0 c 0.0172956,1.7514341 -0.91182739,3.3759065 -2.43022861,4.2489907 -1.5184012,0.8730843 -3.3897584,0.8588954 -4.8947484,-0.037114 z M 0.4322926,16.185974 -0.22201757,16.167056 v 0 C -5.7005765,16.00867 -10.715899,13.054123 -13.510068,8.3390037 l -0.192495,-0.3248328 6.9323756,-4.0942248 v 0 c 1.5081376,-0.8906958 3.3795333,-0.8982879 4.894848,-0.019866 1.51531394,0.8784316 2.43870418,2.5061695 2.41523158,4.2575347 z m 13.3375784,-24.319362 0.310774,0.5761074 v 0 c 2.602114,4.8237643 2.551061,10.6444349 -0.135267,15.4218159 L 13.76031,8.1936583 6.7484202,4.2371568 v 0 C 5.2229859,3.3764201 4.2807128,1.7595388 4.2838,0.00802386 4.2868948,-1.7434936 5.2348557,-3.3570423 6.7633174,-4.2123972 Z"/><path id="lpe_path-effect13" style="opacity:1;fill:#bebebe;fill-rule:nonzero;stroke:#fff;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0" d="m -27.46181,-27.46181 h 54.92362 v 54.92362 h -54.92362 z m 13.704095,19.7146619 6.8989554,4.1073476 c 1.50499,0.8960094 3.3763472,0.9101983 4.8947484,0.037114 1.51840122,-0.8730842 2.44752421,-2.4975566 2.43022861,-4.2489907 v 0 l -0.0795148,-8.0507248 -0.37756065,0.0043 c -5.48049836,0.06226 -10.54687396,2.928384 -13.42331996,7.5937639 v 0 z M 0.4322926,16.185974 0.53989218,8.1576148 C 0.56336478,6.4062496 -0.36002546,4.7785117 -1.8753394,3.9000801 -3.3906541,3.0216582 -5.2620498,3.0292503 -6.7701874,3.9199461 v 0 l -6.9323756,4.0942248 0.192495,0.3248328 c 2.794169,4.7151193 7.8094915,7.6696663 13.28805043,7.8280523 v 0 z M 13.769871,-8.133388 6.7633174,-4.2123972 C 5.2348557,-3.3570423 4.2868948,-1.7434936 4.2838,0.00802386 4.2807128,1.7595388 5.2229859,3.3764201 6.7484202,4.2371568 v 0 l 7.0118898,3.9565015 0.185068,-0.329123 c 2.686328,-4.777381 2.737381,-10.5980516 0.135267,-15.4218159 v 0 z" class="powerclip"/></clipPath></defs><path style="stroke:#598ec7;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#000;fill-rule:nonzero;opacity:1;fill-opacity:1" id="path2" stroke-linecap="round" d="M 0,-22.46181 C 12.39892,-22.46181 22.46181,-12.39892 22.46181,0 22.46181,12.39892 12.39892,22.46181 0,22.46181 -12.39892,22.46181 -22.46181,12.39892 -22.46181,0 -22.46181,-12.39892 -12.39892,-22.46181 0,-22.46181 Z" clip-path="url(#clipPath13)" transform="matrix(4.0068,0,0,4.0068,110,110)" vector-effect="non-scaling-stroke"/></svg>
<svg
version="1.1"
width="220"
height="220"
viewBox="0 0 220 220"
xml:space="preserve"
id="svg8"
sodipodi:docname="spoolman_monochrome.svg"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview8"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="2.6659091"
inkscape:cx="73.333333"
inkscape:cy="97.1526"
inkscape:window-width="1898"
inkscape:window-height="1360"
inkscape:window-x="684"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="svg8" />&#10;<desc
id="desc1">Created with Fabric.js 5.3.0</desc>&#10;<defs
id="defs1"><inkscape:path-effect
effect="powerclip"
id="path-effect13"
is_visible="true"
lpeversion="1"
inverse="true"
flatten="false"
hide_clip="false"
message="Use fill-rule evenodd on &lt;b&gt;fill and stroke&lt;/b&gt; dialog if no flatten result after convert clip to paths." />&#10;<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath13"><path
id="path13"
style="display:none;opacity:1;fill:#bebebe;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0"
inkscape:label="bean1_fg"
d="m -13.757715,-7.7471481 0.343537,-0.55719 v 0 c 2.876446,-4.6653799 7.9428216,-7.5315019 13.42331996,-7.5937639 l 0.37756065,-0.0043 0.0795148,8.0507248 v 0 c 0.0172956,1.7514341 -0.91182739,3.3759065 -2.43022861,4.2489907 -1.5184012,0.8730843 -3.3897584,0.8588954 -4.8947484,-0.037114 z M 0.4322926,16.185974 -0.22201757,16.167056 v 0 C -5.7005765,16.00867 -10.715899,13.054123 -13.510068,8.3390037 l -0.192495,-0.3248328 6.9323756,-4.0942248 v 0 c 1.5081376,-0.8906958 3.3795333,-0.8982879 4.894848,-0.019866 1.51531394,0.8784316 2.43870418,2.5061695 2.41523158,4.2575347 z m 13.3375784,-24.319362 0.310774,0.5761074 v 0 c 2.602114,4.8237643 2.551061,10.6444349 -0.135267,15.4218159 L 13.76031,8.1936583 6.7484202,4.2371568 v 0 C 5.2229859,3.3764201 4.2807128,1.7595388 4.2838,0.00802386 4.2868948,-1.7434936 5.2348557,-3.3570423 6.7633174,-4.2123972 Z" /><path
id="lpe_path-effect13"
style="opacity:1;fill:#bebebe;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0"
class="powerclip"
d="m -27.46181,-27.46181 h 54.92362 v 54.92362 h -54.92362 z m 13.704095,19.7146619 6.8989554,4.1073476 c 1.50499,0.8960094 3.3763472,0.9101983 4.8947484,0.037114 1.51840122,-0.8730842 2.44752421,-2.4975566 2.43022861,-4.2489907 v 0 l -0.0795148,-8.0507248 -0.37756065,0.0043 c -5.48049836,0.06226 -10.54687396,2.928384 -13.42331996,7.5937639 v 0 z M 0.4322926,16.185974 0.53989218,8.1576148 C 0.56336478,6.4062496 -0.36002546,4.7785117 -1.8753394,3.9000801 -3.3906541,3.0216582 -5.2620498,3.0292503 -6.7701874,3.9199461 v 0 l -6.9323756,4.0942248 0.192495,0.3248328 c 2.794169,4.7151193 7.8094915,7.6696663 13.28805043,7.8280523 v 0 z M 13.769871,-8.133388 6.7633174,-4.2123972 C 5.2348557,-3.3570423 4.2868948,-1.7434936 4.2838,0.00802386 4.2807128,1.7595388 5.2229859,3.3764201 6.7484202,4.2371568 v 0 l 7.0118898,3.9565015 0.185068,-0.329123 c 2.686328,-4.777381 2.737381,-10.5980516 0.135267,-15.4218159 v 0 z" /></clipPath></defs>&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;<path
style="stroke:rgb(89, 142, 199);stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#000000;fill-rule:nonzero;opacity:1;fill-opacity:1"
vector-effect="non-scaling-stroke"
transform="matrix(4.0068,0,0,4.0068,110,110)"
d="M 0,-22.46181 C 12.39892,-22.46181 22.46181,-12.39892 22.46181,0 22.46181,12.39892 12.39892,22.46181 0,22.46181 -12.39892,22.46181 -22.46181,12.39892 -22.46181,0 -22.46181,-12.39892 -12.39892,-22.46181 0,-22.46181 Z"
stroke-linecap="round"
id="path2"
inkscape:label="spoolface"
clip-path="url(#clipPath13)"
inkscape:path-effect="#path-effect13"
inkscape:original-d="M 0 -22.46181 C 12.39892 -22.46181 22.46181 -12.39892 22.46181 0 C 22.46181 12.39892 12.39892 22.46181 0 22.46181 C -12.39892 22.46181 -22.46181 12.39892 -22.46181 0 C -22.46181 -12.39892 -12.39892 -22.46181 0 -22.46181 z" />&#10;</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
client/public/apple-touch-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 10 KiB

33
client/public/favicon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
client/public/icon512_maskable.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
client/public/icon512_rounded.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
client/public/kofi_s_logo_nolabel.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

33
client/src/icon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

34
client/src/icon_spool.svg
View File

@@ -1,33 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" version="1.1" viewBox="0 0 235 500" xml:space="preserve"><desc>Created with Fabric.js 5.3.0</desc><g id="z-gD78pOtWjQii31Q-6Ze"><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#343434;fill-rule:nonzero;opacity:1" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.5875748337 0 0 3.9476902309 197.1354865303 250.0467513161) translate(0, 0)" vector-effect="non-scaling-stroke"/></g><g id="qCAOML5j7kpAVIP3Df73i"><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" fill="current" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.3815761198 0 0 3.4623174046 197.1354865303 250.0467382769) translate(0, 0)" vector-effect="non-scaling-stroke"/></g><g id="DwEIaQUSPW4DgKfkdPWoC"><path style="stroke:#000;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" fill="current" stroke-linecap="round" d="M -38.50267 -65.24064 L 38.502680000000005 -65.24064 L 38.502680000000005 65.24064 L -38.50267 65.24064 z" transform="matrix(2.0736420266 0 0 3.3577085856 117.2947215155 250.0467440227) translate(-0.000005, 0)" vector-effect="non-scaling-stroke"/></g><g id="OvgM38-6CZm9R47a1TDIX" transform="matrix(0.5875748337 0 0 3.9476902309 37.4539565008 250.0467440227)"><filter id="SVGID_90" width="181.094%" height="149.483%" x="-40.547%" y="-24.742%"><feGaussianBlur in="SourceAlpha" stdDeviation="20"/><feOffset dx="30" dy="0" result="oBlur"/><feFlood flood-color="#000" flood-opacity=".8"/><feComposite in2="oBlur" operator="in"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#343434;fill-rule:nonzero;opacity:1;filter:url(#SVGID_90)" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="translate(0, 0)" vector-effect="non-scaling-stroke"/></g><g id="woBV3Wt7ijQ6puNeMgAQD"><path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill:#111;fill-rule:nonzero;opacity:1" stroke-linecap="round" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" transform="matrix(0.2435597948 0 0 1.6363849628 37.4539565008 250.0467440227) translate(0, 0)" vector-effect="non-scaling-stroke"/></g></svg>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
width="100%" height="100%" viewBox="0 0 235 500" xml:space="preserve">
<desc>Created with Fabric.js 5.3.0</desc>
<defs>
</defs>
<g transform="matrix(0.5875748337 0 0 3.9476902309 197.1354865303 250.0467513161)" id="z-gD78pOtWjQii31Q-6Ze" >
<path style="stroke: rgb(110,11,48); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(52,52,52); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(0, 0)" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" stroke-linecap="round" />
</g>
<g transform="matrix(0.3815761198 0 0 3.4623174046 197.1354865303 250.0467382769)" id="qCAOML5j7kpAVIP3Df73i" >
<path style="stroke: rgb(110,11,48); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4;fill-rule: nonzero; opacity: 1;" fill="current" vector-effect="non-scaling-stroke" transform=" translate(0, 0)" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" stroke-linecap="round" />
</g>
<g transform="matrix(2.0736420266 0 0 3.3577085856 117.2947215155 250.0467440227)" id="DwEIaQUSPW4DgKfkdPWoC" >
<path style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4;fill-rule: nonzero; opacity: 1;" fill="current" vector-effect="non-scaling-stroke" transform=" translate(-0.000005, 0)" d="M -38.50267 -65.24064 L 38.502680000000005 -65.24064 L 38.502680000000005 65.24064 L -38.50267 65.24064 z" stroke-linecap="round" />
</g>
<g transform="matrix(0.5875748337 0 0 3.9476902309 37.4539565008 250.0467440227)" id="OvgM38-6CZm9R47a1TDIX" >
<filter id="SVGID_90" y="-24.74162191%" height="149.48324381999998%" x="-40.54702828%" width="181.09405656%" >
<feGaussianBlur in="SourceAlpha" stdDeviation="20"></feGaussianBlur>
<feOffset dx="30" dy="0" result="oBlur" ></feOffset>
<feFlood flood-color="rgb(0,0,0)" flood-opacity="0.8"/>
<feComposite in2="oBlur" operator="in" />
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<path style="stroke: rgb(110,11,48); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(52,52,52); fill-rule: nonzero; opacity: 1;filter: url(#SVGID_90);" vector-effect="non-scaling-stroke" transform=" translate(0, 0)" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" stroke-linecap="round" />
</g>
<g transform="matrix(0.2435597948 0 0 1.6363849628 37.4539565008 250.0467440227)" id="woBV3Wt7ijQ6puNeMgAQD" >
<path style="stroke: rgb(110,11,48); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(17,17,17); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(0, 0)" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" stroke-linecap="round" />
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB