fix: use SVG-based rendering for Trianglify in browser instead of Node.js canvas

frontend/src/components/Layout.jsx

@@ -261,8 +261,23 @@ const Layout = ({ children }) => {
 						yColors: themeConfig.login.yColors,
 					});
 
-					// Render to canvas
+					// Render to canvas using SVG (browser-compatible)
-					pattern.toCanvas(bgCanvasRef.current);
+					const svg = pattern.toSVG();
+					const ctx = bgCanvasRef.current.getContext("2d");
+					const img = new Image();
+					const blob = new Blob([svg], { type: "image/svg+xml" });
+					const url = URL.createObjectURL(blob);
+					img.onload = () => {
+						ctx.drawImage(
+							img,
+							0,
+							0,
+							bgCanvasRef.current.width,
+							bgCanvasRef.current.height,
+						);
+						URL.revokeObjectURL(url);
+					};
+					img.src = url;
 				}
 			} catch (error) {
 				// Canvas/trianglify not available, skip background generation

frontend/src/pages/Login.jsx

@@ -77,8 +77,23 @@ const Login = () => {
 						yColors: themeConfig.login.yColors,
 					});
 
-					// Render to canvas
+					// Render to canvas using SVG (browser-compatible)
-					pattern.toCanvas(canvasRef.current);
+					const svg = pattern.toSVG();
+					const ctx = canvasRef.current.getContext("2d");
+					const img = new Image();
+					const blob = new Blob([svg], { type: "image/svg+xml" });
+					const url = URL.createObjectURL(blob);
+					img.onload = () => {
+						ctx.drawImage(
+							img,
+							0,
+							0,
+							canvasRef.current.width,
+							canvasRef.current.height,
+						);
+						URL.revokeObjectURL(url);
+					};
+					img.src = url;
 				}
 			} catch (error) {
 				// Canvas/trianglify not available, skip background generation