Skip to content

Commit 768ce8d

Browse files
EvanCPSCEvanCPSC
committed
small bug with the svg layering
1 parent 5664c5a commit 768ce8d

1 file changed

Lines changed: 25 additions & 18 deletions

File tree

‎src/components/CPUGrid.svelte‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -82,12 +82,15 @@
8282
</script>
8383

8484
<svg width="600" height="600" viewBox="0 0 600 536" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin:auto;">
85+
<!-- Background Square -->
8586
<rect x="24" y="12" width="512" height="512" fill="#0a5447" rx="10" ry="10" />
8687

88+
<!-- Circle Generation -->
8789
{#each Array(12) as _, i}
8890
{#each Array(12) as _, j}
8991
{#if !skippedGrid.has(`${i},${j}`)}
9092
{#if isTaken(i, j)}
93+
<!-- Contributor Circle -->
9194
<circle
9295
cx={i * 42 + 48}
9396
cy={j * 42 + 36}
@@ -100,14 +103,34 @@
100103
}}
101104
/>
102105
{:else}
106+
<!-- Default Circle -->
103107
<circle cx={i * 42 + 48} cy={j * 42 + 36} r="12" fill={pinDefaultColor} />
104108
{/if}
105109
{/if}
106110
{/each}
107111
{/each}
108112

113+
<!-- Open Source Logo -->
114+
<svg width="242" height="242" x="153" y="147" viewBox="0 0 242 242" fill="none" xmlns="http://www.w3.org/2000/svg">
115+
<g filter="url(#filter0_f_1_19)">
116+
<path d="M74.9816 107.176L88.7941 113.02C90.4469 109.715 92.1587 106.527 93.9295 103.457C95.7003 100.388 97.6483 97.3187 99.7733 94.2492L89.8566 92.3013L74.9816 107.176ZM100.127 121.874L120.315 141.885C125.274 139.996 130.586 137.104 136.252 133.207C141.919 129.312 147.231 124.885 152.19 119.926C160.454 111.662 166.919 102.485 171.584 92.3934C176.245 82.2973 178.28 72.9992 177.69 64.4992C169.19 63.9089 159.864 65.9442 149.711 70.605C139.558 75.2706 130.35 81.7353 122.086 89.9992C117.127 94.9575 112.7 100.27 108.805 105.937C104.909 111.604 102.016 116.916 100.127 121.874ZM135.013 167.207L149.888 152.332L147.94 142.416C144.87 144.541 141.801 146.458 138.731 148.167C135.662 149.882 132.475 151.565 129.169 153.218L135.013 167.207ZM180.584 50.6027C186.485 50.8322 191.178 55.5271 191.414 61.4276C191.847 72.2697 190.137 82.8844 186.282 93.2717C181.262 106.791 172.614 119.69 160.336 131.968L163.877 149.499C164.35 151.86 164.231 154.162 163.524 156.405C162.815 158.649 161.634 160.596 159.981 162.249L140.194 182.037C135.427 186.804 127.35 185.242 124.705 179.039L115.356 157.114L86.3782 128.135C85.5176 127.275 84.5 126.587 83.3805 126.11L63.1086 117.466C56.9175 114.826 55.346 106.771 60.0909 101.997L79.7629 82.2075C81.4156 80.5548 83.3943 79.3742 85.6987 78.6659C87.9984 77.9576 90.3288 77.8395 92.6899 78.3117L110.221 81.8534C122.499 69.5756 135.367 60.8985 148.825 55.8222C159.167 51.9211 169.754 50.1813 180.584 50.6027ZM62.7629 149.322C66.8948 145.19 71.9405 143.094 77.8999 143.032C83.8641 142.975 88.9122 145.013 93.0441 149.145C97.176 153.277 99.2113 158.322 99.1499 164.282C99.0933 170.246 96.9989 175.294 92.867 179.426C89.9157 182.377 84.988 184.916 78.0841 187.041C72.9484 188.62 66.3617 190.07 58.3241 191.389C53.8885 192.116 50.0729 188.301 50.8006 183.865C52.1194 175.828 53.5686 169.24 55.1483 164.105C57.2733 157.201 59.8114 152.274 62.7629 149.322ZM72.8566 159.239C71.676 160.419 70.4955 162.575 69.3149 165.706C68.1344 168.832 67.308 171.989 66.8358 175.176C70.0233 174.704 73.1824 173.909 76.3133 172.789C79.4394 171.665 81.5927 170.513 82.7733 169.332C84.1899 167.916 84.9573 166.204 85.0754 164.197C85.1934 162.19 84.5441 160.479 83.1274 159.062C81.7108 157.645 79.9989 156.965 77.992 157.022C75.985 157.083 74.2733 157.822 72.8566 159.239Z" fill="#11D4B1" fill-opacity="0.4"/>
117+
<path d="M141.48 114.847C141.48 107.149 135.239 100.907 127.54 100.907C119.841 100.907 113.6 107.149 113.6 114.847C113.6 122.546 119.841 128.787 127.54 128.787C135.239 128.787 141.48 122.546 141.48 114.847Z" fill="#11D4B1" fill-opacity="0.4"/>
118+
<path d="M163.92 89.6874C163.92 83.4908 158.897 78.4674 152.7 78.4674C146.503 78.4674 141.48 83.4908 141.48 89.6874C141.48 95.8841 146.503 100.907 152.7 100.907C158.897 100.907 163.92 95.8841 163.92 89.6874Z" fill="#11D4B1" fill-opacity="0.4"/>
119+
</g>
120+
<path d="M78.9399 106.706L91.4512 112.018C92.9483 109.013 94.4988 106.115 96.1028 103.325C97.7068 100.535 99.4713 97.7442 101.396 94.9538L92.4136 93.183L78.9399 106.706ZM101.717 120.068L120.003 138.259C124.494 136.542 129.306 133.912 134.439 130.37C139.572 126.829 144.384 122.804 148.875 118.297C156.361 110.784 162.216 102.441 166.442 93.2667C170.664 84.0884 172.507 75.6357 171.973 67.9084C164.274 67.3717 155.826 69.222 146.629 73.4591C137.433 77.7006 129.092 83.5776 121.607 91.0902C117.115 95.5977 113.105 100.427 109.577 105.579C106.048 110.731 103.428 115.56 101.717 120.068ZM133.316 161.279L146.789 147.757L145.025 138.742C142.245 140.673 139.465 142.417 136.684 143.97C133.904 145.529 131.017 147.059 128.023 148.562L133.316 161.279ZM174.594 55.2752C179.939 55.4839 184.191 59.7519 184.404 65.116C184.796 74.9724 183.247 84.6222 179.755 94.0652C175.208 106.356 167.375 118.082 156.253 129.244L159.461 145.181C159.889 147.328 159.782 149.42 159.141 151.459C158.499 153.499 157.43 155.269 155.932 156.772L138.009 174.761C133.691 179.095 126.375 177.674 123.979 172.036L115.511 152.104L89.2628 125.759C88.4834 124.977 87.5616 124.352 86.5476 123.918L68.1853 116.06C62.5775 113.66 61.154 106.337 65.4519 101.998L83.2707 84.0068C84.7678 82.5043 86.56 81.4311 88.6474 80.7871C90.7304 80.1433 92.8413 80.0359 94.98 80.4652L110.86 83.6849C121.981 72.5233 133.637 64.635 145.827 60.0201C155.195 56.4738 164.784 54.8921 174.594 55.2752ZM67.8722 145.02C71.6149 141.264 76.1852 139.358 81.5833 139.302C86.9856 139.25 91.5581 141.103 95.3008 144.859C99.0435 148.615 100.887 153.202 100.831 158.62C100.78 164.042 98.8831 168.631 95.1404 172.387C92.4671 175.07 88.0036 177.378 81.7501 179.31C77.0982 180.746 71.132 182.063 63.8515 183.262C59.8338 183.924 56.3776 180.455 57.0368 176.423C58.2313 169.116 59.544 163.128 60.9749 158.459C62.8997 152.183 65.1988 147.703 67.8722 145.02ZM77.015 154.035C75.9457 155.109 74.8763 157.068 73.807 159.914C72.7377 162.756 71.9891 165.626 71.5614 168.524C74.4486 168.095 77.3102 167.371 80.1461 166.354C82.9777 165.332 84.9282 164.285 85.9975 163.211C87.2807 161.923 87.9758 160.367 88.0828 158.543C88.1897 156.718 87.6015 155.162 86.3183 153.874C85.0351 152.586 83.4846 151.968 81.6667 152.02C79.8488 152.076 78.2983 152.747 77.015 154.035Z" fill="#11D4B1"/>
121+
<path d="M139.174 113.68C139.174 106.681 133.521 101.007 126.547 101.007C119.574 101.007 113.92 106.681 113.92 113.68C113.92 120.678 119.574 126.352 126.547 126.352C133.521 126.352 139.174 120.678 139.174 113.68Z" fill="#11D4B1"/>
122+
<path d="M159.5 90.8068C159.5 85.1735 154.95 80.6068 149.337 80.6068C143.724 80.6068 139.174 85.1735 139.174 90.8068C139.174 96.4401 143.724 101.007 149.337 101.007C154.95 101.007 159.5 96.4401 159.5 90.8068Z" fill="#11D4B1"/>
123+
<defs>
124+
<filter id="filter0_f_1_19" x="-18" y="-16" width="270" height="270" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
125+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
126+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
127+
<feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_1_19"/>
128+
</filter>
129+
</defs>
130+
</svg>
131+
132+
<!-- Hover Box -->
109133
{#if hovered.name}
110-
<!-- Hover box -->
111134
<rect
112135
x={hovered.x * 42 + 48 - (hovered.name.length * 6)}
113136
y={hovered.y * 42 - 6}
@@ -129,23 +152,7 @@
129152
{hovered.name}
130153
</text>
131154
{/if}
132-
<svg width="242" height="242" x="153" y="147" viewBox="0 0 242 242" fill="none" xmlns="http://www.w3.org/2000/svg">
133-
<g filter="url(#filter0_f_1_19)">
134-
<path d="M74.9816 107.176L88.7941 113.02C90.4469 109.715 92.1587 106.527 93.9295 103.457C95.7003 100.388 97.6483 97.3187 99.7733 94.2492L89.8566 92.3013L74.9816 107.176ZM100.127 121.874L120.315 141.885C125.274 139.996 130.586 137.104 136.252 133.207C141.919 129.312 147.231 124.885 152.19 119.926C160.454 111.662 166.919 102.485 171.584 92.3934C176.245 82.2973 178.28 72.9992 177.69 64.4992C169.19 63.9089 159.864 65.9442 149.711 70.605C139.558 75.2706 130.35 81.7353 122.086 89.9992C117.127 94.9575 112.7 100.27 108.805 105.937C104.909 111.604 102.016 116.916 100.127 121.874ZM135.013 167.207L149.888 152.332L147.94 142.416C144.87 144.541 141.801 146.458 138.731 148.167C135.662 149.882 132.475 151.565 129.169 153.218L135.013 167.207ZM180.584 50.6027C186.485 50.8322 191.178 55.5271 191.414 61.4276C191.847 72.2697 190.137 82.8844 186.282 93.2717C181.262 106.791 172.614 119.69 160.336 131.968L163.877 149.499C164.35 151.86 164.231 154.162 163.524 156.405C162.815 158.649 161.634 160.596 159.981 162.249L140.194 182.037C135.427 186.804 127.35 185.242 124.705 179.039L115.356 157.114L86.3782 128.135C85.5176 127.275 84.5 126.587 83.3805 126.11L63.1086 117.466C56.9175 114.826 55.346 106.771 60.0909 101.997L79.7629 82.2075C81.4156 80.5548 83.3943 79.3742 85.6987 78.6659C87.9984 77.9576 90.3288 77.8395 92.6899 78.3117L110.221 81.8534C122.499 69.5756 135.367 60.8985 148.825 55.8222C159.167 51.9211 169.754 50.1813 180.584 50.6027ZM62.7629 149.322C66.8948 145.19 71.9405 143.094 77.8999 143.032C83.8641 142.975 88.9122 145.013 93.0441 149.145C97.176 153.277 99.2113 158.322 99.1499 164.282C99.0933 170.246 96.9989 175.294 92.867 179.426C89.9157 182.377 84.988 184.916 78.0841 187.041C72.9484 188.62 66.3617 190.07 58.3241 191.389C53.8885 192.116 50.0729 188.301 50.8006 183.865C52.1194 175.828 53.5686 169.24 55.1483 164.105C57.2733 157.201 59.8114 152.274 62.7629 149.322ZM72.8566 159.239C71.676 160.419 70.4955 162.575 69.3149 165.706C68.1344 168.832 67.308 171.989 66.8358 175.176C70.0233 174.704 73.1824 173.909 76.3133 172.789C79.4394 171.665 81.5927 170.513 82.7733 169.332C84.1899 167.916 84.9573 166.204 85.0754 164.197C85.1934 162.19 84.5441 160.479 83.1274 159.062C81.7108 157.645 79.9989 156.965 77.992 157.022C75.985 157.083 74.2733 157.822 72.8566 159.239Z" fill="#11D4B1" fill-opacity="0.4"/>
135-
<path d="M141.48 114.847C141.48 107.149 135.239 100.907 127.54 100.907C119.841 100.907 113.6 107.149 113.6 114.847C113.6 122.546 119.841 128.787 127.54 128.787C135.239 128.787 141.48 122.546 141.48 114.847Z" fill="#11D4B1" fill-opacity="0.4"/>
136-
<path d="M163.92 89.6874C163.92 83.4908 158.897 78.4674 152.7 78.4674C146.503 78.4674 141.48 83.4908 141.48 89.6874C141.48 95.8841 146.503 100.907 152.7 100.907C158.897 100.907 163.92 95.8841 163.92 89.6874Z" fill="#11D4B1" fill-opacity="0.4"/>
137-
</g>
138-
<path d="M78.9399 106.706L91.4512 112.018C92.9483 109.013 94.4988 106.115 96.1028 103.325C97.7068 100.535 99.4713 97.7442 101.396 94.9538L92.4136 93.183L78.9399 106.706ZM101.717 120.068L120.003 138.259C124.494 136.542 129.306 133.912 134.439 130.37C139.572 126.829 144.384 122.804 148.875 118.297C156.361 110.784 162.216 102.441 166.442 93.2667C170.664 84.0884 172.507 75.6357 171.973 67.9084C164.274 67.3717 155.826 69.222 146.629 73.4591C137.433 77.7006 129.092 83.5776 121.607 91.0902C117.115 95.5977 113.105 100.427 109.577 105.579C106.048 110.731 103.428 115.56 101.717 120.068ZM133.316 161.279L146.789 147.757L145.025 138.742C142.245 140.673 139.465 142.417 136.684 143.97C133.904 145.529 131.017 147.059 128.023 148.562L133.316 161.279ZM174.594 55.2752C179.939 55.4839 184.191 59.7519 184.404 65.116C184.796 74.9724 183.247 84.6222 179.755 94.0652C175.208 106.356 167.375 118.082 156.253 129.244L159.461 145.181C159.889 147.328 159.782 149.42 159.141 151.459C158.499 153.499 157.43 155.269 155.932 156.772L138.009 174.761C133.691 179.095 126.375 177.674 123.979 172.036L115.511 152.104L89.2628 125.759C88.4834 124.977 87.5616 124.352 86.5476 123.918L68.1853 116.06C62.5775 113.66 61.154 106.337 65.4519 101.998L83.2707 84.0068C84.7678 82.5043 86.56 81.4311 88.6474 80.7871C90.7304 80.1433 92.8413 80.0359 94.98 80.4652L110.86 83.6849C121.981 72.5233 133.637 64.635 145.827 60.0201C155.195 56.4738 164.784 54.8921 174.594 55.2752ZM67.8722 145.02C71.6149 141.264 76.1852 139.358 81.5833 139.302C86.9856 139.25 91.5581 141.103 95.3008 144.859C99.0435 148.615 100.887 153.202 100.831 158.62C100.78 164.042 98.8831 168.631 95.1404 172.387C92.4671 175.07 88.0036 177.378 81.7501 179.31C77.0982 180.746 71.132 182.063 63.8515 183.262C59.8338 183.924 56.3776 180.455 57.0368 176.423C58.2313 169.116 59.544 163.128 60.9749 158.459C62.8997 152.183 65.1988 147.703 67.8722 145.02ZM77.015 154.035C75.9457 155.109 74.8763 157.068 73.807 159.914C72.7377 162.756 71.9891 165.626 71.5614 168.524C74.4486 168.095 77.3102 167.371 80.1461 166.354C82.9777 165.332 84.9282 164.285 85.9975 163.211C87.2807 161.923 87.9758 160.367 88.0828 158.543C88.1897 156.718 87.6015 155.162 86.3183 153.874C85.0351 152.586 83.4846 151.968 81.6667 152.02C79.8488 152.076 78.2983 152.747 77.015 154.035Z" fill="#11D4B1"/>
139-
<path d="M139.174 113.68C139.174 106.681 133.521 101.007 126.547 101.007C119.574 101.007 113.92 106.681 113.92 113.68C113.92 120.678 119.574 126.352 126.547 126.352C133.521 126.352 139.174 120.678 139.174 113.68Z" fill="#11D4B1"/>
140-
<path d="M159.5 90.8068C159.5 85.1735 154.95 80.6068 149.337 80.6068C143.724 80.6068 139.174 85.1735 139.174 90.8068C139.174 96.4401 143.724 101.007 149.337 101.007C154.95 101.007 159.5 96.4401 159.5 90.8068Z" fill="#11D4B1"/>
141-
<defs>
142-
<filter id="filter0_f_1_19" x="-18" y="-16" width="270" height="270" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
143-
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
144-
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
145-
<feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_1_19"/>
146-
</filter>
147-
</defs>
148-
</svg>
155+
149156
</svg>
150157

151158
<style>

0 commit comments

Comments
 (0)