더블 다이아몬드

<div class="stage">
  <svg viewBox="0 0 400 140" class="dia">
    <path d="M20 70 L110 15 L200 70 L110 125 Z" class="d1" />
    <path d="M200 70 L290 15 L380 70 L290 125 Z" class="d2" />
  </svg>
  <div class="dots" id="dots"></div>
  <div class="labels">
    <span>Discover</span><span>Define</span><span>Develop</span><span>Deliver</span>
  </div>
  <div class="cur" id="cur"></div>
</div>

.stage{width:96%;height:86%;position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px}
.dia{width:100%;height:60%}
.d1,.d2{fill:none;stroke:var(--line);stroke-width:1.5}
.labels{display:flex;justify-content:space-between;font:700 10px/1 monospace;color:var(--muted);padding:0 2%}
.dots{position:absolute;inset:0}
.pt{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent);top:50%;transition:left .5s ease,top .5s ease}

const dots = document.getElementById('dots');
const W = 400, H = 140;
function pct(x, y) { return { left: (x / W * 100) + '%', top: (y / H * 100) + '%' }; }
const n = 7;
const pts = [];
for (let i = 0; i < n; i++) {
  const d = document.createElement('div');
  d.className = 'pt';
  dots.appendChild(d);
  pts.push(d);
}
function place(cx, spread) {
  for (let i = 0; i < n; i++) {
    const t = (i / (n - 1) - 0.5) * 2;
    const p = pct(cx, 70 + t * spread);
    pts[i].style.left = p.left;
    pts[i].style.top = p.top;
  }
}
const frames = [
  function () { place(60, 6); },
  function () { place(105, 50); },
  function () { place(150, 6); },
  function () { place(245, 6); },
  function () { place(290, 50); },
  function () { place(335, 6); },
];
let i = 0;
function step() { frames[i % frames.length](); i++; }
step();
setInterval(step, 900);