Gerador SVG Padrão Tijolos

Padrão de tijolos em SVG: 7 mil anos de arquitetura num tile

O padrão de tijolos é um dos motivos geométricos mais antigos do design humano. Tijolos de barro cozidos ao sol aparecem na Mesopotâmia antiga por volta de 5000 a.C., e o mesmo arranjo defasado que usamos hoje — meio tijolo deslocado entre fileiras — já era padrão porque distribui a carga vertical e impede que rachaduras corram em linha reta para cima. Na web, esse tile entrega na hora caráter de "loft", "industrial" ou "rústico" a um background.

Matematicamente, o padrão são duas fileiras defasadas de retângulos. Com largura w e altura h, o tile SVG é w × 2h e a segunda fileira é deslocada em w/2. A proporção padrão é aproximadamente 2:1 (comprimento por altura); tijolo maciço brasileiro vem em 9×14×19 cm ou 9×19×29 cm.

<pattern id="brick" width="80" height="40" patternUnits="userSpaceOnUse">
  <rect x="0"   y="0"  width="80" height="20" fill="#c44" stroke="#fff" stroke-width="2"/>
  <rect x="-40" y="20" width="80" height="20" fill="#c44" stroke="#fff" stroke-width="2"/>
  <rect x="40"  y="20" width="80" height="20" fill="#c44" stroke="#fff" stroke-width="2"/>
</pattern>

Tipos de amarração (bond)

• Running (stretcher) bond — cada fileira deslocada em meio tijolo. A amarração mais comum do planeta; limpa, moderna, estruturalmente sólida.
• Flemish bond — cada fileira alterna lado longo (stretcher) e lado curto (header). Decorativa, fachadas tradicionais europeias.
• English bond — fileiras alternam tudo-stretcher e tudo-header. Muito forte, ritmo visual mais pesado.
• Stack bond — sem deslocamento, juntas verticais alinhadas. Visualmente marcante, mas a estrutura mais fraca — usado puramente como decoração.
• Espinha de peixe (herringbone) — tijolos a 90° um do outro; comum em pisos e paredes de destaque modernas.

Cor, argamassa e textura

Três paletas cobrem a maior parte das demandas: vermelho terracota clássico (#b91c1c com junta #fef2f2), tijolo pintado de branco (#f5f5f4 com junta #d6d3d1) e concreto aparente cinza (#52525b com junta #27272a). Paredes reais têm junta de argamassa de cerca de 10 mm, que em um tijolo de 60 px corresponde mais ou menos a um traço de 2 px — esse é o default deste gerador. Para realismo extra, sobreponha um ruído leve via <filter><feTurbulence> ou um grain PNG de baixa opacidade.

CSS ou SVG?

Tecnicamente dá pra montar uma parede de tijolos com um par de repeating-linear-gradient() empilhados — um para as juntas horizontais e outro para as verticais defasadas. Funciona, mas o código é longo, difícil de recolorir e quebra no Safari em tamanhos sub-pixel. <pattern> SVG com três <rect> é mais curto, tematizável por um único atributo fill e tilea igualzinho em qualquer navegador e DPR.

Perguntas frequentes

Qual amarração é melhor pra background? Running bond para quase qualquer site — é a mais reconhecível e lê bem em escala pequena. Stack bond fica moderno, mas pode parecer rígido demais; Flemish bond serve a estéticas tradicionais e premium.

Qual o tamanho ideal dos tijolos? Escale conforme o contexto. Para um hero, tijolos de 60-80 px de largura ficam bons. Para um elemento de UI tipo um header de card, 20-30 px mantém a textura legível sem sobrecarregar a tipografia.

SVG ou CSS? SVG. É mais curto, mais simples de recolorir e fica igual em todos os navegadores. Gradientes CSS funcionam pra um experimento rápido, mas perdem em legibilidade quando o tile fica não-trivial.

Dá pra baixar o SVG? Sim — o botão Baixar salva o tile como um arquivo .svg independente, pronto pra cair em qualquer projeto.