디자인 아틀라스SVG path로 두 노드 사이 곡선을 그리고, 그 위에 같은 경로를 따라가는 stroke만 다른 두 번째 path를 겹칩니다. 두 번째 path의 stroke-dasharray를 "짧은 선 + 짧은 여백"을 일정 간격으로 반복하도록 설정하고 stroke-dashoffset을 계속 움직이면, 짧은 선 여러 개가 줄지어 경로를 따라 흘러가는 것처럼 보입니다.
경로 자체는 정적이고 옅은 색으로 항상 보이게 두고, 그 위를 지나가는 짧은 선(빔)만 밝은 accent 색과 약간의 blur로 강조합니다. 노드가 여러 개면 각 연결선마다 dashoffset 애니메이션의 시작 지연을 다르게 줘서 모든 빔이 동시에 출발하지 않게 합니다.
연동(Integration) 다이어그램, 아키텍처 소개 섹션에서 "이 서비스들이 실시간으로 연결돼 있다"는 걸 정적인 선보다 훨씬 직관적으로 전달합니다.
언제 쓰나
제품 연동 소개, 아키텍처 다이어그램, "여러 도구가 하나로 모인다"는 랜딩 섹션에 씁니다. 빔이 너무 많으면 오히려 어디를 봐야 할지 헷갈리니 핵심 연결선 2~3개에만 쓰세요.