CSS32 · קרן אור שזורמת בין שני אלמנטים

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}

/* CSS32 · קרן אור שזורמת בין שני אלמנטים */
.bm{position:relative;max-width:760px;margin-inline:auto;aspect-ratio:760/300}
.bm svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bm-line{fill:none;stroke:var(--line, #e4e4ee);stroke-width:2}
.bm-pulse{fill:none;stroke:var(--accent, #4a3aff);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:60 900;stroke-dashoffset:960;animation:bm-flow 2.6s cubic-bezier(.2,.6,.2,1) infinite}
.bm-pulse.d2{animation-delay:.9s}.bm-pulse.d3{animation-delay:1.7s}
@keyframes bm-flow{to{stroke-dashoffset:0}}
.bm-node{position:absolute;width:84px;height:84px;border-radius:20px;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);box-shadow:0 10px 30px rgba(0,0,0,.08);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--ink, #16182b);transform:translate(-50%,-50%)}
.bm-node.hub{width:104px;height:104px;background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);font-size:16px}
@media (prefers-reduced-motion: reduce){.bm-pulse{animation:none;stroke-dasharray:none;opacity:.5}}

HTML

<div class="stage tight"><div class="bm">
  <svg viewBox="0 0 760 300" aria-hidden="true">
    <path class="bm-line" d="M120 60 C 300 60, 300 150, 380 150"/><path class="bm-pulse" d="M120 60 C 300 60, 300 150, 380 150"/>
    <path class="bm-line" d="M120 150 L 380 150"/><path class="bm-pulse d2" d="M120 150 L 380 150"/>
    <path class="bm-line" d="M120 240 C 300 240, 300 150, 380 150"/><path class="bm-pulse d3" d="M120 240 C 300 240, 300 150, 380 150"/>
    <path class="bm-line" d="M380 150 L 640 150"/><path class="bm-pulse d2" d="M380 150 L 640 150"/>
  </svg>
  <div class="bm-node" style="left:15.8%;top:20%">טופס</div>
  <div class="bm-node" style="left:15.8%;top:50%">וואטסאפ</div>
  <div class="bm-node" style="left:15.8%;top:80%">טלפון</div>
  <div class="bm-node hub" style="left:50%;top:50%">CRM</div>
  <div class="bm-node" style="left:84.2%;top:50%">נציג</div>
</div></div>