Design Atlas
한국어
↝ Motion

Elastic string

일래스틱 스트링

A string anchored at both ends that, once plucked, vibrates like a guitar string and settles as the oscillation decays — unlike a spring chain, the whole line moves as one wave, not as separate trailing nodes.

Also known as: Rubber band stringPlucked stringVibrating line
···
html
<svg class="strsvg" viewBox="0 0 200 60">
  <line class="anchor" x1="10" y1="30" x2="10" y2="30"/>
  <path id="str" class="str" fill="none"/>
  <circle class="pin" cx="10" cy="30" r="3"/>
  <circle class="pin" cx="190" cy="30" r="3"/>
</svg>
css
.strsvg{width:86%;height:60%}
.str{stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
.pin{fill:var(--muted)}
js
const path = document.getElementById('str');
const DECAY = 2.4, FREQ = 9;
let pluckAt = performance.now();
let amp = 26;
function loop(now) {
  const t = (now - pluckAt) / 1000;
  if (t > 1.6) {
    pluckAt = now;
    amp = 20 + Math.random() * 14;
  }
  const d = amp * Math.exp(-DECAY * t) * Math.sin(FREQ * t);
  const my = 30 + d;
  path.setAttribute('d', 'M10,30 Q100,' + my.toFixed(2) + ' 190,30');
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

The string's midpoint displacement is a single damped sine wave: displacement(t) = amplitude × e^(−decay × t) × sin(frequency × t). As time passes, the e^(−decay × t) term shrinks toward zero, so the amplitude decays and the string eventually settles back to a straight line. Feed that displacement as the control point of a quadratic Bézier curve running through the string's center — offset perpendicular to the string — and the whole line reads as one smoothly bowed curve.

A real guitar string mixes in harmonics for a more complex waveform, but for UI purposes a single decaying sine is plenty to sell "plucked, then settling." Randomizing the pluck strength (amplitude) slightly each time keeps repeats from looking identical.

Paired with an actual drag-and-release interaction — where how far you pulled sets the amplitude — this is the physical justification behind rubber-band-style UI (pull to refresh, swipe resistance). There, it's not a literal string but the element's own edge that bows, so you drive a clip-path or an SVG path's control point with the same formula instead.

When to use

Use it to give a pull-and-release gesture physical grounding — pull to refresh, the ends of a drag slider. As pure decoration it can feel like too much detail, so pair it with an actual interaction.