Creación de SVG con ruido

Agregar efectos de ruido en SVG

• Interés en cómo el avance de las tecnologías web influye en el diseño web
• El aumento en la densidad de píxeles de las pantallas impulsa la transición de las fotografías a las ilustraciones vectoriales
• En las tendencias recientes de diseño han aparecido texturas de ruido que usan sombras con textura o efectos de iluminación

Studio Vellekoop & León

• Gusto personal por el estilo de textura con ruido y las dificultades para reproducirlo en SVG
• Interés por SVG y exploración de métodos para lograr distintos efectos
• Aparición de SVGO, una herramienta de optimización para SVG, y experiencia compartida escribiendo SVG directamente

Formas básicas y degradados

• En SVG se pueden dibujar fácilmente formas básicas como círculos o rectángulos
• Al aplicar degradados, se necesita un degradado que cambie según el color base para reutilizar componentes
• Introducción al uso de máscaras y a cómo definir una forma solo una vez con <defs> y referenciarla con el elemento use

Resultado

• Generación de una textura de ruido artificial usando el filtro <feTurbulence>
• Aplicación de efectos de filtro para eliminar variaciones de color y mezclarlo de forma natural con el color de relleno seleccionado
• Finalmente se logró una ilustración satisfactoria, aunque en Safari se renderiza de manera diferente

Información adicional 7 de diciembre de 2023

• El artículo fue enviado a Hacker News y recibió algunas reacciones
• Se presenta un artículo de CSS Tricks sobre un tema similar escrito por Jimmy Chion en 2021
• Al momento de escribir el artículo no se conocía el texto anterior, pero ahora se enlaza como material complementario

Opinión de GN⁺

Lo más importante de este artículo es la exploración de cómo implementar en SVG las texturas de ruido, una de las tendencias más recientes del diseño web. Este contenido no solo es un tema interesante para diseñadores y desarrolladores web, sino que también ofrece información útil para ingenieros de software principiantes que quieren aprender técnicas modernas de diseño web. A través de ejemplos prácticos sobre la flexibilidad del diseño con SVG y sus métodos de optimización, los lectores pueden aprender a implementar efectos de diseño complejos de manera eficiente.

[ndrgrd]

¡Safari de nuevo, sin decepcionar las expectativas! De verdad se ha ganado el nombre del IE de los años 20.

[GN⁺]

Comentarios en Hacker News

• Intentaron implementar un efecto de sombra con SVG que no podían lograr en canvas, pero como las sombras CSS no funcionaban en Safari, tuvieron que usar filtros nativos de SVG. Como se veía distinto a otros navegadores, usaron JavaScript para detectar Safari y desactivar la versión con CSS.

• El contexto de "yin-yang recursivo" está explicado en ese blog, y aunque planean jugar con texturas, les frustra que en Safari se vea diferente. Se preguntan si alguna vez se logrará estandarizar la interpretación de SVG.

• Reproducir cierto estilo de ilustración con SVG no es fácil, lo cual resulta frustrante. A este estilo se le llama "dithering", y la página "Grainy Gradients" de CSS-Tricks explica la misma técnica. También existe una alternativa para aplicarlo a toda la imagen usando CSS.

• Hicieron un póster de conferencia complejo con SVG, pero se renderizaba distinto según el navegador y el programa. Se puede embeber incluyendo/enlazando SVG, pero si incluyes otro SVG dentro, no funciona. A veces los navegadores no muestran imágenes embebidas/enlazadas por temas de "seguridad". Convertir SVG complejos a PDF provoca errores de memoria de forma inconsistente. Cada herramienta que convierte SVG a PDF da resultados distintos. Herramientas como Inkscape a veces tratan los SVG incluidos como gráficos rasterizados.

• Los fotógrafos de película se esforzaban por eliminar el grano de la película, pero los fotógrafos digitales tienden a volver a agregarlo. Estos ejemplos resultan atractivos dentro de la limpieza de lo digital.

• Inkscape puede agregar este ruido mediante varios efectos de filtro, y al exportar como Plain SVG se puede ver en el código el uso de feTurbulence. También compararon cómo maneja el ruido Affinity Designer 2. En el SVG exportado, el ruido va incluido como una imagen jpeg en base64.

• El sitio web de "ApeFest" genera ruido dinámico usando una superposición de PNG en mosaico que se mueve "aleatoriamente" con animaciones CSS (en realidad desplazadas con JS). Es técnicamente simple, pero efectivo.

• Como la apariencia de los filtros SVG cambia mucho según el motor y los factores de escalado, solo los usan en detalles sutiles y cuando la precisión no es importante. Filtros como feDisplacementMap destruyen el antialiasing y arruinan la mitad de los casos en los que querrían usarlos.

• Recomiendan no usarlo como fondo de página. Cuando lo intentaron antes, aparecieron bugs extraños en distintos dispositivos, y en sitios grandes la página llegaba a congelarse por completo o SVG dejaba de renderizarse a partir de cierto tamaño.

• Perlin Noise y su sucesor, Fractal Noise, son muy efectivos para añadir realismo o una sensación más "orgánica". Por ejemplo, se usaron de forma efectiva en la escena de escape de la cueva en "Aladdín (1992)".

• Hay interés en cómo crear efectos de forma independiente del nivel de zoom. También, en relación con añadir aleatoriedad, se preguntan si existe una forma de fijar una semilla (seed) que permita definir un único resultado de render correcto para un tamaño dado.