Gerador de SVG: blobs, ondas, padrões e degradês

Gerar um blob, uma onda ou um padrão SVG: método e exportações

O gerador calcula traçados vetoriais a partir de uma semente aleatória: a mesma semente e as mesmas configurações resultam exatamente no mesmo arquivo. São oferecidos seis modos (blob, ondas, padrão repetitivo, gradiente em malha, curvas topográficas, emblema), exportáveis em SVG, em componente React, em plano de fundo CSS, em data URI ou em PNG com até 4 vezes o tamanho. O blob padrão pesa menos de 1 KB.

Como um blob é construído

A ferramenta distribui N pontos em um círculo (N = complexidade, de 3 a 16) cujo raio equivale a 35% do menor lado. Cada raio é deslocado aleatoriamente em uma faixa de ± (aleatoriedade ÷ 10) × 22,5% do raio, sem ficar abaixo de 20 px. Os pontos são então ligados por uma curva de Catmull-Rom convertida em segmentos de Bézier cúbicos, cuja tensão segue o ajuste “arredondamento”. O acaso vem de um gerador pseudoaleatório determinístico (Mulberry32) inicializado pela semente.

Exemplo

Configurações padrão: tela de 600 × 600 px, 8 pontos, aleatoriedade 6, semente 42. O raio base é de 210 px, cada ponto se afasta no máximo 28,35 px, e o traçado tem 8 segmentos de Bézier. O arquivo SVG tem 952 bytes com seu gradiente linear de três cores; em data URI base64, passa a cerca de 1.300 caracteres, um terço a mais. A semente 43 dá outra forma; a semente 42 sempre devolve a mesma.

Opções e limites

• Efeitos: grão (filtro de ruído fractal), sombra projetada, rotação, espelho, 12 paletas e 10 predefinições.
• A animação adiciona regras CSS ao arquivo: funciona em um navegador, mas não na maioria dos softwares de diagramação nem na exportação PNG, que congela uma imagem.
• O grão e o desfoque do gradiente em malha usam filtros SVG, que são custosos de renderizar em superfícies grandes ou no celular.
• O componente React é obtido pela conversão do texto SVG: revise-o antes de integrá-lo a um projeto tipado.

Tudo é calculado no seu navegador; nenhuma imagem é enviada a um servidor.

Perguntas frequentes

Como reencontrar exatamente a mesma forma SVG?

Anote a semente exibida (42 por padrão) e as suas configurações: o gerador pseudoaleatório da ferramenta sempre produz o mesmo traçado para a mesma semente. Mudar apenas a semente, por exemplo para 43, resulta em uma nova forma com os mesmos parâmetros. O botão de sorteio aleatório escolhe uma semente entre 0 e 99.999.

É melhor exportar em SVG ou em PNG?

O SVG continua nítido em todos os tamanhos e costuma pesar menos de 1 KB para um blob simples (952 bytes com as configurações padrão). O PNG serve para as ferramentas que não aceitam vetor; a ferramenta o exporta em 1x, 2x ou 4x o tamanho da tela, ou seja, 2.400 × 2.400 px em 4x para uma tela de 600 px. A animação se perde no PNG.

Como usar o blob como fundo de página em CSS?

Escolha o formato CSS: a ferramenta comprime o SVG, o codifica em data URI e fornece uma regra background-image com background-size: cover e centralização. Cole-a na folha de estilo da sua seção. O formato data URI em base64 é cerca de um terço mais pesado que o SVG original.

A animação funciona em todo lugar?

A animação é escrita em CSS (keyframes) dentro do arquivo SVG. Ela funciona quando o SVG é exibido em um navegador, mas Figma, Illustrator ou PowerPoint geralmente a ignoram, e a exportação em PNG conserva apenas uma imagem fixa. A velocidade se ajusta entre 2 e 16 segundos por ciclo.

A ferramenta é realmente gratuita?

Sim, todas as ferramentas do Kristools são 100% gratuitas e acessíveis sem cadastro.

Meus dados estão protegidos?

Sim. Todo o processamento é feito diretamente e com segurança no seu navegador. Nenhum dado pessoal é enviado para os nossos servidores.