ColormaticStudios/Colormatic-Website
5
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Change bg shapes to SVGs and add more complex shapes

Browse Source
This commit is contained in:
Zakarya
2025-03-13 10:46:04 -07:00
parent 0cb18c2103
commit 2587ddd721
6 changed files with 448 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
static/img/bg-shapes/circle.svg Normal file
View File

@ -0,0 +1,48 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="10"
height="10"
viewBox="0 0 2.6458332 2.6458334"
version="1.1"
id="svg1"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
sodipodi:docname="circle.svg"
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="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="5.9860924"
inkscape:cx="28.14858"
inkscape:cy="23.805179"
inkscape:window-width="1251"
inkscape:window-height="991"
inkscape:window-x="26"
inkscape:window-y="23"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0529166"
id="path1"
cx="1.3229166"
cy="1.3229166"
r="1.3229166" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

50
static/img/bg-shapes/square.svg Normal file
View File

@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="10"
height="10"
viewBox="0 0 2.6458332 2.6458334"
version="1.1"
id="svg1"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
sodipodi:docname="square.svg"
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="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="5.9860924"
inkscape:cx="28.232107"
inkscape:cy="23.805179"
inkscape:window-width="1251"
inkscape:window-height="991"
inkscape:window-x="26"
inkscape:window-y="23"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0529166"
id="rect1"
width="2.6458333"
height="2.6458333"
x="0"
y="0"
ry="0.42333332" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

96
static/img/bg-shapes/star.svg Normal file
View File

@ -0,0 +1,96 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="10"
height="10"
viewBox="0 0 2.6458332 2.6458334"
version="1.1"
id="svg1"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
sodipodi:docname="star.svg"
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="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="40.911253"
inkscape:cx="6.1474529"
inkscape:cy="6.0741234"
inkscape:window-width="1251"
inkscape:window-height="991"
inkscape:window-x="26"
inkscape:window-y="23"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs1">
<inkscape:path-effect
effect="fillet_chamfer"
id="path-effect3"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1"
radius="8"
unit="px"
method="auto"
mode="F"
chamfer_steps="1"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" />
<inkscape:path-effect
effect="fillet_chamfer"
id="path-effect2"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1"
radius="8"
unit="px"
method="auto"
mode="F"
chamfer_steps="1"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
sodipodi:type="star"
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
id="path2"
inkscape:flatsided="false"
sodipodi:sides="4"
sodipodi:cx="6.614583"
sodipodi:cy="6.614583"
sodipodi:r1="6.6176233"
sodipodi:r2="2.301954"
sodipodi:arg1="-0.029738439"
sodipodi:arg2="0.75565972"
inkscape:rounded="0"
inkscape:randomized="0"
d="M 11.23738,7.1337824 10.28189,7.4772235 A 4.1661509,4.1661509 133.29611 0 0 7.6936896,10.224128 L 7.4076518,11.198344 A 0.6904665,0.6904665 178.29611 0 1 6.0953836,11.23738 L 5.7519425,10.28189 A 4.1661509,4.1661509 43.296113 0 0 3.0050377,7.6936896 L 2.0308224,7.4076518 A 0.6904665,0.6904665 88.296113 0 1 1.9917861,6.0953836 l 0.95549,-0.3434411 A 4.1661509,4.1661509 133.29611 0 0 5.5354765,3.0050377 L 5.8215142,2.0308224 a 0.6904665,0.6904665 178.29611 0 1 1.3122682,-0.039036 l 0.3434411,0.95549 a 4.1661509,4.1661509 43.296113 0 0 2.7469045,2.5882004 l 0.974216,0.2860377 a 0.6904665,0.6904665 88.296113 0 1 0.03904,1.3122682 z"
inkscape:transform-center-x="-0.014052847"
inkscape:transform-center-y="-0.068859274"
inkscape:path-effect="#path-effect3"
transform="matrix(0.26043146,0,0,0.25804465,-0.39972889,-0.39606549)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

68
static/img/bg-shapes/triangle.svg Normal file
View File

@ -0,0 +1,68 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="10"
height="10"
viewBox="0 0 2.6458332 2.6458334"
version="1.1"
id="svg1"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
sodipodi:docname="triangle.svg"
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="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="18.89041"
inkscape:cx="8.9198698"
inkscape:cy="10.243293"
inkscape:window-width="1251"
inkscape:window-height="991"
inkscape:window-x="26"
inkscape:window-y="23"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs1">
<inkscape:path-effect
effect="fillet_chamfer"
id="path-effect2"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1"
radius="8"
unit="px"
method="auto"
mode="F"
chamfer_steps="1"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
d="M 2.1166666,13.229167 H 11.1125 a 1.2220542,1.2220542 119.99992 0 0 1.058329,-1.833084 L 7.6729215,3.6055279 a 1.2220656,1.2220656 180 0 0 -2.1166765,0 L 1.0583382,11.396083 a 1.2220543,1.2220543 60.000077 0 0 1.0583284,1.833084 z"
id="path2"
sodipodi:nodetypes="cccc"
inkscape:path-effect="#path-effect2"
inkscape:original-d="M 0,13.229167 H 13.229167 L 6.6145832,1.7724437 Z"
transform="matrix(0.23128026,0,0,0.23128026,-0.20690571,-0.55319007)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

93
static/img/bg-shapes/wavy-circle.svg Normal file
View File

@ -0,0 +1,93 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="10"
height="10"
viewBox="0 0 2.6458332 2.6458334"
version="1.1"
id="svg1"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
sodipodi:docname="wavy-circle.svg"
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="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="46.528727"
inkscape:cx="5.0398972"
inkscape:cy="5.3945168"
inkscape:window-width="1251"
inkscape:window-height="991"
inkscape:window-x="26"
inkscape:window-y="23"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs1">
<inkscape:path-effect
effect="fillet_chamfer"
id="path-effect3"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1 @ F,0,0,1,0,1.2277634,0,1"
radius="6"
unit="px"
method="auto"
mode="F"
chamfer_steps="1"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" />
<inkscape:path-effect
effect="fillet_chamfer"
id="path-effect2"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1 @ F,0,0,1,0,2.1166666,0,1"
radius="8"
unit="px"
method="auto"
mode="F"
chamfer_steps="1"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
sodipodi:type="star"
style="fill:#000000;stroke-width:0.264583"
id="path1"
inkscape:flatsided="false"
sodipodi:sides="8"
sodipodi:cx="6.614583"
sodipodi:cy="6.614583"
sodipodi:r1="6.6146464"
sodipodi:r2="5.3311768"
sodipodi:arg1="-1.5707963"
sodipodi:arg2="-1.1780972"
inkscape:rounded="0.4"
inkscape:randomized="0"
d="M 6.6145832,-6.3419342e-5 C 7.6740846,-6.3390953e-5 7.6758845,1.2837643 8.6547362,1.689218 9.6335879,2.0946717 10.542664,1.1881411 11.291844,1.9373218 c 0.749181,0.7491807 -0.157349,1.6582566 0.248104,2.6371083 0.405454,0.9788517 1.689281,0.9806516 1.689281,2.0401531 0,1.0595014 -1.283827,1.0613013 -1.689281,2.040153 -0.405454,0.9788517 0.501077,1.8879278 -0.248104,2.6371078 -0.74918,0.749181 -1.6582564,-0.157349 -2.6371081,0.248104 -0.9788517,0.405454 -0.9806516,1.689281 -2.0401531,1.689281 -1.0595014,0 -1.0613012,-1.283827 -2.0401529,-1.689281 C 3.5955782,11.134494 2.6865022,12.041025 1.9373215,11.291844 1.1881409,10.542664 2.0946715,9.6335876 1.6892179,8.6547359 1.2837642,7.6758842 -6.3447731e-5,7.6740843 -6.3419342e-5,6.6145828 -6.3390953e-5,5.5550814 1.2837643,5.5532816 1.689218,4.5744299 2.0946717,3.5955782 1.1881411,2.6865022 1.9373218,1.9373215 2.6865025,1.1881409 3.5955784,2.0946715 4.5744301,1.6892179 5.5532818,1.2837642 5.5550817,-6.3447731e-5 6.6145832,-6.3419342e-5 Z"
transform="matrix(0.20000288,0,0,0.20000288,-5.0735291e-5,1.2684051e-5)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB