spark-store-project/spark-store-abyss
15
0
Fork 0
mirror of https://github.com/spark-store-project/spark-store-abyss synced 2025-12-17 12:51:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add footer section with community information and QR code

Browse Source 
- Implemented a new footer in app.vue that includes:
  - Community description and purpose.
  - A QR code for joining the user group.
  - Responsive design adjustments for the QR code size.

- Added a new SVG icon for the QR code in assets/icons/qrcode-3.svg.

Co-authored-by: Sylvanysc <Sylvanysc@users.noreply.github.com>
This commit is contained in:
jiwangyihao
2025-06-03 00:34:07 +08:00
parent ced2e13205
commit ead1905c99
2 changed files with 247 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
assets/icons/qrcode-3.svg Normal file
View File

@@ -0,0 +1,183 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 29 29" url="https://qm.qq.com/q/vc2y6THSnY" correct_level="medium" positioning_point_type="rounded" positioning_point_color="#000000" content_line_type="interlock" content_point_scale="0.6" content_point_opacity="1" content_point_color="#000000">
<style>
:root {
--s-color: #000000;
}
</style>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="8.5" cy="0.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="11.5" cy="0.5"></circle>
<line opacity="1" x1="13.5" y1="0.5" x2="16.5" y2="0.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="18.5" cy="0.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="20.5" cy="0.5"></circle>
<line opacity="1" x1="9.5" y1="1.5" x2="9.5" y2="4.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="10.5" cy="1.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="11.5" cy="2.5"></circle>
<line opacity="1" x1="13.5" y1="2.5" x2="13.5" y2="3.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="18.5" cy="2.5"></circle>
<circle style="fill: var(--s-color)" cx="3.5" cy="3.5" r="1.5"></circle>
<path d="M32.048565,-1.29480038e-15 L67.951435,1.29480038e-15 C79.0954192,-7.52316311e-16 83.1364972,1.16032014 87.2105713,3.3391588 C91.2846454,5.51799746 94.4820025,8.71535463 96.6608412,12.7894287 C98.8396799,16.8635028 100,20.9045808 100,32.048565 L100,67.951435 C100,79.0954192 98.8396799,83.1364972 96.6608412,87.2105713 C94.4820025,91.2846454 91.2846454,94.4820025 87.2105713,96.6608412 C83.1364972,98.8396799 79.0954192,100 67.951435,100 L32.048565,100 C20.9045808,100 16.8635028,98.8396799 12.7894287,96.6608412 C8.71535463,94.4820025 5.51799746,91.2846454 3.3391588,87.2105713 C1.16032014,83.1364972 5.01544207e-16,79.0954192 -8.63200256e-16,67.951435 L8.63200256e-16,32.048565 C-5.01544207e-16,20.9045808 1.16032014,16.8635028 3.3391588,12.7894287 C5.51799746,8.71535463 8.71535463,5.51799746 12.7894287,3.3391588 C16.8635028,1.16032014 20.9045808,7.52316311e-16 32.048565,-1.29480038e-15 Z" style="stroke: var(--s-color)" stroke-width="11.741666666666667" fill="none" transform="translate(0.5,0.5) scale(0.06,0.06)"></path>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="8.5" cy="3.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="10.5" cy="3.5"></circle>
<circle style="fill: var(--s-color)" cx="20.5" cy="3.5" r="0.3" opacity="1"></circle>
<circle style="fill: var(--s-color)" cx="25.5" cy="3.5" r="1.5"></circle>
<path d="M32.048565,-1.29480038e-15 L67.951435,1.29480038e-15 C79.0954192,-7.52316311e-16 83.1364972,1.16032014 87.2105713,3.3391588 C91.2846454,5.51799746 94.4820025,8.71535463 96.6608412,12.7894287 C98.8396799,16.8635028 100,20.9045808 100,32.048565 L100,67.951435 C100,79.0954192 98.8396799,83.1364972 96.6608412,87.2105713 C94.4820025,91.2846454 91.2846454,94.4820025 87.2105713,96.6608412 C83.1364972,98.8396799 79.0954192,100 67.951435,100 L32.048565,100 C20.9045808,100 16.8635028,98.8396799 12.7894287,96.6608412 C8.71535463,94.4820025 5.51799746,91.2846454 3.3391588,87.2105713 C1.16032014,83.1364972 5.01544207e-16,79.0954192 -8.63200256e-16,67.951435 L8.63200256e-16,32.048565 C-5.01544207e-16,20.9045808 1.16032014,16.8635028 3.3391588,12.7894287 C5.51799746,8.71535463 8.71535463,5.51799746 12.7894287,3.3391588 C16.8635028,1.16032014 20.9045808,7.52316311e-16 32.048565,-1.29480038e-15 Z" style="stroke: var(--s-color)" stroke-width="11.741666666666667" fill="none" transform="translate(22.5,0.5) scale(0.06,0.06)"></path>
<line opacity="1" x1="14.5" y1="4.5" x2="15.5" y2="4.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="17.5" y1="4.5" x2="17.5" y2="5.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="19.5" y1="4.5" x2="19.5" y2="5.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="8.5" y1="5.5" x2="8.5" y2="6.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="9.5" cy="5.5"></circle>
<line opacity="1" x1="11.5" y1="5.5" x2="13.5" y2="5.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="10.5" cy="6.5"></circle>
<line opacity="1" x1="12.5" y1="6.5" x2="12.5" y2="8.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="14.5" cy="6.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="16.5" cy="6.5"></circle>
<line opacity="1" x1="18.5" y1="6.5" x2="18.5" y2="8.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="20.5" y1="6.5" x2="20.5" y2="9.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="17.5" y1="7.5" x2="17.5" y2="10.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="5.5" y1="8.5" x2="6.5" y2="8.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="8.5" y1="8.5" x2="8.5" y2="9.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="10.5" y1="8.5" x2="10.5" y2="9.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="11.5" cy="8.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="13.5" cy="8.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="21.5" cy="8.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="23.5" cy="8.5"></circle>
<line opacity="1" x1="25.5" y1="8.5" x2="25.5" y2="9.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="28.5" y1="8.5" x2="28.5" y2="9.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="0.5" y1="9.5" x2="0.5" y2="12.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="1.5" y1="9.5" x2="4.5" y2="9.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="14.5" y1="9.5" x2="14.5" y2="10.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="15.5" y1="9.5" x2="15.5" y2="10.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="16.5" cy="9.5"></circle>
<line opacity="1" x1="4.5" y1="10.5" x2="7.5" y2="10.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="9.5" cy="10.5"></circle>
<line opacity="1" x1="11.5" y1="10.5" x2="13.5" y2="10.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="18.5" y1="10.5" x2="21.5" y2="10.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="22.5" y1="10.5" x2="23.5" y2="10.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="26.5" y1="10.5" x2="27.5" y2="10.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="1.5" y1="11.5" x2="1.5" y2="14.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="3.5" y1="11.5" x2="3.5" y2="14.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="5.5" y1="11.5" x2="5.5" y2="14.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="7.5" y1="11.5" x2="8.5" y2="11.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="10.5" y1="11.5" x2="10.5" y2="12.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="12.5" y1="11.5" x2="12.5" y2="12.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="13.5" y1="11.5" x2="13.5" y2="12.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="16.5" y1="11.5" x2="16.5" y2="14.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="20.5" y1="11.5" x2="21.5" y2="11.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="25.5" y1="11.5" x2="25.5" y2="12.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="6.5" cy="12.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="9.5" cy="12.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="11.5" cy="12.5"></circle>
<line opacity="1" x1="14.5" y1="12.5" x2="15.5" y2="12.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="17.5" cy="12.5"></circle>
<line opacity="1" x1="19.5" y1="12.5" x2="19.5" y2="13.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="22.5" y1="12.5" x2="22.5" y2="15.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="26.5" y1="12.5" x2="27.5" y2="12.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="0.5" cy="13.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="2.5" cy="13.5"></circle>
<line opacity="1" x1="4.5" y1="13.5" x2="4.5" y2="14.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="15.5" y1="13.5" x2="15.5" y2="14.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="18.5" cy="13.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="21.5" cy="13.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="23.5" cy="13.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="27.5" cy="13.5"></circle>
<line opacity="1" x1="6.5" y1="14.5" x2="7.5" y2="14.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="9.5" y1="14.5" x2="9.5" y2="15.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="11.5" y1="14.5" x2="11.5" y2="15.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="20.5" cy="14.5"></circle>
<line opacity="1" x1="24.5" y1="14.5" x2="24.5" y2="17.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="25.5" y1="14.5" x2="25.5" y2="16.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="26.5" cy="14.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="1.5" cy="15.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="3.5" cy="15.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="8.5" cy="15.5"></circle>
<line opacity="1" x1="13.5" y1="15.5" x2="14.5" y2="15.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="16.5" y1="15.5" x2="16.5" y2="16.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="17.5" cy="15.5"></circle>
<line opacity="1" x1="19.5" y1="15.5" x2="19.5" y2="17.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="21.5" y1="15.5" x2="21.5" y2="18.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="27.5" y1="15.5" x2="28.5" y2="15.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="0.5" cy="16.5"></circle>
<line opacity="1" x1="2.5" y1="16.5" x2="2.5" y2="19.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="4.5" y1="16.5" x2="4.5" y2="17.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="6.5" cy="16.5"></circle>
<line opacity="1" x1="10.5" y1="16.5" x2="10.5" y2="17.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="12.5" cy="16.5"></circle>
<line opacity="1" x1="14.5" y1="16.5" x2="14.5" y2="17.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="15.5" y1="16.5" x2="15.5" y2="17.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="20.5" y1="16.5" x2="20.5" y2="17.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="23.5" cy="16.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="28.5" cy="16.5"></circle>
<line opacity="1" x1="7.5" y1="17.5" x2="7.5" y2="20.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="9.5" y1="17.5" x2="9.5" y2="18.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="13.5" y1="17.5" x2="13.5" y2="19.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="17.5" cy="17.5"></circle>
<line opacity="1" x1="22.5" y1="17.5" x2="22.5" y2="18.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="27.5" cy="17.5"></circle>
<line opacity="1" x1="3.5" y1="18.5" x2="3.5" y2="19.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="6.5" cy="18.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="8.5" cy="18.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="18.5" cy="18.5"></circle>
<line opacity="1" x1="23.5" y1="18.5" x2="23.5" y2="20.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="0.5" y1="19.5" x2="0.5" y2="20.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="5.5" y1="19.5" x2="5.5" y2="20.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="10.5" cy="19.5"></circle>
<line opacity="1" x1="12.5" y1="19.5" x2="12.5" y2="20.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="15.5" y1="19.5" x2="16.5" y2="19.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="19.5" y1="19.5" x2="19.5" y2="20.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="20.5" y1="19.5" x2="20.5" y2="22.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="21.5" y1="19.5" x2="21.5" y2="20.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="25.5" y1="19.5" x2="27.5" y2="19.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="1.5" cy="20.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="6.5" cy="20.5"></circle>
<line opacity="1" x1="8.5" y1="20.5" x2="8.5" y2="21.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="9.5" cy="20.5"></circle>
<line opacity="1" x1="14.5" y1="20.5" x2="14.5" y2="21.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="22.5" cy="20.5"></circle>
<line opacity="1" x1="24.5" y1="20.5" x2="24.5" y2="23.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="26.5" y1="20.5" x2="28.5" y2="20.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="13.5" cy="21.5"></circle>
<line opacity="1" x1="15.5" y1="21.5" x2="15.5" y2="22.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="16.5" y1="21.5" x2="17.5" y2="21.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="28.5" y1="21.5" x2="28.5" y2="22.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="9.5" cy="22.5"></circle>
<line opacity="1" x1="12.5" y1="22.5" x2="12.5" y2="23.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="17.5" y1="22.5" x2="18.5" y2="22.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="22.5" cy="22.5"></circle>
<line opacity="1" x1="25.5" y1="22.5" x2="25.5" y2="25.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="27.5" cy="22.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="8.5" cy="23.5"></circle>
<line opacity="1" x1="10.5" y1="23.5" x2="10.5" y2="26.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="14.5" cy="23.5"></circle>
<line opacity="1" x1="18.5" y1="23.5" x2="18.5" y2="24.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="20.5" y1="23.5" x2="20.5" y2="24.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="15.5" y1="24.5" x2="15.5" y2="25.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="19.5" cy="24.5"></circle>
<line opacity="1" x1="21.5" y1="24.5" x2="24.5" y2="24.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="26.5" y1="24.5" x2="26.5" y2="26.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="28.5" cy="24.5"></circle>
<circle style="fill: var(--s-color)" cx="3.5" cy="25.5" r="1.5"></circle>
<path d="M32.048565,-1.29480038e-15 L67.951435,1.29480038e-15 C79.0954192,-7.52316311e-16 83.1364972,1.16032014 87.2105713,3.3391588 C91.2846454,5.51799746 94.4820025,8.71535463 96.6608412,12.7894287 C98.8396799,16.8635028 100,20.9045808 100,32.048565 L100,67.951435 C100,79.0954192 98.8396799,83.1364972 96.6608412,87.2105713 C94.4820025,91.2846454 91.2846454,94.4820025 87.2105713,96.6608412 C83.1364972,98.8396799 79.0954192,100 67.951435,100 L32.048565,100 C20.9045808,100 16.8635028,98.8396799 12.7894287,96.6608412 C8.71535463,94.4820025 5.51799746,91.2846454 3.3391588,87.2105713 C1.16032014,83.1364972 5.01544207e-16,79.0954192 -8.63200256e-16,67.951435 L8.63200256e-16,32.048565 C-5.01544207e-16,20.9045808 1.16032014,16.8635028 3.3391588,12.7894287 C5.51799746,8.71535463 8.71535463,5.51799746 12.7894287,3.3391588 C16.8635028,1.16032014 20.9045808,7.52316311e-16 32.048565,-1.29480038e-15 Z" style="stroke: var(--s-color)" stroke-width="11.741666666666667" fill="none" transform="translate(0.5,22.5) scale(0.06,0.06)"></path>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="9.5" cy="25.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="12.5" cy="25.5"></circle>
<line opacity="1" x1="14.5" y1="25.5" x2="14.5" y2="28.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="17.5" cy="25.5"></circle>
<line opacity="1" x1="23.5" y1="25.5" x2="23.5" y2="28.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="11.5" y1="26.5" x2="11.5" y2="27.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="20.5" y1="26.5" x2="21.5" y2="26.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="25.5" cy="26.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="10.5" cy="27.5"></circle>
<line opacity="1" x1="12.5" y1="27.5" x2="12.5" y2="28.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="15.5" y1="27.5" x2="16.5" y2="27.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="18.5" y1="27.5" x2="18.5" y2="28.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="19.5" y1="27.5" x2="19.5" y2="28.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<line opacity="1" x1="21.5" y1="27.5" x2="21.5" y2="28.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="22.5" cy="27.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="24.5" cy="27.5"></circle>
<line opacity="1" x1="27.5" y1="27.5" x2="28.5" y2="27.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="9.5" cy="28.5"></circle>
<circle opacity="1" r="0.3" style="fill: var(--s-color)" cx="17.5" cy="28.5"></circle>
<line opacity="1" x1="25.5" y1="28.5" x2="26.5" y2="28.5" stroke-width="0.6" style="stroke: var(--s-color)" stroke-linecap="round"></line>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB