<div class="gm-wrap">
  <svg class="gm-goo" aria-hidden="true"><defs><filter id="gmGoo"><feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"/><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" result="goo"/><feBlend in="SourceGraphic" in2="goo"/></filter></defs></svg>

  <nav class="gm-menu" id="gmMenu">
    <button type="button" class="gm-item gm-toggle" id="gmToggle" aria-label="Open actions" aria-expanded="false">+</button>
    <button type="button" class="gm-item" style="--i:1" aria-label="Edit">✎</button>
    <button type="button" class="gm-item" style="--i:2" aria-label="Share">↗</button>
    <button type="button" class="gm-item" style="--i:3" aria-label="Star">★</button>
    <button type="button" class="gm-item" style="--i:4" aria-label="Delete">🗑</button>
  </nav>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;min-height:100vh;display:flex;align-items:center;justify-content:center}

.gm-wrap{position:relative}
.gm-goo{position:absolute;width:0;height:0}

/* The filter on the container melds overlapping circles into a gooey blob. */
.gm-menu{position:relative;width:62px;height:62px;filter:url(#gmGoo)}
.gm-item{position:absolute;left:0;top:0;width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;
  background:#6366f1;color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;
  transition:transform .4s cubic-bezier(.68,-0.55,.27,1.55);will-change:transform}
.gm-toggle{z-index:2;background:#4f46e5;transition:transform .3s}
.gm-menu.gm-open .gm-toggle{transform:rotate(135deg)}

/* Children stack on the toggle when closed, then fan upward when open. */
.gm-item:not(.gm-toggle){transform:translateY(0) scale(.5);opacity:.01}
.gm-menu.gm-open .gm-item:not(.gm-toggle){
  opacity:1;transform:translateY(calc(var(--i) * -72px)) scale(1);
  transition-delay:calc(var(--i) * .04s)}

/* Icons need to sit ABOVE the goo blur, so lift them with a pseudo-less trick:
   keep glyphs crisp by not blurring them — applied via a sibling label layer. */
.gm-item span{position:relative;z-index:3}

var menu = document.getElementById('gmMenu');
var toggle = document.getElementById('gmToggle');

function setOpen(open) {
  menu.classList.toggle('gm-open', open);
  toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
  toggle.textContent = open ? '+' : '+';   // rotation handles the visual change
}

toggle.addEventListener('click', function () {
  setOpen(!menu.classList.contains('gm-open'));
});

// Close when clicking an action or outside the menu.
menu.addEventListener('click', function (e) {
  var item = e.target.closest('.gm-item');
  if (item && item !== toggle) setOpen(false);
});
document.addEventListener('click', function (e) {
  if (!menu.contains(e.target)) setOpen(false);
});