스프링 체인

<svg class="chainsvg" viewBox="0 0 200 100">
  <polyline id="line" class="line" fill="none"/>
  <g id="nodes"></g>
</svg>

.chainsvg{width:88%;height:78%}
.line{stroke:var(--line);stroke-width:2}
circle.node{fill:var(--accent)}

const N = 9;
const nodes = Array.from({ length: N }, () => ({ x: 100, y: 50, vx: 0, vy: 0 }));
const line = document.getElementById('line');
const group = document.getElementById('nodes');
const dots = nodes.map((_, i) => {
  const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  c.setAttribute('r', String(6 - i * 0.35));
  c.setAttribute('class', 'node');
  c.style.opacity = String(1 - i * 0.06);
  group.appendChild(c);
  return c;
});

const start = performance.now();
function leaderPos(t) {
  const a = t * 0.0032;
  return { x: 100 + Math.sin(a) * 76, y: 50 + Math.sin(a * 2.3) * 30 };
}

function loop(now) {
  const lp = leaderPos(now - start);
  let target = lp;
  nodes.forEach((n, i) => {
    const k = 0.09, damp = 0.86;
    n.vx = (n.vx + (target.x - n.x) * k) * damp;
    n.vy = (n.vy + (target.y - n.y) * k) * damp;
    n.x += n.vx;
    n.y += n.vy;
    dots[i].setAttribute('cx', n.x.toFixed(1));
    dots[i].setAttribute('cy', n.y.toFixed(1));
    target = n;
  });
  line.setAttribute('points', [lp, ...nodes].map((n) => n.x.toFixed(1) + ',' + n.y.toFixed(1)).join(' '));
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);