Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Ruído e Textura SVG

CorDesenvolvedorImagem

ANUNCIADO Remover?

ENTRADA

Processo Automático

Tipo de Ruído

Tipo

Parâmetros do Ruído

Frequência Básica: 65 Mais alto = grão mais fino. O valor é dividido por 100 (0,01–2,0).

Octávos: 3 Mais octávos = detalhes mais ricos (mais lento para renderizar).

Semente: 7 Mude para obter um padrão aleatório diferente.

Estique os Teses (sem costura)

Modo de Cor

Monocromático

Corrida (tonalidade)

Fundo

Tonalidade do Ruído

Transparência do Ruído %: 35

Contraste: 120 Aumenta a intensidade do ruído via feComponentTransfer.

Tamanho de Saída

Largura

Altura

SAÍDA

Lado cliente

SVG Inline

Fundo CSS (URI de dados)

Filtro SVG Apenas

Apenas o elemento — aplique com filter="url(#noise)" em qualquer forma SVG.

ANUNCIADO Remover?

Guia

Crie ruídos orgânicos e texturas turbulentas diretamente no seu navegador usando o filtro SVG feTurbulence. Arraste os sliders, ajuste a semente, escolha um

Gerador de Ruído e Textura SVG

Crie ruídos orgânicos e texturas turbulentas diretamente no seu navegador usando o filtro SVG feTurbulence filter. Arraste os sliders, ajuste a semente, escolha uma cor de tonalidade e veja a textura atualizar em tempo real. Exporte como SVG inline, uma URI de dados CSS ou um filtro SVG reutilizável que pode ser aplicado a qualquer forma. background-image Escolha um tipo de ruído —

Como usar

Ruído Fractal para grão orgânico de filme, Turbulência para espirais nubladas. Frequência Básica
Ajuste para o tamanho do grão e Octávos para riqueza de detalhes. para rolar por diferentes padrões aleatórios.
Mude o Semente Estique os Teses
Alternar para saída repetível. Modo Corrido
Escolha Monocromático ou e ajuste o fundo, a tonalidade, a transparência e o contraste. Copie o SVG, a URI de dados CSS ou o trecho do filtro, ou baixe o arquivo SVG.
Dois tipos de ruído

Características

– Ruído Fractal (grão orgânico) e Turbulência (espirais fumegantes). – Re-render com desaceleração em cada mudança de slider.
Pré-visualização em tempo real Controle de Octávos
– 1 a 8 octávos para equilibrar riqueza contra desempenho. Reprodutibilidade com semente
– Cada semente é um padrão determinístico único. Tiling semelhante
– Opcional para fundos reutilizáveis. stitchTiles="stitch" Mono ou colorido
– Grão em escala cinza ou qualquer tonalidade via Contraste e transparência feColorMatrix.
– Aumente a intensidade com – SVG inline, fundo de dados URI CSS ou filtro SVG apenas. feComponentTransfer.
Três formatos de saída – Salve como standalone
Baixar com um clique Quando Usar Texturas de Ruido .svg.

Gradientes granulados

– Superponha ruído em um gradiente CSS para quebrar as faixas. Efeitos de papel e filme
– Adicione um grão leve a ilustrações planas e seções de destaque. Fundos de nuvens e fumaça
– Use a turbulência com frequência baixa e poucos octávos. Superposição de desgaste e texturas
– Aplicar o filtro a formas para um efeito de impressão à mão. O que é feTurbulence e como funciona?

 Perguntas frequentes

feTurbulence é um primitivo de filtro SVG que gera ruído Perlin. Gera um padrão pseudo-aleatório com base em uma semente e uma frequência básica. Frequências mais baixas produzem formas nubladas amplas; frequências mais altas produzem grão fino. Vários octávos camadas de ruído em frequências progressivamente mais altas para detalhes mais ricos.

Qual a diferença entre fractalNoise e turbulência?
Ambos são baseados no ruído Perlin. O fractalNoise usa o ruído assinado diretamente, gerando um grão mais suave que parece filme. A turbulência usa o valor absoluto, gerando espirais de alta contraste que parecem fumaça ou mármore.

Por que usar ruído SVG em vez de uma imagem PNG?
O ruído SVG é gerado pelo navegador em tempo real, portanto escala infinitamente sem ficar borrado e não adiciona requisições HTTP além de uma pequena URI de dados inline. Também re-renderiza com clareza em qualquer relação de pixels do dispositivo.

O que faz stitchTiles?
Com stitchTiles="stitch", o filtro SVG garante que os padrões do ruído se alinham corretamente nas bordas dos quadros, permitindo que a textura seja repetida como fundo CSS sem costuras visíveis.

Os filtros SVG são suportados por todos os navegadores?
Sim — feTurbulence faz parte do SVG 1.1 e é suportado por todos os navegadores modernos, incluindo Chrome, Safari, Firefox e Edge. O desempenho varia com o número de octávos e a área renderizada, portanto prefira quadros menores ao alvo de dispositivos de baixo desempenho.

Copiar SVG