Criando SVGs com ruído

Adicionando efeito de ruído em SVG

• Interesse em como a evolução das tecnologias web influencia o design para a web
• O aumento da densidade de pixels das telas impulsiona a transição de fotografias para ilustrações vetoriais
• Nas tendências recentes de design, surgiram texturas de ruído que usam sombras texturizadas ou efeitos de iluminação

Studio Vellekoop & León

• Preferência pessoal pelo estilo de textura com ruído e a dificuldade de reproduzi-lo em SVG
• Interesse por SVG e exploração de formas de criar diversos efeitos
• Compartilhamento da experiência de escrever SVG manualmente após o surgimento do SVGO, ferramenta de otimização de SVG

Formas básicas e gradientes

• Em SVG, é fácil desenhar formas básicas como círculos ou retângulos
• Ao aplicar gradientes, é necessário um gradiente que varie conforme a cor base para reutilização de componentes
• Introdução ao uso de máscaras e à forma de definir uma figura apenas uma vez com <defs> e referenciá-la com o elemento use

Resultado

• Geração de textura de ruído artificial usando o filtro <feTurbulence>
• Aplicação de efeitos de filtro para remover variações de cor e misturar naturalmente com a cor de preenchimento selecionada
• No fim, foi criada uma ilustração satisfatória, embora no Safari ela seja renderizada de forma diferente

Informações adicionais 7 de dezembro de 2023

• O texto foi enviado ao Hacker News e recebeu algumas reações
• Apresentação de um artigo do CSS Tricks sobre tema semelhante, escrito por Jimmy Chion em 2021
• Na época em que o texto foi escrito, o autor não conhecia o artigo anterior, mas agora o linka como material complementar

Opinião do GN⁺

O ponto mais importante deste texto é a exploração de como implementar em SVG as texturas de ruído, uma das tendências mais recentes do web design. Esse conteúdo não é apenas um tema interessante para web designers e desenvolvedores, mas também oferece informações úteis para engenheiros de software iniciantes que queiram aprender técnicas modernas de design para a web. Por meio de exemplos práticos sobre a flexibilidade do design com SVG e formas de otimização, os leitores podem aprender a implementar efeitos visuais complexos com eficiência.

[ndrgrd]

Como sempre, o Safari não decepciona! O nome IE dos anos 20 não é à toa.

[GN⁺]

Comentários do Hacker News

• Tentaram implementar um efeito de sombra em SVG que não era possível fazer em canvas, mas como as sombras em CSS não funcionavam no Safari, tiveram que usar filtros nativos de SVG. Como a aparência ficava diferente nos outros navegadores, usaram JavaScript para detectar o Safari e desativar a versão em CSS.

• O contexto sobre o "yin-yang recursivo" está explicado no blog em questão, e há planos de brincar com texturas, mas é frustrante que no Safari tudo pareça diferente. Fica a dúvida se algum dia haverá padronização na interpretação de SVG.

• É frustrante que não seja fácil reproduzir certos estilos de ilustração com SVG. Esse estilo é chamado de "dithering", e a página "Grainy Gradients" da CSS-Tricks explica a mesma técnica. Também existe a alternativa de aplicar isso à imagem inteira usando CSS.

• Já fizeram pôsteres de conferência complexos com SVG, mas a renderização varia entre navegadores e programas. É possível embutir SVG por inclusão/link, mas incluir outro SVG dentro dele não funciona. Às vezes o navegador não exibe imagens embutidas/linkadas por questões de "segurança". Converter SVGs complexos para PDF também causa problemas inconsistentes de falta de memória. Cada ferramenta que converte SVG para PDF produz resultados diferentes. Ferramentas como o Inkscape às vezes tratam SVGs incluídos como gráficos rasterizados.

• Fotógrafos de filme se esforçaram para eliminar o grão do filme, mas fotógrafos digitais tendem a querer adicioná-lo de volta. Esses exemplos parecem atraentes dentro da limpeza do digital.

• O Inkscape consegue adicionar esse ruído com vários efeitos de filtro, e ao exportar como Plain SVG dá para ver no código o uso de feTurbulence. Também compararam como o Affinity Designer 2 lida com ruído. No SVG exportado, o ruído vem incluído como uma imagem jpeg em base64.

• O site do "ApeFest" cria ruído dinâmico usando uma sobreposição de PNGs em mosaico que se movem "aleatoriamente" com animações CSS (na prática, movidas por JS). É tecnicamente simples, mas eficaz.

• Como a aparência dos filtros SVG varia muito conforme o motor e os fatores de escala, eles só são usados em detalhes sutis e apenas quando precisão não é importante. Filtros como feDisplacementMap destroem o anti-aliasing e arruínam metade dos casos em que se gostaria de usá-los.

• Recomendam não usar isso como plano de fundo de página. Quando tentaram antes, surgiram bugs estranhos em vários dispositivos e, em sites grandes, a página travava completamente ou o SVG parava de renderizar acima de certo tamanho.

• Perlin Noise e sua continuação, Fractal Noise, são muito eficazes para adicionar realismo ou uma sensação "orgânica". Por exemplo, foram usados com eficiência na cena de fuga da caverna em "Aladdin (1992)".

• Há interesse em formas de criar efeitos independentes do nível de zoom. Também, em relação a adicionar aleatoriedade, fica a dúvida se existe alguma forma de definir uma seed que permita determinar um único resultado de renderização correto para um tamanho específico.