SVG / Planos de fundo

Gerador de padrões SVG: ladrilhos de fundo contínuos

Crie padrões de pontos, grades, listras, xadrez, zigue-zagues, ondas, triângulos, hexágonos, sinais de mais, círculos e bolinhas deslocadas. Copie um fundo CSS com escape ou baixe ladrilhos SVG e PNG.

Gerador de padrões SVG: ladrilhos de fundo contínuos: Escolha pontos, grades, listras, xadrez, ondas, hexágonos e outros motivos; defina seu tamanho, espaçamento, cores e rotação para obter um ladrilho que se repete sem emendas visíveis. Copie-o como SVG ou como fundo CSS, ou baixe o ladrilho em SVG ou PNG. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria: Ferramentas para desenvolvedores
Execuções: No seu navegador
Custo: Grátis · sem cadastro
Disponibilidade: Pronto para usar

Padrões SVG contínuosProcessamento local

Roda inteiramente no seu navegador

Bloco: 48 × 48 unidades SVG

Padrão SVG

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><pattern id="s5svg-pattern" width="48" height="48" patternUnits="userSpaceOnUse" patternTransform="rotate(0)"><g transform="translate(-48 -48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(0 -48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(48 -48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(-48 0)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(0 0)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(48 0)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(-48 48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(0 48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(48 48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g></pattern></defs><rect width="100%" height="100%" fill="#14200f"/><rect width="100%" height="100%" fill="url(#s5svg-pattern)"/></svg>

Plano de fundo CSS

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpattern id='s5svg-pattern' width='48' height='48' patternUnits='userSpaceOnUse' patternTransform='rotate(0)'%3E%3Cg transform='translate(-48 -48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(0 -48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(48 -48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(-48 0)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(0 0)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(48 0)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(-48 48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(0 48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(48 48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%2314200f'/%3E%3Crect width='100%25' height='100%25' fill='url(%23s5svg-pattern)'/%3E%3C/svg%3E");
background-size: 48px 48px;
background-repeat: repeat;

A rotação usa incrementos de 45° para que o bloco quadrado exportado continue contínuo. O PNG contém um bloco. O contorno afeta os motivos contornados; o xadrez usa preenchimentos sólidos.

Criar um padrão com gradientes CSS

Padrões SVG

O SVG 2 especifica patternUnits e patternTransform, que definem o sistema de coordenadas do bloco e a rotação. https://www.w3.org/TR/SVG2/pservers.html#Patterns

Usando o padrão no CSS

O plano de fundo CSS incorpora o bloco SVG como um URI de dados, portanto não é necessário um arquivo de imagem separado. As transformações de coordenadas SVG são especificadas em https://www.w3.org/TR/SVG2/coords.html . Os motivos são gerados localmente; nenhuma fonte ou recurso de padrão externo é usado.

Como usar

Escolha um motivo e defina seu tamanho, espaçamento e contorno.
Escolha duas cores para o motivo, uma cor de fundo e uma rotação.
Confira a prévia repetida; depois copie o CSS ou exporte o ladrilho SVG ou PNG.

Privacidade e limitações

Toda a geração de padrões e exportação de imagens acontece localmente no seu navegador.

Ferramentas relacionadas

Perguntas frequentes

Por que as rotações são feitas em incrementos de 45 graus?

Uma rotação arbitrária geralmente não produz um ladrilho quadrado finito que se repita. Esses ângulos têm superladrilhos quadrados, mantendo o CSS e as imagens baixadas sem emendas.

O PNG contém toda a prévia?

Não. Ele contém um único ladrilho repetido, com um tamanho raster quadrado arredondado para pixels inteiros. O SVG mantém suas dimensões geométricas exatas.

Posso gerar esses padrões sem SVG?

O Gerador de padrões CSS existente oferece uma seleção menor usando gradientes CSS. Esta ferramenta fornece elementos de padrão SVG e ladrilhos para download. O contorno afeta os motivos delineados; o xadrez usa preenchimentos sólidos.

Ferramenta grátis · no seu navegador execuções · não precisa de conta