One approch to fix this is to use one more dashed line with same background as of page background.
Please refer to following code (its same as of you just some changes):
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import gsap from "gsap";
interface BoxItem {
label: string;
color: string;
}
interface Line {
x1: number;
y1: number;
x2: number;
y2: number;
}
const boxData: BoxItem[] = [
{ label: "Event", color: "#ff6b6b" },
{ label: "Date", color: "#4dabf7" },
{ label: "Fuel", color: "#f06595" },
{ label: "Message", color: "#51cf66" },
{ label: "Work", color: "#d0bfff" },
{ label: "Data", color: "#74c0fc" },
{ label: "Food", color: "#ffd43b" },
{ label: "Style", color: "#ced4da" },
];
export default function Home() {
const containerRef = useRef<HTMLDivElement | null>(null);
const centerBoxRef = useRef<HTMLDivElement | null>(null);
const boxRefs = useRef<(HTMLDivElement | null)[]>([]);
const [lines, setLines] = useState<Line[]>([]);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
const [activeLines, setActiveLines] = useState<Record<number, boolean>>({});
const timeoutRefs = useRef<any>({});
const animatingLines = useRef<Set<number>>(new Set());
// Track container size
useEffect(() => {
const updateDimensions = () => {
if (containerRef.current) {
setDimensions({
width: containerRef.current.offsetWidth,
height: containerRef.current.offsetHeight,
});
}
};
updateDimensions();
window.addEventListener("resize", updateDimensions);
return () => window.removeEventListener("resize", updateDimensions);
}, []);
// Calculate line positions
useLayoutEffect(() => {
const updateLines = () => {
if (!centerBoxRef.current || !containerRef.current) return;
const containerRect = containerRef.current.getBoundingClientRect();
const centerRect = centerBoxRef.current.getBoundingClientRect();
const centerX = centerRect.left - containerRect.left + centerRect.width / 2;
const centerY = centerRect.top - containerRect.top + centerRect.height / 2;
const newLines: Line[] = boxRefs.current.map((box) => {
if (!box) return { x1: 0, y1: 0, x2: 0, y2: 0 };
const boxRect = box.getBoundingClientRect();
const x2 = boxRect.left - containerRect.left + boxRect.width / 2;
const y2 = boxRect.top - containerRect.top + boxRect.height / 2;
return { x1: centerX, y1: centerY, x2, y2 };
});
setLines(newLines);
};
updateLines();
const observer = new ResizeObserver(updateLines);
if (containerRef.current) observer.observe(containerRef.current);
return () => observer.disconnect();
}, [dimensions]);
const calculateCurvePath = (line: Line) => {
const cpX = (line.x1 + line.x2) / 2 + (line.y2 - line.y1) * -0.21;
const cpY = (line.y1 + line.y2) / 2 - (line.x2 - line.x1) * -0.21;
return {
path: `M${line.x1},${line.y1} Q${cpX},${cpY} ${line.x2},${line.y2}`,
};
};
const animateLine = (index: number, color: string) => {
const path = document.getElementById(`animated-line-${index}`) as SVGPathElement | null;
if (!path || animatingLines.current.has(index)) return;
animatingLines.current.add(index);
const length = path.getTotalLength();
// ✅ Key fix: make one full-length dash to reveal progressively
path.style.strokeDasharray = `${length}`;
path.style.strokeDashoffset = `${length}`;
path.style.stroke = color;
path.style.opacity = "1";
gsap.to(path, {
strokeDashoffset: 0,
duration: 0.8,
ease: "power1.inOut",
onComplete: () => {
setActiveLines((prev) => ({ ...prev, [index]: true }));
timeoutRefs.current[index] = setTimeout(() => reverseLine(index), 2000);
},
});
};
const reverseLine = (index: number) => {
const path = document.getElementById(`animated-line-${index}`) as SVGPathElement | null;
if (!path) return;
const length = path.getTotalLength();
gsap.to(path, {
strokeDashoffset: length,
duration: 0.6,
ease: "power2.inOut",
onComplete: () => {
path.style.opacity = "0";
animatingLines.current.delete(index);
setActiveLines((prev) => ({ ...prev, [index]: false }));
},
});
};
const handleBoxClick = (index: number, color: string) => {
if (animatingLines.current.has(index)) return;
if (timeoutRefs.current[index]) {
clearTimeout(timeoutRefs.current[index]);
}
if (!activeLines[index]) {
animateLine(index, color);
}
};
const handleCenterClick = () => {
boxData.forEach((box, i) => {
if (!activeLines[i] && !animatingLines.current.has(i)) {
animateLine(i, box.color);
}
});
};
return (
<div
ref={containerRef}
className="relative w-full h-screen bg-gradient-to-br from-pink-100 to-blue-100 overflow-hidden"
>
<svg className="absolute top-0 left-0 w-full h-full pointer-events-none">
<defs>
<linearGradient id="line-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#cccccc" />
<stop offset="100%" stopColor="#cccccc" stopOpacity="0.8" />
</linearGradient>
{/* New: background-matching gradient */}
<linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#ffe3ec" /> {/* matches from-pink-100 */}
<stop offset="100%" stopColor="#d0ebff" /> {/* matches to-blue-100 */}
</linearGradient>
</defs>
{lines.map((line, i) => {
const { path } = calculateCurvePath(line);
return (
<g key={i}>
{/* Static gray dashed line */}
<path
id={`dashed-line-${i}`}
d={path}
stroke="url(#line-gradient)"
strokeWidth="2"
strokeDasharray="8, 4"
fill="none"
/>
{/* Animated colored dashed overlay */}
<path
id={`animated-line-${i}`}
d={path}
stroke="transparent"
strokeWidth="2"
strokeDasharray="8, 4"
fill="none"
style={{ opacity: 0 }}
/>
{/* static white or background gap line */}
<path
id={`dashed-line-${i}`}
d={path}
stroke="url(#bg-gradient)"
strokeWidth="2"
strokeDasharray="8, 8"
fill="none"
/>
{/* Endpoint circle */}
<circle cx={line.x2} cy={line.y2} r="6" fill={boxData[i].color} />
</g>
);
})}
</svg>
{/* Center Circle */}
<div
ref={centerBoxRef}
onClick={(e) => {
e.stopPropagation();
handleCenterClick();
}}
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 md:w-24 md:h-24 bg-white rounded-full shadow-lg grid place-items-center font-bold text-lg md:text-xl cursor-pointer z-10"
>
Any
</div>
{/* Outer Boxes */}
{boxData.map((box, i) => {
const angle = (360 / boxData.length) * i;
const radius = Math.min(dimensions.width, dimensions.height) * 0.35;
const rad = (angle * Math.PI) / 180;
const centerX = dimensions.width / 2;
const centerY = dimensions.height / 2;
const x = centerX + radius * Math.cos(rad);
const y = centerY + radius * Math.sin(rad);
return (
<div
key={i}
ref={(el) => (boxRefs.current[i] = el)}
onClick={(e) => {
e.stopPropagation();
handleBoxClick(i, box.color);
}}
className="absolute w-14 h-14 md:w-20 md:h-20 rounded-full shadow grid place-items-center text-xs md:text-sm font-bold cursor-pointer text-white"
style={{
backgroundColor: box.color,
left: `${x}px`,
top: `${y}px`,
transform: "translate(-50%, -50%)",
}}
>
{box.label}
</div>
);
})}
</div>
);
}
