Dot Pattern Background

<svg width="100%" height="100%">
  <defs>
    <pattern id="dots" width={20} height={20} patternUnits="userSpaceOnUse">
      <circle cx={10} cy={10} r={1.5} fill="rgba(255,255,255,0.15)" />
    </pattern>
    <radialGradient id="fade-mask">
      <stop offset="30%" stopColor="white" />
      <stop offset="100%" stopColor="black" />
    </radialGradient>
    <mask id="dot-mask">
      <rect width="100%" height="100%" fill="url(#fade-mask)" />
    </mask>
  </defs>

  <rect width="100%" height="100%" fill="url(#dots)" mask="url(#dot-mask)" />
</svg>

{/* Usage: position absolute derriere le contenu */}
<div className="relative">
  <svg className="absolute inset-0 w-full h-full" />
  <div className="relative z-10">Votre contenu ici</div>
</div>