Skip to content

Commit b4c9651

Browse files
MattIPv4MattIPv4
committed
chore(🏳️‍🌈): update logo component
1 parent 6b81db3 commit b4c9651

File tree

1 file changed

+201
-17
lines changed

1 file changed

+201
-17
lines changed

‎packages/ui-components/Icons/Logos/Nodejs.tsx‎

Lines changed: 201 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,9 @@ const NodejsIcon: FC<NodeJsLogoProps> = ({
7272
/>
7373

7474
{variant === 'pride' ? (
75-
<>
75+
<g clip-path="url(#clip0_1_1661)">
7676
<mask
77-
id="mask1_12_17"
77+
id="mask1_1_1661"
7878
style={{ maskType: 'alpha' }}
7979
maskUnits="userSpaceOnUse"
8080
x="53"
@@ -83,37 +83,77 @@ const NodejsIcon: FC<NodeJsLogoProps> = ({
8383
height="51"
8484
>
8585
<path
86-
d="M76.2211 28.9482C75.4847 28.5316 74.6105 28.5316 73.8743 28.9482L54.5024 40.1993C53.7662 40.616 53.3521 41.4029 53.3521 42.2366V64.7846C53.3521 65.6181 53.8122 66.405 54.5024 66.8219L73.8743 78.0729C74.6105 78.4894 75.4847 78.4894 76.2211 78.0729L95.5929 66.8219C96.3288 66.405 96.7431 65.6181 96.7431 64.7846V42.2366C96.7431 41.4029 96.2832 40.616 95.5929 40.1993L76.2211 28.9482Z"
87-
fill="white"
86+
d="M76.3478 28.9593C75.9882 28.7545 75.5815 28.6469 75.1677 28.6469C74.7539 28.6469 74.3472 28.7545 73.9876 28.9593L54.5067 40.2057C53.7665 40.6229 53.35 41.4099 53.35 42.2422V64.7816C53.35 65.6147 53.8126 66.4016 54.5067 66.8181L73.9876 78.0645C74.3472 78.2693 74.7539 78.3769 75.1677 78.3769C75.5815 78.3769 75.9882 78.2693 76.3478 78.0645L95.8286 66.8181C96.5689 66.4016 96.9854 65.6139 96.9854 64.7816V42.2422C96.9813 41.8325 96.8729 41.4307 96.6705 41.0745C96.4681 40.7184 96.1784 40.4196 95.8286 40.2064L76.3478 28.9593Z"
87+
fill="url(#paint0_linear_1_1661)"
8888
/>
8989
</mask>
90-
<g mask="url(#mask1_12_17)">
90+
<g mask="url(#mask1_1_1661)">
9191
<path
92-
d="M103.17 53.5459H53.4209V61.8043H103.17V53.5459Z"
93-
fill="#008026"
92+
d="M97.0564 70.1316H53.35V78.39H97.0564V70.1316Z"
93+
fill="#750787"
9494
/>
9595
<path
96-
d="M103.17 61.8042H53.4209V70.1621H103.17V61.8042Z"
96+
d="M97.0564 61.7731H53.35V70.131H97.0564V61.7731Z"
9797
fill="#004DFF"
9898
/>
9999
<path
100-
d="M103.17 37.0293H53.4209V45.2877H103.17V37.0293Z"
101-
fill="#FF8C00"
100+
d="M97.0564 53.5147H53.35V61.7732H97.0564V53.5147Z"
101+
fill="#008026"
102102
/>
103103
<path
104-
d="M103.17 45.2876H53.4209V53.546H103.17V45.2876Z"
104+
d="M97.0564 45.2563H53.35V53.5148H97.0564V45.2563Z"
105105
fill="#FFED00"
106106
/>
107107
<path
108-
d="M103.17 28.6714H53.4209V37.0293H103.17V28.6714Z"
108+
d="M97.0564 36.998H53.35V45.2565H97.0564V36.998Z"
109+
fill="#FF8C00"
110+
/>
111+
<path
112+
d="M97.0564 28.64H53.35V36.998H97.0564V28.64Z"
109113
fill="#E40303"
110114
/>
115+
</g>
116+
<g style={{ mixBlendMode: 'luminosity' }} opacity="0.5">
111117
<path
112-
d="M103.17 70.1626H53.4209V78.421H103.17V70.1626Z"
113-
fill="#750787"
118+
d="M76.3478 28.9593C75.9882 28.7545 75.5815 28.6469 75.1677 28.6469C74.7539 28.6469 74.3472 28.7545 73.9876 28.9593L54.5067 40.2057C53.7665 40.6229 53.35 41.4099 53.35 42.2422V64.7816C53.35 65.6147 53.8126 66.4016 54.5067 66.8181L73.9876 78.0645C74.3472 78.2693 74.7539 78.3769 75.1677 78.3769C75.5815 78.3769 75.9882 78.2693 76.3478 78.0645L95.8286 66.8181C96.5689 66.4016 96.9854 65.6139 96.9854 64.7816V42.2422C96.9813 41.8325 96.8729 41.4307 96.6705 41.0745C96.4681 40.7184 96.1784 40.4196 95.8286 40.2064L76.3478 28.9593Z"
119+
fill="white"
114120
/>
121+
<g style={{ mixBlendMode: 'luminosity' }}>
122+
<mask
123+
id="mask2_1_1661"
124+
style={{ maskType: 'alpha' }}
125+
maskUnits="userSpaceOnUse"
126+
x="53"
127+
y="28"
128+
width="44"
129+
height="51"
130+
>
131+
<path
132+
d="M76.3478 28.9593C75.9882 28.7545 75.5815 28.6469 75.1677 28.6469C74.7539 28.6469 74.3472 28.7545 73.9876 28.9593L54.5067 40.2057C53.7665 40.6229 53.35 41.4099 53.35 42.2422V64.7816C53.35 65.6147 53.8126 66.4016 54.5067 66.8181L73.9876 78.0645C74.3472 78.2693 74.7539 78.3769 75.1677 78.3769C75.5815 78.3769 75.9882 78.2693 76.3478 78.0645L95.8286 66.8181C96.5689 66.4016 96.9854 65.6139 96.9854 64.7816V42.2422C96.9813 41.8325 96.8729 41.4307 96.6705 41.0745C96.4681 40.7184 96.1784 40.4196 95.8286 40.2064L76.3478 28.9593Z"
133+
fill="url(#paint1_linear_1_1661)"
134+
/>
135+
</mask>
136+
<g mask="url(#mask2_1_1661)">
137+
<path
138+
d="M76.3478 28.9593C75.9882 28.7545 75.5815 28.6469 75.1677 28.6469C74.7539 28.6469 74.3472 28.7545 73.9876 28.9593L54.5067 40.2057C53.7665 40.6229 53.35 41.4099 53.35 42.2422V64.7816C53.35 65.6147 53.8126 66.4016 54.5067 66.8181L73.9876 78.0645C74.3472 78.2693 74.7539 78.3769 75.1677 78.3769C75.5815 78.3769 75.9882 78.2693 76.3478 78.0645L95.8286 66.8181C96.5689 66.4016 96.9854 65.6139 96.9854 64.7816V42.2422C96.9813 41.8325 96.8729 41.4307 96.6705 41.0745C96.4681 40.7184 96.1784 40.4196 95.8286 40.2064L76.3478 28.9593Z"
139+
fill="url(#paint2_linear_1_1661)"
140+
/>
141+
<g filter="url(#filter0_d_1_1661)">
142+
<path
143+
d="M95.8746 40.2064L76.301 28.9586C76.1087 28.8617 75.9073 28.7843 75.6996 28.7277L53.8153 66.2174C54.0002 66.4491 54.292 66.7869 54.5237 66.9258L73.9875 78.0645C74.5428 78.3882 75.1903 78.481 75.7924 78.2954L96.3832 40.6229C96.2478 40.4469 96.0738 40.3044 95.8746 40.2064Z"
144+
fill="url(#paint3_linear_1_1661)"
145+
/>
146+
</g>
147+
<g filter="url(#filter1_d_1_1661)">
148+
<path
149+
d="M95.8265 66.8181C96.3818 66.4937 96.8826 65.8866 96.8826 65.1549L75.5587 28.6823C75.0033 28.5895 74.4019 28.6356 73.8926 28.9593L54.4585 40.1596L75.4198 78.3882C75.7247 78.3383 76.0207 78.2448 76.2989 78.1105L95.8265 66.8181Z"
150+
fill="url(#paint4_linear_1_1661)"
151+
/>
152+
</g>
153+
</g>
154+
</g>
115155
</g>
116-
</>
156+
</g>
117157
) : (
118158
<>
119159
<path
@@ -131,10 +171,154 @@ const NodejsIcon: FC<NodeJsLogoProps> = ({
131171
</>
132172
)}
133173
</g>
174+
134175
{variant === 'pride' ? (
135176
<defs>
136-
<clipPath id="clip0_12_17">
137-
<rect width="267" height="79.988" fill="white" />
177+
<filter
178+
id="filter0_d_1_1661"
179+
x="41.8153"
180+
y="16.7277"
181+
width="66.5679"
182+
height="73.6624"
183+
filterUnits="userSpaceOnUse"
184+
color-interpolation-filters="sRGB"
185+
>
186+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
187+
<feColorMatrix
188+
in="SourceAlpha"
189+
type="matrix"
190+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
191+
result="hardAlpha"
192+
/>
193+
<feOffset />
194+
<feGaussianBlur stdDeviation="6" />
195+
<feComposite in2="hardAlpha" operator="out" />
196+
<feColorMatrix
197+
type="matrix"
198+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.75 0"
199+
/>
200+
<feBlend
201+
mode="normal"
202+
in2="BackgroundImageFix"
203+
result="effect1_dropShadow_1_1661"
204+
/>
205+
<feBlend
206+
mode="normal"
207+
in="SourceGraphic"
208+
in2="effect1_dropShadow_1_1661"
209+
result="shape"
210+
/>
211+
</filter>
212+
<filter
213+
id="filter1_d_1_1661"
214+
x="42.4585"
215+
y="16.64"
216+
width="66.4241"
217+
height="73.7482"
218+
filterUnits="userSpaceOnUse"
219+
color-interpolation-filters="sRGB"
220+
>
221+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
222+
<feColorMatrix
223+
in="SourceAlpha"
224+
type="matrix"
225+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
226+
result="hardAlpha"
227+
/>
228+
<feOffset />
229+
<feGaussianBlur stdDeviation="6" />
230+
<feComposite in2="hardAlpha" operator="out" />
231+
<feColorMatrix
232+
type="matrix"
233+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.75 0"
234+
/>
235+
<feBlend
236+
mode="normal"
237+
in2="BackgroundImageFix"
238+
result="effect1_dropShadow_1_1661"
239+
/>
240+
<feBlend
241+
mode="normal"
242+
in="SourceGraphic"
243+
in2="effect1_dropShadow_1_1661"
244+
result="shape"
245+
/>
246+
</filter>
247+
<linearGradient
248+
id="paint0_linear_1_1661"
249+
x1="83.1011"
250+
y1="37.3355"
251+
x2="65.4825"
252+
y2="73.2718"
253+
gradientUnits="userSpaceOnUse"
254+
>
255+
<stop stop-color="#3F873F" />
256+
<stop offset="0.33" stop-color="#3F8B3D" />
257+
<stop offset="0.637" stop-color="#3E9638" />
258+
<stop offset="0.934" stop-color="#3DA92E" />
259+
<stop offset="1" stop-color="#3DAE2B" />
260+
</linearGradient>
261+
<linearGradient
262+
id="paint1_linear_1_1661"
263+
x1="83.1011"
264+
y1="37.3355"
265+
x2="65.4825"
266+
y2="73.2718"
267+
gradientUnits="userSpaceOnUse"
268+
>
269+
<stop stop-color="#3F873F" />
270+
<stop offset="0.33" stop-color="#3F8B3D" />
271+
<stop offset="0.637" stop-color="#3E9638" />
272+
<stop offset="0.934" stop-color="#3DA92E" />
273+
<stop offset="1" stop-color="#3DAE2B" />
274+
</linearGradient>
275+
<linearGradient
276+
id="paint2_linear_1_1661"
277+
x1="83.1011"
278+
y1="37.3355"
279+
x2="65.4825"
280+
y2="73.2718"
281+
gradientUnits="userSpaceOnUse"
282+
>
283+
<stop stop-color="#3F873F" />
284+
<stop offset="0.33" stop-color="#3F8B3D" />
285+
<stop offset="0.637" stop-color="#3E9638" />
286+
<stop offset="0.934" stop-color="#3DA92E" />
287+
<stop offset="1" stop-color="#3DAE2B" />
288+
</linearGradient>
289+
<linearGradient
290+
id="paint3_linear_1_1661"
291+
x1="72.2067"
292+
y1="56.1434"
293+
x2="121.636"
294+
y2="19.6297"
295+
gradientUnits="userSpaceOnUse"
296+
>
297+
<stop offset="0.138" stop-color="#3F873F" />
298+
<stop offset="0.402" stop-color="#52A044" />
299+
<stop offset="0.713" stop-color="#64B749" />
300+
<stop offset="0.908" stop-color="#6ABF4B" />
301+
</linearGradient>
302+
<linearGradient
303+
id="paint4_linear_1_1661"
304+
x1="52.636"
305+
y1="53.5048"
306+
x2="97.7135"
307+
y2="53.5048"
308+
gradientUnits="userSpaceOnUse"
309+
>
310+
<stop offset="0.092" stop-color="#6ABF4B" />
311+
<stop offset="0.287" stop-color="#64B749" />
312+
<stop offset="0.598" stop-color="#52A044" />
313+
<stop offset="0.862" stop-color="#3F873F" />
314+
</linearGradient>
315+
<clipPath id="clip0_1_1661">
316+
<rect
317+
width="43.7067"
318+
height="49.75"
319+
fill="white"
320+
transform="translate(53.35 28.64)"
321+
/>
138322
</clipPath>
139323
</defs>
140324
) : (

0 commit comments

Comments
 (0)