円形ラジアルメニュー

<div class="d03-02-09-radial">
          <button class="d03-02-09-item" data-i="0" title="ホーム"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#4f46e5" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></button>
          <button class="d03-02-09-item" data-i="1" title="検索"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#4f46e5" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></button>
          <button class="d03-02-09-item" data-i="2" title="お気に入り"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#4f46e5" stroke-width="2"><path d="M12 21s-7-4.35-9.5-8.5C.5 8.5 3 4 7 5c2 .5 3 2 5 4 2-2 3-3.5 5-4 4-1 6.5 3.5 4.5 7.5C19 16.65 12 21 12 21z"/></svg></button>
          <button class="d03-02-09-item" data-i="3" title="設定"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#4f46e5" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.4-2.3 1a7 7 0 0 0-1.7-1L14.5 3h-4l-.4 2.6a7 7 0 0 0-1.7 1l-2.3-1-2 3.4 2 1.5a7 7 0 0 0 0 2l-2 1.5 2 3.4 2.3-1a7 7 0 0 0 1.7 1l.4 2.6h4l.4-2.6a7 7 0 0 0 1.7-1l2.3 1 2-3.4-2-1.5a7 7 0 0 0 .1-1z"/></svg></button>
          <button class="d03-02-09-item" data-i="4" title="共有"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#4f46e5" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.6" y1="13.5" x2="15.4" y2="17.5"/><line x1="15.4" y1="6.5" x2="8.6" y2="10.5"/></svg></button>
          <button class="d03-02-09-center" aria-label="メニューを開く">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#fff" stroke-width="2.4"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </button>
        </div>

.d03-02-09-radial{position:relative;width:52px;height:52px}
        .d03-02-09-center,.d03-02-09-item{position:absolute;top:0;left:0;width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
        .d03-02-09-center{background:#4f46e5;z-index:3;box-shadow:0 8px 20px rgba(79,70,229,.35)}
        .d03-02-09-center svg{transition:transform .3s}
        .d03-02-09-item{width:42px;height:42px;top:5px;left:5px;background:#fff;border:1.5px solid #e0e7ff;opacity:0;transform:translate(0,0) scale(.4);transition:transform .35s cubic-bezier(.34,1.4,.64,1),opacity .3s;z-index:2}
        .d03-02-09-radial.open .d03-02-09-center svg{transform:rotate(135deg)}
        .d03-02-09-radial.open .d03-02-09-item{opacity:1}
        .d03-02-09-radial.open .d03-02-09-item[data-i="0"]{transform:translate(-88px,0) scale(1)}
        .d03-02-09-radial.open .d03-02-09-item[data-i="1"]{transform:translate(-62px,-62px) scale(1)}
        .d03-02-09-radial.open .d03-02-09-item[data-i="2"]{transform:translate(0,-88px) scale(1)}
        .d03-02-09-radial.open .d03-02-09-item[data-i="3"]{transform:translate(62px,-62px) scale(1)}
        .d03-02-09-radial.open .d03-02-09-item[data-i="4"]{transform:translate(88px,0) scale(1)}
        .d03-02-09-item:hover{background:#eef2ff}

(function(){
        var r=document.querySelector('#item-03-02-09 .d03-02-09-radial');
        r.querySelector('.d03-02-09-center').addEventListener('click',function(){r.classList.toggle('open');});
      })();