Tiny Online Tools
Pontos, Anéis e Bolinhas — Tudo em SVG
Padrões baseados em círculos são um dos elementos de design mais simples, porém dos mais eficazes. Adicionam ritmo, leveza e movimento sem disputar espaço com o resto da página. Este gerador produz três variações populares, cada uma com um clique:
Modos de Padrão
- Anéis concêntricos — círculos igualmente espaçados do centro para fora. Alternar cores dá um efeito alvo; no modo somente contorno você obtém arte de anéis limpo, textura minimalista.
- Grade de pontos — bolinhas clássicas em grade perfeita. Ajuste tamanho do ponto e colunas para ir do pontilhado sutil a padrões retrô marcantes.
- Pontos deslocados — pontos em linhas alternadamente deslocadas, criando ritmo de favo de mel. Elegante para fundos e padrões sem emenda.
Controles
- Modo — as três formas de padrão.
- Anéis / Colunas — densidade do padrão.
- Tamanho do ponto — nos modos de grade, o tamanho de cada ponto.
- Cor / Fundo — par primeiro plano/fundo.
- Modo contorno — alterna entre pontos preenchidos e contornos de anel, com largura ajustável.
Usos
- Fundos hero e divisores de seção decorativos
- Mockups de produto e gráficos tipo tecido
- Estados de carregamento e detalhes de UI
- Decoração editorial para artigos
- Fundos contrastantes para telas mobile
Como cada círculo é um <circle> leve, o SVG fica minúsculo e fácil de ajustar — troque cores, escale à vontade ou coloque em um <pattern> para um fundo infinito.