<div class="wrap">
  <div class="stage">
    <svg viewBox="0 0 64 64" width="72" height="72">
      <path id="morphPath" fill="none" stroke="#6366f1" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" d=""></path>
    </svg>
  </div>

  <div class="picker" id="picker">
    <button class="opt active" data-shape="heart">Heart</button>
    <button class="opt" data-shape="star">Star</button>
    <button class="opt" data-shape="circle">Circle</button>
    <button class="opt" data-shape="square">Square</button>
  </div>
</div>

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 40px 20px; }

.wrap { width: 100%; max-width: 320px; text-align: center; }

.stage {
  display: flex; align-items: center; justify-content: center;
  height: 160px; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; margin-bottom: 18px;
}

.picker { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.opt {
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid #e2e8f0;
  background: #fff; color: #64748b; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.opt:hover { border-color: #cbd5e1; }
.opt.active { background: #6366f1; border-color: #6366f1; color: #fff; }

/* A tiny, dependency-free SVG morph "engine": every shape below is a
   closed 12-point outline in a shared 0-64 viewBox. Because every shape
   has the same vertex count and roughly the same winding order, any shape
   can morph directly into any other shape using nothing but linear
   interpolation of matched coordinate pairs. */
const SHAPES = {
  heart: [
    [32, 18], [26, 8], [14, 8], [8, 18], [8, 28], [20, 44],
    [32, 56], [44, 44], [56, 28], [56, 18], [50, 8], [38, 8],
  ],
  star: [
    [32, 4], [38, 24], [59, 24], [42, 37], [48, 58], [32, 46],
    [16, 58], [22, 37], [5, 24], [26, 24], [32, 4], [32, 4],
  ],
  circle: [
    [32, 4], [48, 9], [58, 24], [58, 40], [48, 55], [32, 60],
    [16, 55], [6, 40], [6, 24], [16, 9], [32, 4], [32, 4],
  ],
  square: [
    [10, 10], [32, 10], [54, 10], [54, 32], [54, 54], [32, 54],
    [10, 54], [10, 32], [10, 10], [10, 10], [10, 10], [10, 10],
  ],
};

function pointsToPath(pts) {
  return pts.map((p, i) => (i === 0 ? 'M' : 'L') + p[0].toFixed(2) + ',' + p[1].toFixed(2)).join(' ') + ' Z';
}
function lerpPoints(a, b, t) {
  return a.map((p, i) => [p[0] + (b[i][0] - p[0]) * t, p[1] + (b[i][1] - p[1]) * t]);
}

const pathEl = document.getElementById('morphPath');
let currentPts = SHAPES.heart;
pathEl.setAttribute('d', pointsToPath(currentPts));

let rafId = null;
function morphTo(name) {
  const targetPts = SHAPES[name];
  if (!targetPts || rafId) return;
  const fromPts = currentPts;
  const start = performance.now();
  const duration = 500;

  function frame(now) {
    const t = Math.min(1, (now - start) / duration);
    const eased = t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; // easeInOutCubic
    pathEl.setAttribute('d', pointsToPath(lerpPoints(fromPts, targetPts, eased)));
    if (t < 1) {
      rafId = requestAnimationFrame(frame);
    } else {
      currentPts = targetPts;
      rafId = null;
    }
  }
  rafId = requestAnimationFrame(frame);
}

document.querySelectorAll('.opt').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.opt').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    morphTo(btn.dataset.shape);
  });
});