110 lines
2.6 KiB
TypeScript
110 lines
2.6 KiB
TypeScript
interface BCRGLogoProps {
|
|
className?: string
|
|
size?: number
|
|
}
|
|
|
|
export function BCRGLogo({ className = "", size = 32 }: BCRGLogoProps) {
|
|
const generateSineWave = () => {
|
|
const points = []
|
|
const amplitude = 20
|
|
const frequency = 0.08
|
|
const centerY = 50
|
|
|
|
for (let x = 0; x <= 100; x += 2) {
|
|
const y = centerY + amplitude * Math.sin(x * frequency)
|
|
points.push(`${x},${y}`)
|
|
}
|
|
return points.join(" ")
|
|
}
|
|
|
|
const generateCosineWave = () => {
|
|
const points = []
|
|
const amplitude = 20
|
|
const frequency = 0.08
|
|
const centerY = 50
|
|
|
|
for (let x = 0; x <= 100; x += 2) {
|
|
const y = centerY + amplitude * Math.cos(x * frequency)
|
|
points.push(`${x},${y}`)
|
|
}
|
|
return points.join(" ")
|
|
}
|
|
|
|
const generateSecondSineWave = () => {
|
|
const points = []
|
|
const amplitude = 15
|
|
const frequency = 0.12
|
|
const centerY = 50
|
|
const phase = Math.PI / 4
|
|
|
|
for (let x = 0; x <= 100; x += 2) {
|
|
const y = centerY + amplitude * Math.sin(x * frequency + phase)
|
|
points.push(`${x},${y}`)
|
|
}
|
|
return points.join(" ")
|
|
}
|
|
|
|
return (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 100 100"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={className}
|
|
>
|
|
{/* Background square with rounded corners */}
|
|
<rect width="100" height="100" rx="8" fill="currentColor" fillOpacity="0.05" />
|
|
|
|
{/* Sine wave */}
|
|
<polyline
|
|
points={generateSineWave()}
|
|
stroke="var(--neon-cyan)"
|
|
strokeWidth="2.5"
|
|
fill="none"
|
|
opacity="0.9"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="drop-shadow-[0_0_8px_rgba(0,255,255,0.5)]"
|
|
/>
|
|
|
|
{/* Cosine wave - overlapping with sine */}
|
|
<polyline
|
|
points={generateCosineWave()}
|
|
stroke="var(--neon-cyan)"
|
|
strokeWidth="2.5"
|
|
fill="none"
|
|
opacity="0.7"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="drop-shadow-[0_0_8px_rgba(0,255,255,0.4)]"
|
|
/>
|
|
|
|
{/* Third wave with phase shift for more complexity */}
|
|
<polyline
|
|
points={generateSecondSineWave()}
|
|
stroke="var(--neon-cyan)"
|
|
strokeWidth="2"
|
|
fill="none"
|
|
opacity="0.6"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="drop-shadow-[0_0_6px_rgba(0,255,255,0.3)]"
|
|
/>
|
|
|
|
{/* Outer glow border */}
|
|
<rect
|
|
width="98"
|
|
height="98"
|
|
x="1"
|
|
y="1"
|
|
rx="8"
|
|
stroke="var(--neon-cyan)"
|
|
strokeWidth="1"
|
|
fill="none"
|
|
opacity="0.3"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|