QRコード生成風シェアパネル

<div class="d06-14-09-wrap">
          <button class="d06-14-09-btn" type="button">QRコードでシェア</button>
          <div class="d06-14-09-qr">
            <div class="d06-14-09-grid"></div>
          </div>
        </div>

.d06-14-09-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; }
        .d06-14-09-btn { border:none; border-radius:999px; background:#111827; color:#fff; padding:9px 16px; font-size:12.5px; font-weight:700; cursor:pointer; }
        .d06-14-09-qr { width:0; height:0; overflow:hidden; opacity:0; transition:width .3s ease, height .3s ease, opacity .3s ease; background:#fff; border:1px solid #e5e7eb; border-radius:8px; }
        .d06-14-09-qr.is-open { width:84px; height:84px; opacity:1; padding:6px; }
        .d06-14-09-grid { width:100%; height:100%; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(6,1fr); gap:2px; }
        .d06-14-09-grid span { background:#111827; border-radius:1px; }

(function(){
          var root = document.querySelector('.d06-14-09');
          var btn = root.querySelector('.d06-14-09-btn');
          var qr = root.querySelector('.d06-14-09-qr');
          var grid = root.querySelector('.d06-14-09-grid');
          var built = false;
          function build(){
            if(built) return;
            built = true;
            for(var i=0;i<36;i++){
              var cell = document.createElement('span');
              if(Math.random() > 0.42){ cell.style.background = '#111827'; } else { cell.style.background = 'transparent'; }
              grid.appendChild(cell);
            }
          }
          btn.addEventListener('click', function(){
            build();
            qr.classList.toggle('is-open');
          });
        })();