Spaces:
Running
Running
File size: 8,882 Bytes
1e2158c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | import React from 'react';
import { motion } from 'framer-motion';
interface BackgroundPatternProps {
pattern?: string;
accentColor?: string;
isDark?: boolean;
}
export const BackgroundPattern: React.FC<BackgroundPatternProps> = ({
pattern = 'none',
accentColor = '#3b82f6',
isDark = true
}) => {
if (pattern === 'none') return null;
const opacity = isDark ? 0.15 : 0.08;
const getPattern = () => {
switch (pattern) {
case 'grid':
return (
<div className="absolute inset-0 pointer-events-none" style={{
backgroundImage: `linear-gradient(${accentColor} 1px, transparent 1px), linear-gradient(90deg, ${accentColor} 1px, transparent 1px)`,
backgroundSize: '40px 40px',
opacity: opacity
}} />
);
case 'dots':
return (
<div className="absolute inset-0 pointer-events-none" style={{
backgroundImage: `radial-gradient(${accentColor} 2px, transparent 2px)`,
backgroundSize: '30px 30px',
opacity: opacity
}} />
);
case 'stripes':
return (
<div className="absolute inset-0 pointer-events-none" style={{
backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 10px, ${accentColor} 10px, ${accentColor} 11px)`,
opacity: opacity
}} />
);
case 'radial':
return (
<div className="absolute inset-0 pointer-events-none" style={{
background: `radial-gradient(circle at 50% 0%, ${accentColor}40 0%, transparent 60%)`,
opacity: 0.8
}} />
);
case 'mesh':
return (
<div className="absolute inset-0 pointer-events-none overflow-hidden">
<motion.div
animate={{ x: [0, 100, 0], y: [0, -50, 0] }}
transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] rounded-full blur-[100px]"
style={{ backgroundColor: accentColor, opacity: opacity * 2 }}
/>
<motion.div
animate={{ x: [0, -100, 0], y: [0, 100, 0] }}
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
className="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] rounded-full blur-[120px]"
style={{ backgroundColor: accentColor, opacity: opacity * 1.5 }}
/>
</div>
);
case 'aurora':
return (
<div className="absolute inset-0 pointer-events-none overflow-hidden">
<motion.div
animate={{ rotate: [0, 360] }}
transition={{ duration: 50, repeat: Infinity, ease: "linear" }}
className="absolute inset-[-50%] blur-[100px] opacity-30"
style={{
background: `conic-gradient(from 0deg at 50% 50%, ${accentColor}00 0deg, ${accentColor}80 120deg, ${accentColor}00 240deg)`
}}
/>
</div>
);
case 'waves':
return (
<div className="absolute inset-x-0 bottom-0 pointer-events-none overflow-hidden h-[40vh] opacity-20">
<svg viewBox="0 0 1440 320" preserveAspectRatio="none" className="absolute bottom-0 w-full h-full">
<path fill={accentColor} fillOpacity="1" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
</div>
);
case 'topography':
// Using a simplified SVG pattern for topography
return (
<div className="absolute inset-0 pointer-events-none" style={{
backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E")`,
opacity: opacity * 1.5,
filter: `opacity(0.8) drop-shadow(0 0 0 ${accentColor})`
}} />
);
case 'particles':
return (
<div className="absolute inset-0 pointer-events-none overflow-hidden">
{[...Array(20)].map((_, i) => (
<motion.div
key={i}
className="absolute rounded-full"
style={{
backgroundColor: accentColor,
width: Math.random() * 4 + 2,
height: Math.random() * 4 + 2,
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
opacity: opacity * 3
}}
animate={{
y: [0, Math.random() * -100 - 50],
x: [0, (Math.random() - 0.5) * 50],
opacity: [0, opacity * 3, 0]
}}
transition={{
duration: Math.random() * 10 + 10,
repeat: Infinity,
delay: Math.random() * 5
}}
/>
))}
</div>
);
case 'circuit':
case 'boxes':
case 'honeycomb':
// Using fallback CSS patterns for these specific complex geometric requests
const size = pattern === 'honeycomb' ? '60px 104px' : '40px 40px';
const bgImage = pattern === 'honeycomb'
? `radial-gradient(circle at 50% 50%, transparent 50%, ${accentColor} 55%)`
: `linear-gradient(45deg, ${accentColor} 25%, transparent 25%, transparent 75%, ${accentColor} 75%, ${accentColor}), linear-gradient(45deg, ${accentColor} 25%, transparent 25%, transparent 75%, ${accentColor} 75%, ${accentColor})`;
return (
<div className="absolute inset-0 pointer-events-none" style={{
backgroundImage: bgImage,
backgroundSize: size,
backgroundPosition: pattern === 'boxes' ? '0 0, 20px 20px' : '0 0',
opacity: opacity * 0.5
}} />
);
default:
return null;
}
};
return (
<div className="fixed inset-0 pointer-events-none z-0 mix-blend-screen overflow-hidden">
{getPattern()}
</div>
);
};
|