105 lines
3.6 KiB
TypeScript
105 lines
3.6 KiB
TypeScript
export default function GearPattern({ opacity = 0.06 }: { opacity?: number }) {
|
|
return (
|
|
<div
|
|
className="absolute inset-0 overflow-hidden pointer-events-none"
|
|
aria-hidden="true"
|
|
>
|
|
<svg
|
|
className="absolute inset-0 w-full h-full"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<defs>
|
|
{/* Single gear shape as a pattern tile */}
|
|
<symbol id="gear" viewBox="0 0 60 60">
|
|
<g transform="translate(30,30)">
|
|
{/* Outer teeth */}
|
|
{[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((angle) => (
|
|
<rect
|
|
key={angle}
|
|
x="-3.5"
|
|
y="-26"
|
|
width="7"
|
|
height="7"
|
|
rx="1"
|
|
fill="#f97316"
|
|
transform={`rotate(${angle})`}
|
|
/>
|
|
))}
|
|
{/* Outer ring */}
|
|
<circle cx="0" cy="0" r="18" fill="none" stroke="#f97316" strokeWidth="4" />
|
|
{/* Inner spokes */}
|
|
{[0, 60, 120, 180, 240, 300].map((angle) => (
|
|
<line
|
|
key={angle}
|
|
x1="0"
|
|
y1="0"
|
|
x2="0"
|
|
y2="-14"
|
|
stroke="#f97316"
|
|
strokeWidth="2.5"
|
|
transform={`rotate(${angle})`}
|
|
/>
|
|
))}
|
|
{/* Center hole */}
|
|
<circle cx="0" cy="0" r="5" fill="none" stroke="#f97316" strokeWidth="3" />
|
|
</g>
|
|
</symbol>
|
|
|
|
{/* Small gear */}
|
|
<symbol id="gear-sm" viewBox="0 0 34 34">
|
|
<g transform="translate(17,17)">
|
|
{[0, 45, 90, 135, 180, 225, 270, 315].map((angle) => (
|
|
<rect
|
|
key={angle}
|
|
x="-2.5"
|
|
y="-14.5"
|
|
width="5"
|
|
height="5"
|
|
rx="0.8"
|
|
fill="#f97316"
|
|
transform={`rotate(${angle})`}
|
|
/>
|
|
))}
|
|
<circle cx="0" cy="0" r="9" fill="none" stroke="#f97316" strokeWidth="3" />
|
|
{[0, 90, 180, 270].map((angle) => (
|
|
<line
|
|
key={angle}
|
|
x1="0"
|
|
y1="0"
|
|
x2="0"
|
|
y2="-7"
|
|
stroke="#f97316"
|
|
strokeWidth="2"
|
|
transform={`rotate(${angle})`}
|
|
/>
|
|
))}
|
|
<circle cx="0" cy="0" r="3" fill="none" stroke="#f97316" strokeWidth="2" />
|
|
</g>
|
|
</symbol>
|
|
|
|
{/* Repeating pattern */}
|
|
<pattern id="gearPattern" x="0" y="0" width="160" height="160" patternUnits="userSpaceOnUse">
|
|
{/* Large gear top-left */}
|
|
<use href="#gear" x="10" y="10" width="60" height="60" />
|
|
{/* Small gear top-right, meshing */}
|
|
<use href="#gear-sm" x="68" y="22" width="34" height="34" />
|
|
{/* Large gear bottom-right */}
|
|
<use href="#gear" x="90" y="90" width="60" height="60" />
|
|
{/* Small gear bottom-left */}
|
|
<use href="#gear-sm" x="18" y="104" width="34" height="34" />
|
|
{/* Tiny center connector dots */}
|
|
<circle cx="80" cy="56" r="2" fill="#f97316" />
|
|
<circle cx="56" cy="80" r="2" fill="#f97316" />
|
|
</pattern>
|
|
</defs>
|
|
<rect
|
|
width="100%"
|
|
height="100%"
|
|
fill="url(#gearPattern)"
|
|
opacity={opacity}
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|