Gerador de padrão de fundo para hero
Gere um padrão geométrico repetitivo para decorar o fundo de uma seção hero, de um banner ou do cabeçalho de um site, com vários estilos e uma cor totalmente personalizável.
Como funciona
A ferramenta constrói um padrão SVG usando um elemento <pattern> repetido automaticamente por toda a superfície: você desenha apenas uma célula do padrão (cruz, círculo, chevron…), e o SVG se encarrega de repeti-la sem cortes visíveis, qualquer que seja o tamanho final da área a cobrir.
Como integrar esse padrão diretamente no meu site sem um arquivo de imagem?
Copie o código SVG gerado e cole-o diretamente no seu HTML, ou codifique-o como data-URI para usá-lo como background-image em CSS: o padrão permanece nítido em todas as resoluções de tela e não exige nenhuma requisição de rede adicional para carregar uma imagem separada.
O padrão se adapta se eu redimensionar a seção hero?
Se você usar o SVG como background-image com background-repeat: repeat, o padrão se repete automaticamente para cobrir toda a largura da seção, qualquer que seja o tamanho real dela na página, sem precisar gerar o arquivo novamente.
Geração 100% local: o padrão SVG é calculado inteiramente no seu navegador, sem enviar nenhum dado a um servidor.