사용자 여정 지도

<div class="stage">
  <div class="stages">
    <span>Awareness</span><span>Consider</span><span>Purchase</span><span>Onboard</span><span>Advocate</span>
  </div>
  <svg viewBox="0 0 500 140" preserveAspectRatio="none" class="chart">
    <line x1="0" y1="70" x2="500" y2="70" class="axis" />
    <path id="curve" d="" class="curve" />
    <circle id="dot" r="5" class="dot" />
  </svg>
  <div class="face" id="face">:)</div>
</div>

.stage{width:94%;height:88%;display:flex;flex-direction:column}
.stages{display:flex;justify-content:space-between;font:700 10px/1 monospace;color:var(--muted);padding:0 2%}
.chart{flex:1;width:100%}
.axis{stroke:var(--line);stroke-width:1}
.curve{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.dot{fill:var(--accent-2)}
.stage{position:relative}
.face{position:absolute;left:2%;bottom:2%;font:700 18px/1 monospace;color:var(--accent-2)}

const pts = [[10, 60], [130, 30], [250, 100], [370, 45], [490, 15]];
function toPath(points) {
  return points.map((p, i) => (i === 0 ? 'M' : 'L') + p[0] + ' ' + p[1]).join(' ');
}
const curve = document.getElementById('curve');
const dot = document.getElementById('dot');
const face = document.getElementById('face');
const faces = [':)', ':|', ':(', ':|', ':D'];
curve.setAttribute('d', toPath(pts));
let i = 0;
function step() {
  const p = pts[i % pts.length];
  dot.setAttribute('cx', p[0]);
  dot.setAttribute('cy', p[1]);
  face.textContent = faces[i % faces.length];
  i++;
}
step();
setInterval(step, 900);