噪声图案生成器

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <filter id="noise">
    <feTurbulence type="turbulence" baseFrequency="0.05 0.05" numOctaves="4" seed="0" />
    <feColorMatrix type="saturate" values="0" />
    <feBlend in="SourceGraphic" mode="overlay" />
  </filter>
  <rect width="100%" height="100%" fill="#2563eb" filter="url(#noise)" />
</svg>

.noise-bg {
  background: #2563eb;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22200%22%3E%0A%20%20%3Cfilter%20id%3D%22noise%22%3E%0A%20%20%20%20%3CfeTurbulence%20type%3D%22turbulence%22%20baseFrequency%3D%220.05%200.05%22%20numOctaves%3D%224%22%20seed%3D%220%22%20%2F%3E%0A%20%20%20%20%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%20%2F%3E%0A%20%20%20%20%3CfeBlend%20in%3D%22SourceGraphic%22%20mode%3D%22overlay%22%20%2F%3E%0A%20%20%3C%2Ffilter%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%232563eb%22%20filter%3D%22url(%23noise)%22%20%2F%3E%0A%3C%2Fsvg%3E");
}