Gerador de Polka Dot SVG

Polka dot SVG: história, teoria e uso prático

O padrão polka dot (bolinhas) é um dos motivos decorativos mais antigos da moda e do design gráfico modernos. O nome vem da polca, dança folclórica tcheco-boêmia que explodiu nos salões europeus nos anos 1840 e 1850. Os fabricantes da época exploraram a popularidade da dança para vender qualquer coisa: havia jaquetas polka, cortinas polka e — principalmente — tecido polka dot, uma matriz regular de círculos sobre fundo contrastante. A palavra ficou, a dança sumiu, e 180 anos depois as bolinhas continuam em todo lugar.

As bolinhas viraram ícone pop nos anos 1950. Marilyn Monroe vestiu um biquíni polka dot na capa da Life; a Disney desenhou a Minnie com vestido vermelho de bolinhas; e a música "Itsy Bitsy Teeny Weeny Yellow Polka Dot Bikini" foi número um em 1960. Na arte contemporânea, a artista japonesa Yayoi Kusama transformou o ponto numa obsessão conceitual — as Infinity Mirror Rooms no Tate Modern e no MoMA foram vistas por milhões, e as bolinhas viraram a marca de uma visão de mundo sem hierarquia.

Como um padrão polka dot SVG é construído

A receita clássica em SVG é um tile <pattern> contendo um único <circle>. O navegador repete o tile ao longo de qualquer forma que você preencher — geralmente um <rect> de página inteira:

<svg width="100%" height="100%">
  <defs>
    <pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="3" fill="#000"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dots)"/>
</svg>

Para um visual mais denso e orgânico, use layout intercalado (staggered): linhas alternadas deslocadas em meia célula (a mesma regra de empacotamento hexagonal usada por átomos em cristais 2D). Para implementar, basta dobrar a largura do tile para 2 * espaçamento e desenhar dois círculos dentro.

Tamanhos, cores e linguagem visual

• Bolinhas finas (1–3 mm) — elegantes, discretas; comuns em gravatas e camisas masculinas.
• Bolinhas médias (5–10 mm) — o look brincalhão clássico dos vestidos dos anos 1950 e da Minnie.
• Bolinhas grandes (> 20 mm) — ousadas, gráficas e editoriais; usadas por Kusama e em embalagens de impacto.
• Vermelho sobre branco — clima de lanchonete americana anos 50, toalha de piquenique.
• Marinho sobre branco — náutico, preppy, verão.
• Preto sobre branco — elegância à Audrey Hepburn, editorial de moda.

Equivalente CSS puro e Tailwind

Para padrões polka muito simples, uma linha de CSS com radial gradient resolve — sem SVG:

background: radial-gradient(circle, #000 2px, transparent 2px) 0 0/20px 20px;

No Tailwind, o mesmo efeito sai com valor arbitrário: bg-[radial-gradient(circle,#000_2px,transparent_2px)] bg-[length:20px_20px]. Vá de SVG quando precisar de bolinhas intercaladas, múltiplos tamanhos por tile, animação ou estilização por bolinha — coisas que gradient não faz.

Onde polka dots funcionam hoje

Além da moda, polka dots seguem como cavalo de batalha de convites de chá de bebê, papelaria de festas, branding retrô, embalagens de alimentos e ilustração editorial. Em UI minimalista moderna, uma camada polka com opacidade muito baixa (abaixo de 8%, bolinhas finas) adiciona textura silenciosa a uma hero section sem brigar com o foreground. O padrão também é um dos poucos que imprime e renderiza igualmente bem em tela — razão importante pela qual sobrevive há séculos.

Perguntas frequentes

Qual tamanho de bolinha usar? Para textura de UI, mantenha as bolinhas pequenas (raio 2–4 px, espaçamento 20–30 px) e opacidade baixa. Para branding decorativo, vá maior e saturado.

CSS puro ou SVG? Polka dot de cor única e alinhado fica ok com radial-gradient em CSS. Escolha SVG quando precisar de empacotamento intercalado, mais de uma cor por tile ou animação.

Qual a saturação ideal das bolinhas? Depende da marca. Pastel passa friendly e editorial; primárias saturadas dão clima pop-art à la Kusama.

O SVG funciona em todos os navegadores? Sim — <pattern> é suportado desde o IE9 e é sólido em qualquer engine moderno.