Skip to content

Commit d42a805

Browse files
joelamoucheoscarwroche
joelamouche
authored and
oscarwroche
committed
refactor out background
1 parent 844d25a commit d42a805

2 files changed

Lines changed: 183 additions & 178 deletions

File tree

‎frontend/src/components/AppBackground.tsx‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
export function AppBackground() {
2+
return (
3+
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden">
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
viewBox="0 0 3600 4500"
7+
className="w-[200%] h-[200%]"
8+
>
9+
<defs>
10+
<linearGradient id="rayGradient" x1="0" y1="1" x2="0" y2="0">
11+
<stop offset="0%" stopColor="lightgray" stopOpacity="1" />
12+
<stop offset="100%" stopColor="lightgray" stopOpacity="0" />
13+
</linearGradient>
14+
</defs>
15+
<g id="wrapper">
16+
<g id="rays" fill="url(#rayGradient)">
17+
<polygon points="1780,1800 1820,1800 1880,700 1720,700" />
18+
<polygon
19+
points="1780,1800 1820,1800 1880,700 1720,700"
20+
transform="rotate(18,1800,2250)"
21+
/>
22+
<polygon
23+
points="1780,1800 1820,1800 1880,700 1720,700"
24+
transform="rotate(36,1800,2250)"
25+
/>
26+
<polygon
27+
points="1780,1800 1820,1800 1880,700 1720,700"
28+
transform="rotate(54,1800,2250)"
29+
/>
30+
<polygon
31+
points="1780,1800 1820,1800 1880,700 1720,700"
32+
transform="rotate(72,1800,2250)"
33+
/>
34+
<polygon
35+
points="1780,1800 1820,1800 1880,700 1720,700"
36+
transform="rotate(90,1800,2250)"
37+
/>
38+
<polygon
39+
points="1780,1800 1820,1800 1880,700 1720,700"
40+
transform="rotate(108,1800,2250)"
41+
/>
42+
<polygon
43+
points="1780,1800 1820,1800 1880,700 1720,700"
44+
transform="rotate(126,1800,2250)"
45+
/>
46+
<polygon
47+
points="1780,1800 1820,1800 1880,700 1720,700"
48+
transform="rotate(144,1800,2250)"
49+
/>
50+
<polygon
51+
points="1780,1800 1820,1800 1880,700 1720,700"
52+
transform="rotate(162,1800,2250)"
53+
/>
54+
<polygon
55+
points="1780,1800 1820,1800 1880,700 1720,700"
56+
transform="rotate(180,1800,2250)"
57+
/>
58+
<polygon
59+
points="1780,1800 1820,1800 1880,700 1720,700"
60+
transform="rotate(198,1800,2250)"
61+
/>
62+
<polygon
63+
points="1780,1800 1820,1800 1880,700 1720,700"
64+
transform="rotate(216,1800,2250)"
65+
/>
66+
<polygon
67+
points="1780,1800 1820,1800 1880,700 1720,700"
68+
transform="rotate(234,1800,2250)"
69+
/>
70+
<polygon
71+
points="1780,1800 1820,1800 1880,700 1720,700"
72+
transform="rotate(252,1800,2250)"
73+
/>
74+
<polygon
75+
points="1780,1800 1820,1800 1880,700 1720,700"
76+
transform="rotate(270,1800,2250)"
77+
/>
78+
<polygon
79+
points="1780,1800 1820,1800 1880,700 1720,700"
80+
transform="rotate(288,1800,2250)"
81+
/>
82+
<polygon
83+
points="1780,1800 1820,1800 1880,700 1720,700"
84+
transform="rotate(306,1800,2250)"
85+
/>
86+
<polygon
87+
points="1780,1800 1820,1800 1880,700 1720,700"
88+
transform="rotate(324,1800,2250)"
89+
/>
90+
<polygon
91+
points="1780,1800 1820,1800 1880,700 1720,700"
92+
transform="rotate(342,1800,2250)"
93+
/>
94+
</g>
95+
96+
<g id="logo_svg" transform="translate(1620,2020)">
97+
<svg
98+
className="img-fluid"
99+
id="outputsvg"
100+
xmlns="http://www.w3.org/2000/svg"
101+
style={{
102+
transform: "none",
103+
transformOrigin: "50% 50%",
104+
cursor: "move",
105+
maxHeight: "none",
106+
}}
107+
width="360"
108+
height="450"
109+
viewBox="0 0 3600 4500"
110+
>
111+
<g
112+
id="l3Hsfi7tdR5427YcO9c3lUE"
113+
fill="rgb(135,160,173)"
114+
style={{ transform: "none" }}
115+
>
116+
<g style={{ transform: "none" }}>
117+
<path
118+
id="pNStYzxTa"
119+
d="M1605 4126 c-685 -357 -1144 -819 -1325 -1333 -61 -171 -60 -160 -60 -1143 0 -842 1 -898 18 -912 20 -18 348 -119 1027 -318 577 -168 542 -164 786 -91 90 28 324 98 519 156 473 142 768 233 791 246 10 5 21 20 24 32 3 12 4 434 2 937 -3 1018 2 934 -72 1140 -174 480 -644 939 -1322 1291 -119 62 -138 69 -190 69 -52 0 -72 -8 -198 -74z m344 -903 c7 -54 24 -185 38 -291 23 -172 25 -217 8 -200 -5 5 -20 104 -64 421 -25 175 -24 167 -8 167 10 0 17 -29 26 -97z m391 -262 c-61 -70 -80 -82 -26 -17 40 50 47 96 19 130 -9 12 0 5 21 -16 l39 -36 -53 -61z m-1238 72 c28 -38 41 -71 61 -153 14 -58 41 -152 61 -210 19 -57 34 -105 32 -107 -1 -2 -28 50 -58 114 -53 111 -93 221 -118 323 -6 25 -13 53 -16 63 -8 26 -1 21 38 -30z m524 -86 c16 -18 5 -10 -23 17 -51 48 -52 51 -35 69 16 19 17 18 23 -17 3 -20 19 -51 35 -69z m-200 -747 c193 -385 351 -615 623 -907 111 -120 127 -133 157 -133 32 0 34 2 34 34 0 26 -10 46 -40 81 -98 113 -301 404 -412 590 -145 244 -345 615 -330 615 18 0 158 -61 232 -102 128 -70 210 -129 303 -217 l90 -86 -99 -5 -99 -5 -3 -37 c-3 -34 0 -39 35 -56 21 -11 82 -34 135 -52 104 -34 160 -68 201 -122 36 -47 137 -253 137 -279 0 -5 -34 -9 -75 -9 l-75 0 0 -34 c0 -32 3 -36 53 -54 28 -11 71 -26 95 -33 23 -7 46 -17 51 -23 15 -20 95 -334 136 -534 4 -19 3 -32 -4 -32 -20 0 -170 70 -275 129 -162 90 -295 190 -443 335 -195 189 -334 376 -438 591 -93 190 -124 314 -131 515 l-4 135 27 -60 c15 -33 68 -143 119 -245z"
120+
></path>
121+
</g>
122+
</g>
123+
<g
124+
id="l3YhWVJcjoD5uAAbxMUAqaA"
125+
fill="rgb(211,211,210)"
126+
style={{ transform: "none" }}
127+
>
128+
<g style={{ transform: "none" }}>
129+
<path
130+
id="p3BX9h9OY"
131+
d="M1645 4254 c-529 -267 -960 -608 -1212 -959 -127 -176 -236 -402 -291 -603 l-27 -97 -3 -952 -3 -951 23 -26 c17 -20 55 -36 153 -65 195 -59 962 -285 1105 -326 69 -20 186 -54 260 -76 74 -21 151 -39 170 -39 39 0 140 29 750 213 917 278 872 263 903 297 l28 31 -4 947 -3 947 -26 95 c-78 280 -197 504 -387 732 -245 292 -671 611 -1100 822 -173 85 -186 86 -336 10z m318 -153 c678 -352 1148 -811 1322 -1291 74 -205 68 -126 72 -1110 2 -487 1 -895 -2 -907 -3 -12 -14 -27 -24 -32 -23 -13 -318 -104 -791 -246 -195 -58 -429 -128 -519 -156 -90 -27 -182 -49 -205 -49 -67 0 -1514 428 -1548 458 -17 14 -18 69 -18 882 0 950 0 942 60 1113 141 400 432 748 895 1074 202 142 544 332 598 333 15 0 87 -31 160 -69z"
132+
></path>
133+
<path
134+
id="pqaxyfAoF"
135+
d="M1710 3255 c0 -22 4 -25 35 -25 31 0 35 3 35 25 0 22 -4 25 -35 25 -31 0 -35 -3 -35 -25z"
136+
></path>
137+
<path
138+
id="pBoFPeD3G"
139+
d="M2150 3255 c0 -22 4 -25 40 -25 36 0 40 3 40 25 0 23 -4 25 -40 25 -36 0 -40 -2 -40 -25z"
140+
></path>
141+
<path
142+
id="pGskvRjha"
143+
d="M1392 2505 c9 -19 19 -25 45 -25 26 0 33 4 33 19 0 19 -25 31 -67 31 -20 0 -21 -2 -11 -25z"
144+
></path>
145+
<path
146+
id="pLovgig38"
147+
d="M1670 2395 c0 -35 0 -35 45 -35 57 0 59 18 6 48 -21 12 -41 22 -45 22 -3 0 -6 -16 -6 -35z"
148+
></path>
149+
</g>
150+
</g>
151+
<g
152+
id="lf8xIF6Yxumcjtd0sb5X7B"
153+
fill="rgb(229,227,226)"
154+
style={{ transform: "none" }}
155+
>
156+
<g style={{ transform: "none" }}>
157+
<path
158+
id="pAkTHXNmW"
159+
d="M1913 3352 c-24 -2 -43 -5 -43 -7 0 -2 9 -68 20 -147 11 -79 29 -208 40 -288 32 -234 24 -210 75 -210 30 0 45 4 45 13 0 6 -11 91 -25 187 -13 96 -32 236 -41 310 -9 74 -19 137 -23 140 -3 3 -25 4 -48 2z"
160+
></path>
161+
<path
162+
id="p16hoIawXM"
163+
d="M1664 3213 c-27 -37 -75 -96 -107 -130 l-59 -62 20 -28 c11 -15 37 -44 57 -63 20 -19 59 -65 87 -102 l50 -68 61 0 61 0 -30 33 c-17 17 -53 61 -79 97 -27 36 -62 80 -78 99 l-28 33 25 27 c14 14 59 71 100 126 l75 100 -31 3 c-18 2 -34 -2 -39 -10 -7 -10 -9 -10 -9 0 0 29 -29 8 -76 -55z"
164+
></path>
165+
<path
166+
id="pdpFLPnBJ"
167+
d="M2152 3238 c19 -24 64 -82 101 -130 l68 -87 -83 -106 c-46 -59 -91 -118 -101 -131 l-19 -24 59 0 58 1 68 87 c37 48 86 106 108 130 l41 42 -64 68 c-34 37 -85 95 -112 130 -48 61 -69 74 -80 50 -5 -10 -7 -10 -12 0 -3 6 -19 12 -36 12 l-30 0 34 -42z"
168+
></path>
169+
<path
170+
id="pFbAuAGwg"
171+
d="M1006 3170 c36 -204 100 -401 183 -569 l58 -116 6 -140 c6 -151 23 -249 63 -360 58 -161 180 -375 308 -539 89 -114 316 -331 435 -416 218 -155 561 -318 561 -265 0 74 -130 606 -154 631 -6 7 -47 23 -91 38 -120 40 -123 46 -22 46 50 0 87 4 87 10 0 37 -113 280 -157 338 -41 54 -97 88 -201 122 -115 38 -175 67 -167 80 8 13 117 13 189 -1 31 -5 62 -9 68 -7 14 5 -159 186 -235 246 -91 72 -194 131 -217 125 -15 -4 -19 -1 -15 9 10 26 -225 123 -271 112 -14 -4 -24 -2 -24 5 0 6 -7 11 -16 11 -35 0 324 -649 514 -929 97 -143 244 -342 267 -361 16 -13 39 -50 32 -50 -3 0 -60 60 -128 132 -262 283 -412 499 -600 863 -146 282 -232 502 -286 725 -27 113 -53 157 -148 250 l-45 45 6 -35z"
172+
></path>
173+
</g>
174+
</g>
175+
</svg>
176+
</g>
177+
</g>
178+
</svg>
179+
</div>
180+
);
181+
}

0 commit comments

Comments
 (0)