Planos de fundo CSS

LEIA O ORIGINAL AQUI: CSS Dotted Background

Importante: O elemento SVG principal no código acima está estilizado para ficar oculto (style="position:absolute; top:-9999px; left:-9999px; opacity:0; pointer-events:none;"). Isso ocorre porque seu único propósito é definir os componentes do filtro (gradientes, padrões e o próprio filtro). O efeito visual real será aplicado a um elemento HTML separado usando CSS: filter: url(#blendAndThresholdFilter).

Criar um plano de fundo CSS pontilhado é um requisito comum de design, variando de um simples plano de fundo CSS com pontos repetidos a efeitos visuais mais complexos. Para um plano de fundo básico com grade pontilhada, o CSS oferece soluções simples usando background-image com radial-gradient e background-repeat. Você pode facilmente gerar um padrão CSS pontilhado uniforme dessa forma, dando aos seus elementos uma aparência limpa e geométrica. Essa abordagem é excelente para planos de fundo CSS estáticos e repetitivos com pontos, onde todos os pontos têm o mesmo tamanho e espaçamento.

No entanto, alcançar um verdadeiro efeito de meio-tom — onde os tamanhos dos pontos variam para simular um gradiente ou os valores tonais de uma imagem — apresenta um desafio maior com CSS pontilhado puro. Embora o CSS tenha poderosos recursos de gradiente e mascaramento, variar dinamicamente o tamanho de pontos individuais em uma grade com base em um mapa de intensidade subjacente (como exige o verdadeiro meio-tom) ultrapassa os limites do que é facilmente gerenciável apenas com CSS. A complexidade surge em fazer com que cada "ponto" no CSS de pontos de fundo responda individualmente a um gradiente maior ou padrão de imagem.