Gerador de padrões SVG: blocos contínuos para fundos | We.Inc
Dez padrões SVG contínuos para fundos: bolinhas, grade, ondas, hexágonos e mais. Defina tamanho, espessura da linha, cores, opacidade e ângulo e copie o CSS ou o SVG com um elemento pattern.
Escolha um dos dez formatos de bloco, defina o tamanho do bloco, a espessura da linha, as cores, a opacidade e o ângulo, e receba um fundo SVG contínuo. Copie como data URL de background-image em CSS, que se repete em qualquer elemento, ou como arquivo SVG baseado no elemento pattern para usar dentro de ilustrações, tudo desenhado e visualizado no seu navegador.
Bloco SVG ou padrão com gradiente CSS?
Necessidade
Use
Por quê
Curvas, hexágonos, ondas, sinais de mais
Bloco SVG (esta ferramenta)
Qualquer forma que o SVG consiga desenhar
Listras, bolinhas e xadrez simples
Gradientes CSS
Nenhuma imagem, veja o gerador de fundos CSS
Padrão dentro de uma ilustração SVG
Elemento <pattern>
Preenche qualquer forma SVG
Truques com gradiente desenham listras e bolinhas, mas sofrem com ondas, hexágonos e contornos. Um pequeno bloco SVG desenha qualquer coisa e continua nítido em qualquer nível de zoom e, como data URL, não acrescenta nenhuma requisição extra à página.
Escolha um padrão. A prévia preenche um painel grande para você avaliar a textura em escala real.
Ajuste o tamanho do bloco e a espessura da linha ou o raio do ponto, depois escolha as cores do traço e do fundo.
Diminua a opacidade do traço para uma textura sutil e defina um ângulo se quiser os blocos girados.
Copie o CSS para um fundo, o SVG de um bloco único ou o SVG completo que usa um elemento pattern.
Texturas de fundo devem ser discretas. Uma opacidade de traço entre 0.1 e 0.25 sobre um fundo colorido raramente briga com o texto.
Combine o tamanho do bloco com a sua escala de espaçamento, por exemplo 16, 24 ou 32 pixels, para as linhas se alinharem com o grid do layout.
Quando você gira um padrão, a ferramenta passa para a forma com elemento pattern, porque um bloco único girado deixaria de se encaixar sem emendas.
Coloque os padrões em um contêiner ou em um pseudo-elemento atrás do conteúdo, para poder mudá-los ou removê-los em um só lugar.
Perguntas frequentes
Por que codificar # e < na data URL?
Dentro de uma URL, # inicia um fragmento e corta a imagem, e alguns parsers rejeitam sinais de menor e maior crus. Codificá-los como %23, %3C e %3E mantém o SVG intacto. Aspas duplas viram aspas simples para a string caber dentro de url("...").
O que patternUnits="userSpaceOnUse" faz?
Ele mede a largura e a altura do bloco nas mesmas unidades do desenho, então um bloco de 24 tem 24 pixels de largura onde quer que seja usado. O padrão, objectBoundingBox, dimensiona os blocos como frações da forma preenchida.
Posso usar o padrão no Tailwind?
Sim. Adicione a regra CSS à sua folha de estilo como uma classe, ou use valores arbitrários como bg-[url(...)] com a data URL. Uma classe é mais fácil de ler quando a URL é longa.
Esses padrões são livres para usar?
Sim. Cada bloco é desenhado a partir de formas simples pelo código desta página, então o resultado é seu, sem necessidade de crédito.
Como funciona um bloco contínuo
Um bloco se repete de borda a borda, então tudo o que sai pelo lado direito precisa voltar pelo esquerdo. O padrão diagonal, por exemplo, desenha pequenos segmentos extras em dois cantos para as linhas continuarem pelas bordas do bloco sem falhas.
Traços centrados na borda do bloco, como no grid, são cortados ao meio pelo bloco. Dois blocos vizinhos então somam uma única linha de largura inteira, e é por isso que o grid parece uniforme.
Duas formas de usar
Para fundos, uma data URL em CSS é o mais simples: uma regra, nenhum arquivo para hospedar, e background-size controla a escala. O navegador decodifica o bloco uma vez e o repete.
Dentro de uma ilustração SVG, defina um pattern em defs e preencha formas com url(#id). patternTransform pode girar ou escalar o padrão inteiro sem redesenhá-lo.
Atributos do pattern SVG
Atributos do elemento pattern usados pelo gerador
Atributo
Padrão
O que faz
width / height
Tamanho de um bloco; um valor de 0 não desenha nada
patternUnits
objectBoundingBox
Unidades de x, y, width, height; esta ferramenta usa userSpaceOnUse
patternContentUnits
userSpaceOnUse
Unidades das formas dentro do bloco
patternTransform
nenhum (identidade)
Gira, escala ou inclina o padrão inteiro
Desloca onde o primeiro bloco começa
Padrão como fundo em CSS
Textura de contorno hexagonal atrás de um card
Um bloco hexagonal de 28 pixels com metade da opacidade. Mude background-size para escalar a textura.
O mesmo bloco com o elemento pattern
Use isto dentro de ilustrações SVG inline. Qualquer forma pode receber fill="url(#p)".
Bolinhas
Papel quadriculado
Linhas diagonais
Sinais de mais
Ziguezague
Ondas
Triângulos
Tabuleiro de xadrez
Anéis
Hexágonos
Gerador de padrões
Padrões: Bolinhas, Papel quadriculado, Linhas diagonais, Sinais de mais, Ziguezague, Ondas, Triângulos, Tabuleiro de xadrez, Anéis, Hexágonos. Defina tamanho, espessura da linha, cores, opacidade e ângulo e copie o CSS ou o SVG.