Fundos e padrões SVG grátis | SVG Backgrounds

• Oferece 48 fundos e padrões SVG leves, que podem ser aplicados a projetos web apenas com copiar e colar
• Cada design permite ajustar livremente cores, tamanho, modo de mesclagem etc., e alguns oferecem suporte a efeitos de animação como rotação e movimento
• Todos os gráficos são designs exclusivos do SVGBackgrounds.com, utilizáveis em projetos pessoais e comerciais
• Porém, não podem ser incluídos em produtos concorrentes, e a atribuição (Attribution) é obrigatória
• Um recurso gratuito que permite a designers e desenvolvedores web criar facilmente fundos personalizados para a marca

---

Visão geral dos fundos e padrões SVG grátis

• O SVGBackgrounds.com oferece um conjunto de fundos e padrões SVG gratuitos
  • No site, o usuário pode ajustar cor, mesclagem, tamanho etc. para criar fundos personalizados
  • Alguns designs incluem recursos de transformação visual como redução de escala, rotação e movimento
• Cada fundo é um design original do SVGBackgrounds.com e pode ser aplicado diretamente em sites ou interfaces de apps
• Os gráficos fornecidos podem ser baixados nos formatos código CSS inline, SVG e PNG

Como usar

• O usuário pode conferir como aplicar por meio de uma página de demonstração que mostra onde inserir o código CSS
• Os fundos podem ser integrados facilmente no estilo copiar e colar (Copy and Paste)
• O site oferece várias opções de ajuste, como paleta de cores, escala e modo de mesclagem

Licença e condições de uso

• Ao usar os gráficos, é necessário concordar com o contrato de licença do SVGBackgrounds.com
  • Pode ser usado tanto em projetos pessoais quanto comerciais
  • Não pode ser incluído em produtos concorrentes nem revendido
  • No uso gratuito, a atribuição (Attribution) é obrigatória
• Assinantes pagos podem obter os benefícios de uso ilimitado e isenção de atribuição

Criador e comunidade

• O site é operado por Matt, que publica novos recursos gratuitos e pagos todos os meses
  • Os usuários podem receber notificações sobre novos fundos e atualizações por e-mail, assinando a newsletter
• O criador sugere várias formas de crédito pelos usuários, como link em HTML, compartilhamento em redes sociais e apoio (Buy me a coffee)

Recursos e ferramentas adicionais

• Além dos fundos, o SVGBackgrounds.com também oferece vários elementos gráficos, como ícones SVG, ilustrações, botões, cursores e Shape Divider
• Com ferramentas como SVG to CSS Converter e Shape Divider Generator, desenvolvedores podem converter ou gerar SVGs diretamente
• Por meio dos lançamentos mais recentes e do blog, o site continua divulgando novos conjuntos de design e atualizações de produtos

[GN⁺]

Comentários do Hacker News

• Esses fundos são realmente muito bons. Só queria que, em vez do botão de "clique para copiar", houvesse um <textarea> com o CSS visível
  Alguns navegadores ou usuários bloqueiam o acesso à área de transferência por segurança, então não há alternativa quando a função de copiar não funciona

  • Boa observação. Eu fazia assim antes, e acho que não seria difícil voltar para esse formato ou adicionar um botão para mostrar o código

• Gosto especialmente do padrão de telhado laranja. Mas no Firefox algumas partes não aparecem corretamente — os redemoinhos azul e verde são renderizados apenas como um quadrado e um hexágono, respectivamente
  Também tenho curiosidade sobre como usar esse tipo de fundo sem atrapalhar o conteúdo. Padrões detalhados muitas vezes ficam visualmente distrativos

  • O mais comum é usar o fundo no documento inteiro e colocar por cima um overlay com opacidade ajustada para exibir o conteúdo principal. Em tela cheia no desktop funciona bem, mas no mobile falta espaço para mostrar o fundo adequadamente
  • Testei no Firefox e funciona, mas o efeito só aparece quando se move o controle deslizante no topo. Acho que talvez fique melhor invertendo a direção do efeito, então vou repensar isso
  • O problema do “quadrado azul e hexágono verde” se resolve ao mover o controle deslizante

• Gostei da interface de troca de fundo e do painel de ajuste de parâmetros. Já experimentei padrões procedurais com SVG/canvas/webgl antes, e isso me deu vontade de empacotar novamente a forma como eu os apresento

  • Obrigado. Depois de projetar várias vezes interfaces para manipulação gráfica, acho que esta versão ficou especialmente bem refinada. Houve limitações por tentar mostrar o fundo o mais amplamente possível, mas isso acabou permitindo escolhas criativas. Estou bastante satisfeito com o resultado

• O aviso de que “há acesso ao fundo” ocupa um terço da tela no mobile e não há como fechá-lo. Fiquei curioso com o motivo

  • Só aparece “Você tem acesso. Aproveite!”, mas fui pesquisar e parece que esse tipo de acesso costuma valer algo em torno de US$ 120 por ano
  • Boa observação. Como ao clicar na miniatura o botão de pré-visualização vira a UI de manipulação do fundo, estou pensando em redesenhar essa parte

• Acho estranho que, ao passar o mouse, a parte que eu quero ver fique borrada ou coberta

  • Fui nessa direção porque, com um clique, já é possível ver tudo, e no estado de hover não havia muito mais para mostrar como prévia. O principal objetivo do hover era deixar clara a possibilidade de interação

• Não tem nenhuma imitação do efeito <blink />. Exijo reembolso (piada)

• Com o plugin Dark Reader ativado, a pré-visualização não funciona

• Gosto especialmente do padrão de triângulos. Fiquei curioso se foi inspirado em Rule 30

  • Eu nunca tinha ouvido falar de Rule 30. Ainda bem que o link era para a Wikipedia, e o conceito pareceu bem interessante e uma ideia inspiradora. Obrigado por compartilhar

• Descobri este site quando refiz meu portfólio há cerca de um ano e usei um dos fundos no cabeçalho. Muito obrigado

  • Fico feliz em saber que foi útil. Que bom que ajudou

• Fundos realmente muito bons. Quero experimentar no meu jogo de paciência
  Só que, no mobile, se eu fizer a pré-visualização e depois rolar a página, a imagem desaparece e só volta depois de recarregar. E também seria bom se cada padrão tivesse um nome

  • Que estranho. Eu agradeceria se você pudesse enviar as informações do dispositivo ou navegador pelo formulário de contato. E, para referência, cada fundo já tem um nome, mas no mobile eles ficam ocultos por causa do pouco espaço na tela