Fundo pontilhado CSS

O código SVG completo (para referência)

<svg id="halftonePattern" width="100%" height="100%" viewBox="0 0 100% 100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;">
  <defs>
    <!-- 1. Radial Gradient for Circles -->
    <radialGradient id="radialBlackToTransparent" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="5%" style="stop-color:black; stop-opacity:0.5" />
      <stop offset="100%" style="stop-color:black; stop-opacity:0" />
    </radialGradient>

    <!-- 2. Circle Pattern -->
    <pattern id="circlesPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" fill="url(#radialBlackToTransparent)" />
    </pattern>

    <!-- 3. Linear Gradient Overlay -->
    <linearGradient id="linearBlackToTransparent" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:black; stop-opacity:0.5" />
      <stop offset="100%" style="stop-color:black; stop-opacity:0" />
    </linearGradient>
    
    <linearGradient id="linearBlackToTransparentH" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:black; stop-opacity:0" />
      <stop offset="50%" style="stop-color:black; stop-opacity:0.5" />
      <stop offset="100%" style="stop-color:black; stop-opacity:0" />
    </linearGradient>
    
    <radialGradient id="radialBlackToTransparentOverlay" >
      <stop offset="0%" style="stop-color:black; stop-opacity:0.5" />
      <stop offset="100%" style="stop-color:black; stop-opacity:0" />
    </radialGradient>

    <!-- Hidden elements to be used as sources for feImage in the filter -->
    <!-- These need explicit width/height matching the viewBox for feImage to capture them correctly -->
    <rect id="circlesSourceLayer" width="100%" height="100%" fill="url(#circlesPattern)" />
    <rect id="overlaySourceLayer" width="100%" height="100%" fill="url(#linearBlackToTransparent)" />

    <!-- 4. SVG Filter -->
    <filter id="blendAndThresholdFilter" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse">
      <!-- Get the circles pattern as an image input -->
      <feImage xlink:href="#circlesSourceLayer" result="circlesInput" x="0" y="0" width="100%" height="100%"/>

      <!-- Get the linear gradient overlay as another image input -->
      <feImage xlink:href="#overlaySourceLayer" result="overlayInput" x="0" y="0" width="100%" height="100%"/>

      <!-- Blend them using 'multiply' -->
      <feBlend mode="multiply" in="circlesInput" in2="overlayInput" result="multiplied" />

      <feColorMatrix type="matrix"
        values="
          1 0 0 0 0
          0 1 0 0 0
          0 0 1 0 0
          0 0 0 255 -128" />
    </filter>
  </defs>

  <!-- Display the final result by applying the filter -->
  <!-- The fill of this rect doesn't matter as the filter will generate the pixels -->
<!--  <rect x="0" y="0" width="100%" height="100%" fill="white" filter="url(#blendAndThresholdFilter)" /> -->
</svg>
<div style="box-shadow:0 0 0 0px red;margin:0;padding:0;">
<div style="width:100vw;height:100vh;filter:url(#blendAndThresholdFilter)"></div>
</div>