Softonic

Gerador de Padrão de Pontos SVG

Etapa 1 / 3
Próximo

Padrões de pontos são o trabalho discreto dos fundos modernos da web, pense na sutil grade pontilhada atrás de uma página do Notion, nos pontos polka dot em uma seção de destaque, ou na textura semelhante a grãos em um cartão. Este gerador cria um único SVG usando uma definição de <pattern> inline, então o arquivo permanece pequeno (geralmente abaixo de 500 bytes) e se repete perfeitamente em qualquer tamanho. Você controla a tela, o espaçamento entre os pontos, o raio, a cor do ponto e o fundo.

Como construir um padrão de pontos

  1. 1

    Defina a tela

    Largura e altura em pixels. Para fundos CSS, isso pode permanecer pequeno (por exemplo, 800×600) e ser repetido.

  2. 2

    Escolha o espaçamento

    Distância entre os centros dos pontos vizinhos. 20-40 px parece limpo; 10 px fica barulhento.

  3. 3

    Defina o raio do ponto

    1-3 px para textura sutil, 4-8 px para pontos polka dot deliberados.

  4. 4

    Escolha as cores

    Preenchimento do ponto (primeiro plano) e fundo da tela. Defina o fundo como `transparent` para um padrão de sobreposição verdadeiro.

  5. 5

    Copie o SVG

    Cole em seu HTML ou use como `background-image: url("data:image/svg+xml,...")` em CSS.

Como o padrão é definido

O gerador produz um elemento <pattern> dentro de <defs> e preenche um <rect> de tela inteira com fill="url(#dots)":

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

patternUnits="userSpaceOnUse" fixa o tamanho do tile em pixels, então escalar o SVG pai não distorce os pontos.

Folha de dicas para ajuste de padrão

Aparência Espaçamento Raio Contraste
Sussurro (mal visível) 30-40 1-1.5 5-10% opacidade
Fundo sutil 25-30 2 15-20% opacidade
Padrão de pontos honesto 20 2-3 Cor total
Pontos polka dot deliberados 40-60 8-15 Cor total
Efeito meio-tom 10 1 Preenchimento gradiente

Usando como fundo CSS

Codifique o SVG como uma URL de dados e aplique em qualquer elemento:

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

Repetir o SVG por CSS é mais rápido do que enviar um PNG, o navegador rasteriza no tamanho final de exibição, então permanece nítido em cada DPR (displays 1x, 2x, 3x).

Quando os pontos prejudicam a legibilidade

Um padrão de pontos diretamente atrás do texto pode criar um moiré cintilante contra texto fino. Se você precisar colocar texto em cima, ou:

  • Aumente o espaçamento para 40+ px para que os pontos fiquem entre as linhas, ou
  • Reduza a opacidade do padrão abaixo de 10%, ou
  • Coloque o texto dentro de um cartão sólido sobre o padrão.

Perguntas frequentes

Defina a cor de fundo como transparent, então a única pintura são os próprios pontos. Coloque o SVG sobre qualquer cor ou imagem que você queira mostrar.

Não com este gerador, ele produz uma grade quadrada. Para um layout hexagonal, você precisa de um tile de padrão que seja sqrt(3) vezes mais alto do que largo, com dois círculos por tile deslocados por metade. Considere o construtor de caminho SVG ou um gerador hex dedicado.

O SVG em si é nítido em qualquer tamanho, mas se você rasterizá-lo em uma resolução menor do que o tile do padrão, você obterá aliasing. Exporte em 2x ou 3x do tamanho de exibição pretendido.

Substitua fill="#hex" no círculo por fill="url(#gradient-id)" e adicione uma definição <linearGradient> dentro do mesmo <defs>. Cada ponto será então renderizado com esse gradiente, o que pode ser caro se a tela tiver milhares de pontos.

O editor padrão envia tela, espaçamento, raio e cores ao servidor para renderizar a prévia. No fluxo guiado, essas configurações também aparecem na URL. Não insira informações sensíveis; a ferramenta não salva um projeto de padrão reutilizável.

Ferramentas relacionadas

Seletor de Cores do Material Design

Navegue pela paleta de cores do Material Design. Copie qualquer tonalidade (50 a A700) como HEX, RGB ou HSL com um toque.

Gerador de papel pautado

Crie papel pautado para imprimir de graça. Escolha pauta média, larga ou estreita, defina o espaçamento das linhas em mm, o tamanho da página e uma linha de margem, e imprima ou baixe o SVG.

Gerador de papel quadriculado

Crie papel quadriculado para imprimir online: escolha grade ou pontos, ajuste o espaçamento em mm, selecione A4 ou Carta e uma cor de linha personalizada, e imprima ou baixe um SVG nítido.

Criador de gráficos de ponto cruz

Transforme JPEG, PNG ou WebP em gráfico de ponto cruz imprimível com 10–150 pontos, 2–40 cores próprias, símbolos, contagens exatas e medidas do tecido.

Divisor de Grade do Instagram

Divida uma imagem ampla em uma grade 3×3 do Instagram, ou qualquer número de linhas. As peças são numeradas para facilitar o upload em ordem inversa.

Criador de Crachás

Crie até 60 crachás imprimíveis a partir de uma lista Nome | segunda linha. Escolha 8 cartões ou 15 etiquetas por página em A4 ou US Letter e imprima localmente.

Ferramenta disponível em outros idiomas