러버 호스 리깅

<svg class="rig" viewBox="0 0 200 140">
  <circle class="shoulder" cx="60" cy="40" r="10"/>
  <path id="arm" class="arm" d=""/>
  <circle class="hand" id="hand" r="9"/>
</svg>

.rig{width:min(78%,300px);aspect-ratio:200/140}
.shoulder{fill:var(--accent)}
.arm{fill:none;stroke:var(--accent);stroke-width:12;stroke-linecap:round}
.hand{fill:var(--accent-2)}

const arm = document.getElementById('arm');
const hand = document.getElementById('hand');
const shoulder = { x: 60, y: 40 };
const start = performance.now();
function loop(now) {
  const t = (now - start) / 1000;
  const hx = 150 + Math.sin(t * 1.4) * 22;
  const hy = 95 + Math.cos(t * 1.9) * 18;
  const mx = (shoulder.x + hx) / 2 + Math.sin(t * 1.4 + 1) * 26;
  const my = (shoulder.y + hy) / 2 - 14;
  arm.setAttribute('d', 'M' + shoulder.x + ',' + shoulder.y + ' Q' + mx + ',' + my + ' ' + hx + ',' + hy);
  hand.setAttribute('cx', hx);
  hand.setAttribute('cy', hy);
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);