계열 위치 효과

const svg = 'http://www.w3.org/2000/svg';
const root = document.body;
const wrap = document.createElement('div');
wrap.style.cssText = 'width:88%;display:grid;gap:10px;justify-items:center';
root.appendChild(wrap);
const svgEl = document.createElementNS(svg, 'svg');
svgEl.setAttribute('viewBox', '0 0 100 34');
svgEl.style.cssText = 'width:100%;height:70px';
const path = document.createElementNS(svg, 'path');
path.setAttribute('d', 'M4,6 C 22,26 40,30 50,30 C 60,30 78,26 96,6');
path.setAttribute('fill', 'none');
path.setAttribute('stroke', 'var(--accent)');
path.setAttribute('stroke-width', '2.5');
path.setAttribute('stroke-linecap', 'round');
const len = 140;
path.style.strokeDasharray = len;
path.style.strokeDashoffset = len;
path.style.animation = 'draw 2.4s ease-in-out infinite';
svgEl.appendChild(path);
wrap.appendChild(svgEl);
const list = document.createElement('div');
list.style.cssText = 'display:flex;gap:6%;width:100%';
wrap.appendChild(list);
const items = [];
for (let i = 0; i < 7; i++) {
  const it = document.createElement('div');
  it.style.cssText = 'flex:1;height:26px;border-radius:6px;background:var(--line);transition:opacity 1s ease,background 1s ease';
  list.appendChild(it);
  items.push(it);
}
function apply() {
  items.forEach((it, i) => {
    const strong = i === 0 || i === items.length - 1;
    it.style.opacity = strong ? '1' : String(0.35 + 0.1 * Math.abs(i - 3) / 3);
    it.style.background = strong ? 'var(--accent)' : 'var(--line)';
  });
}
apply();
const style = document.createElement('style');
style.textContent = '@keyframes draw{0%{stroke-dashoffset:140}60%,100%{stroke-dashoffset:0}}';
document.head.appendChild(style);