구이 메뉴

<svg width="0" height="0"><defs><filter id="goo2"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="b"/><feColorMatrix in="b" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 26 -12"/></filter></defs></svg>
<div class="gstage">
  <div class="gwrap" id="gwrap">
    <i class="item it1"></i><i class="item it2"></i><i class="item it3"></i><i class="item it4"></i>
    <div class="main"></div>
  </div>
  <span class="icon">+</span>
</div>

.gstage{position:relative;width:100%;height:100%;display:grid;place-items:center}
.gwrap{position:relative;filter:url(#goo2);width:1px;height:1px}
.main{position:absolute;top:0;left:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--accent)}
.item{position:absolute;top:0;left:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--accent-2);
  animation:pop 2.8s ease-in-out infinite}
.it1{animation-delay:0s}.it2{animation-delay:.05s}.it3{animation-delay:.1s}.it4{animation-delay:.15s}
.icon{position:absolute;color:#fff;font:800 20px/1 sans-serif;pointer-events:none}
@keyframes pop{
  0%,14%{transform:translate(0,0) scale(.6)}
  45%,72%{transform:translate(var(--tx),var(--ty)) scale(.82)}
  100%{transform:translate(0,0) scale(.6)}
}
.it1{--tx:-58px;--ty:-14px}
.it2{--tx:-24px;--ty:-52px}
.it3{--tx:24px;--ty:-52px}
.it4{--tx:58px;--ty:-14px}