Line animation

Here's a breakdown of the animation.

Each connector is an SVG path. A static, dimmed path sits underneath a brighter animated one.
Set pathLength={1} on the animated path so dash math stays simple regardless of actual path length.
Use strokeDasharray to draw a short visible segment and a long gap, then animate strokeDashoffset to move that segment along the path.

The core of the effect is this pattern:

const SEGMENT = 0.1;
const GAP = 1 - SEGMENT;
 
<motion.path
  d={d}
  pathLength={1}
  strokeDasharray={`${SEGMENT} ${GAP}`}
  initial={{ strokeDashoffset: 0 }}
  animate={{ strokeDashoffset: -(SEGMENT + GAP) }}
  transition={{
    duration: 2.5,
    ease: "linear",
    repeat: Infinity,
    repeatType: "loop",
    repeatDelay: 0.5,
  }}
/>

Line Animation