Cluster Expand

<div class="nuda-cluster">
  <div class="nuda-cluster__center">8</div>
  <span class="nuda-cluster__pin" style="--x:32px;--y:-8px">1</span>
  <span class="nuda-cluster__pin" style="--x:-32px;--y:-8px">2</span>
  <span class="nuda-cluster__pin" style="--x:0;--y:-36px">3</span>
  <span class="nuda-cluster__pin" style="--x:22px;--y:26px">4</span>
  <span class="nuda-cluster__pin" style="--x:-22px;--y:26px">5</span>
</div>

const cluster = document.querySelector('.nuda-cluster');
const center  = cluster.querySelector('.nuda-cluster__center');
center.addEventListener('click', () => cluster.classList.toggle('is-open'));

.nuda-cluster {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.nuda-cluster__center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e4ff54;
  color: #09090b;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 0 0 4px rgba(228,255,84,.18),0 0 16px rgba(228,255,84,.4);
  cursor: pointer;
  z-index: 1;
  transition: transform .25s;
}

.nuda-cluster:hover .nuda-cluster__center {
  transform: scale(.9);
}

.nuda-cluster__pin {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #62b6ff;
  color: #fafafa;
  font-size: 10px;
  font-weight: 700;
  opacity: 0;
  transform: translate(0,0) scale(0);
  transition: opacity .35s,transform .55s cubic-bezier(.34,1.56,.64,1);
}

.nuda-cluster.is-open .nuda-cluster__pin {
  opacity: 1;
  transform: translate(var(--x),var(--y)) scale(1);
}

.nuda-cluster.is-open .nuda-cluster__pin:nth-child(2) {
  transition-delay: 0ms;
}

.nuda-cluster.is-open .nuda-cluster__pin:nth-child(3) {
  transition-delay: 60ms;
}

.nuda-cluster.is-open .nuda-cluster__pin:nth-child(4) {
  transition-delay: 120ms;
}

.nuda-cluster.is-open .nuda-cluster__pin:nth-child(5) {
  transition-delay: 180ms;
}

.nuda-cluster.is-open .nuda-cluster__pin:nth-child(6) {
  transition-delay: 240ms;
}