Dot Pattern Background

1import { cn } from "@/lib/utils";
2 
3type MaskPosition = "top" | "bottom" | "center" | "none";
4 
5type Background02Props = {
6  className?: string;
7  dotColor?: string;
8  dotSize?: number;
9  spacingX?: number;
10  spacingY?: 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 Background02 = ({
29  className,
30  dotColor = "var(--border)",
31  dotSize = 1,
32  spacingX = 16,
33  spacingY = 16,
34  mask = "none",
35}: Background02Props) => {
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: `radial-gradient(${dotColor} ${dotSize}px, transparent ${dotSize}px)`,
44          backgroundSize: `${spacingX}px ${spacingY}px`,
45          ...(mask !== "none" && {
46            maskImage: maskStyle,
47            WebkitMaskImage: maskStyle,
48          }),
49        }}
50      />
51    </div>
52  );
53};
54 
55export default Background02;