code: function createModalOverlay() {
    const containerElement = _createModalContainer();
    const defsElement = document.createElementNS(svgNS, 'defs');
    const maskContainer = _createMaskContainer();
    const maskRect = _createMaskRect();
    const maskOpening = _createMaskOpening();
    const maskConsumer = _createMaskConsumer();
  
    maskContainer.appendChild(maskRect);
    maskContainer.appendChild(maskOpening);
  
    defsElement.appendChild(maskContainer);
  
    containerElement.appendChild(defsElement);
    containerElement.appendChild(maskConsumer);
  
    return containerElement;
  }
docs: Generates an SVG with the following structure:
  ```html
  <svg id="shepherdModalOverlayContainer" xmlns="http://www.w3.org/2000/svg">
  <defs>
  <mask id="shepherdModalMask" x="0" y="0" width="100%" height="100%" >
  <rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF"/>
  <!-- This element will "punch a hole" through the mask by preventing it from rendering within the perimeter -->
  <rect id="shepherdModalMaskOpening"/>
  </mask>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" mask="url(#shepherdModalMask)"/>
  </svg>
  ```