Diagonal Stripes Background

1import { cn } from "@/lib/utils";
2 
3type MaskPosition = "top" | "bottom" | "center" | "none";
4 
5type Background03Props = {
6  className?: string;
7  lineColor?: string;
8  lineWidth?: number;
9  spacing?: number;
10  angle?: number;
11  mask?: MaskPosition;
12};
13 
14const getMaskStyle = (mask: MaskPosition): string => {
15  switch (mask) {
16    case "top":
17      return "radial-gradient(ellipse 60% 50% at 50% 0%, transparent 40%, #000 110%)";
18    case "bottom":
19      return "radial-gradient(ellipse 60% 50% at 50% 100%, transparent 40%, #000 110%)";
20    case "center":
21      return "radial-gradient(ellipse 50% 50% at 50% 50%, transparent 20%, #000 70%)";
22    case "none":
23    default:
24      return "none";
25  }
26};
27 
28const Background03 = ({
29  className,
30  lineColor = "var(--border)",
31  lineWidth = 1,
32  spacing = 24,
33  angle = 135,
34  mask = "none",
35}: Background03Props) => {
36  const maskStyle = getMaskStyle(mask);
37 
38  return (
39    <div className={cn("absolute inset-0 z-0 h-full w-full", className)}>
40      <div
41        className="absolute inset-0 h-full w-full pointer-events-none"
42        style={{
43          backgroundImage: `repeating-linear-gradient(${angle}deg, ${lineColor} 0px ${lineWidth}px, transparent ${lineWidth}px ${spacing}px)`,
44          ...(mask !== "none" && {
45            maskImage: maskStyle,
46            WebkitMaskImage: maskStyle,
47          }),
48        }}
49      />
50    </div>
51  );
52};
53 
54export default Background03;