Una inmersión profunda en el maravilloso mundo del filtrado de desplazamiento SVG

 

 

 

  • Register!
  • Deploy Fast. Deploy Smart

  • Índice
    1. Una breve introducción al filtrado por desplazamiento
    2. El mapa absoluto
    3. Explorando diferentes mapas en acción
    4. El problema de los bordes irregulares
    5. ¡No renuncies a Webkit!
      1. Una prueba
    6. Crear mapas de desplazamiento SVG y colocarlos en el filtro
    7. Construyendo una lupa
    8. Generando mapas arbitrarios con caminos borrosos
    9. Animación
    10. Un efecto de falla simple
    11. Un mapa de desplazamiento en movimiento
    12. Una transición fallida entre elementos
    13. Animando el mapa en sí

    ¿Qué es exactamente un filtro de desplazamiento? En este artículo, Dirk Weber explica la feDisplacementMapprimitiva del filtro SVG con una buena cantidad de ejemplos para demostrar el concepto de mapas de desplazamiento animados.

     

    Incluso hoy en día, el reino mágico y perverso de los efectos de filtro SVG es en gran medida un territorio inexplorado. El arte del filtrado SVG todavía está rodeado por un aura de alquimia: tienes que sumergirte con valentía en un mundo oscuro de inconsistencias, tu dedicación será puesta a prueba repetidamente por implementaciones con errores y efectos secundarios estresantes, y debes aprender encantamientos complicados. Pero, una vez dominado, te brinda un poder sin precedentes: un medio para cambiar la apariencia total de elementos y sitios web con solo chasquear un dedo.

    En este artículo, nos sumergiremos en uno de los efectos de filtro más espectaculares: la primitiva de filtro SVGfeDisplacementMap . Para que todo sea más fácil de digerir, he dividido el artículo en tres partes en las que exploraremos:

     

    1. cómo feDisplacementMapfunciona , es decir, cómo aplicarlo y cómo controlar su producción de manera predecible;
    2. luego exploraremos métodos para crear mapas de desplazamiento sofisticados en SVG (un poco más interesante ya que comenzaremos a jugar con JavaScript);
    3. y finalmente, veremos algunos de los métodos para animar el filtro y crear efectos visuales espectaculares .

    Como esta será una lectura bastante larga, los impacientes tal vez quieran ver las demostraciones que encontraremos antes de continuar. Todas las demostraciones de este artículo se han optimizado para las últimas versiones de los tres principales motores de navegador.

    Para aprovechar al máximo este artículo, ya debe tener conocimientos básicos de los filtros SVG. Si es un principiante en materia de filtros, es posible que desee desviarse brevemente hacia la introducción de Sara Soueidan o pasar primero a mi humilde versión del tema .

    Sin embargo, tenga cuidado: si no se aplican correctamente, los filtros SVG pueden afectar drásticamente el rendimiento de su sitio . Pruebe siempre exhaustivamente si implementa una de las técnicas descritas aquí.

    Un adelanto de los distintos ejemplos de demostración que analizaremos más de cerca en este artículo. (Fuente: Dirk Weber ) ( Vista previa grande )

    Una breve introducción al filtrado por desplazamiento

    Entonces, ¿qué es un filtro de desplazamiento? Una operación de desplazamiento puede distorsionar visualmente cualquier gráfico al que se aplique. Puedes crear efectos de deformación, giros u ondulaciones como lo harías con un filtro de distorsión de Photoshop . El filtrado de desplazamiento es una herramienta importante en VFX , y lo más probable es que ya hayas visto algunas operaciones de mapeo de desplazamiento en cine y televisión, creadas con una herramienta VFX como After Effects o GiantRed.

    Para lograr un efecto de distorsión, el filtro necesita dos imágenes como entrada:

    • El gráfico fuente real debe estar distorsionado (de ahora en adelante solo “fuente”);
    • El “mapa de desplazamiento” (de ahora en adelante simplemente “mapa”). Este mapa contiene información sobre cómo queremos que se distorsione la fuente.

    La mayoría de las veces, un mapa será una imagen de mapa de bits, pero en la siguiente parte demostraré cómo usar imágenes o fragmentos SVG como entrada.

    Veamos qué pasa cuando utilizamos una imagen de la famosa Sagrada Familia de Barcelona para “distorsionar” la Mona Lisa:

    Consulte el Pen [Ejemplo simple de filtrado `feDisplacementMap`](https://codepen.io/smashingmag/pen/NWgNbmg) de Dirk Weber .

    filter color-interpolation-filters="sRGB" feImage href="lasagrada.jpg" result="FEIMG" / feDisplacementMap in="SourceGraphic" in2="FEIMG" scale="500" xChannelSelector="R" yChannelSelector="B" //filter

    Visualización de los componentes básicos de este filtro. ( Vista previa grande )

    1. La primera primitiva de filtro es feImagela que contiene una referencia al mapa (hay otras primitivas de filtro que se pueden usar como entrada. Encontrará varias demostraciones fascinantes donde feTurbulencese usa como mapa de desplazamiento , pero en este artículo, nos centraremos principalmente en feImage).
    2. Esta feImage luego se introduce en una feDisplacementMapprimitiva donde ocurre la distorsión real:
      • Un atributo positivo o negativo scaledefine la fuerza de la distorsión.
      • El propósito de xChannelSelectory yChannelSelectores determinar cuál de los canales de cuatro colores de la imagen de entrada (rojo, verde, azul, alfa) debe aplicarse a qué eje para la distorsión. Ambos atributos utilizan de forma predeterminada el canal alfa del mapa (lo que significa que si estás usando un mapa sin canales alfa y omites estos atributos, no verás más que un desplazamiento diagonal de la fuente).

    Luego aplicamos el filtro con CSS:

     

    .filtered { filter: url(#displacement-filter);}

    Puede ser divertido jugar a distorsionar imágenes de esta manera, pero es impredecible cómo se verá el resultado y la mayoría de las veces no es nada agradable desde el punto de vista estético. ¿Existe alguna manera de obtener un control perfecto de píxeles sobre la salida? Esto es lo que dice la especificación :

    Esta primitiva de filtro utiliza los valores de píxeles de la imagen de in2 para desplazar espacialmente la imagen de in. Esta es la transformación que se realizará:

    P'(x,y) ← P( x + escala * (XC(x,y) - .5), y + escala * (YC(x,y) - .5))

    El mapa de desplazamiento, in2, define el inverso del mapeo realizado.

    Bien, parece complicado a primera vista, pero en realidad es bastante fácil de entender cuando se desglosa:

    • P'(x,y)representa las coordenadas de un píxel en el resultado;
    • Xy Yson las coordenadas de este píxel en la fuente sin filtrar;
    • XCy YCson los valores de color RGB normalizados (1/255)del píxel dado en el mapa;
    • Finalmente, el resultado de la operación debe invertirse (lo que básicamente significa que cada elemento +de la fórmula debe reemplazarse por a -).

    Realizaremos algunos experimentos sencillos para verificar nuestra fórmula introduciendo mapas de bits primitivos en un filtro, que consta de un solo color. Digamos que el mapa está lleno de rgb(51, 51, 51), ¿cómo esperaríamos x=100 / y=100que se transformaran las coordenadas de un píxel de origen en cuando se introducen en una primitiva de desplazamiento con un valor de escala de 100?

    X: 100 - 100 * (51/255 - .5) = 130

    Y: 100 - 100 * (51/255 - .5) = 130

    Consulte el filtrado Pen [`feDisplacementMap` que aplica rgb(51, 51, 51)](https://codepen.io/smashingmag/pen/gORrLNw) de Dirk Weber .

    El píxel resultante se moverá a las coordenadas 130130 . Se desplazará a 30 px hacia la derecha y 30 px hacia abajo. ¿Qué sucede cuando cambiamos el mapa a un 50% de gris como en rgb(127,127, 127)?

    Consulte Pen [el filtrado `feDisplacementMap` se aplica al 50 %] (https://codepen.io/smashingmag/pen/zYzqogy) de Dirk Weber .

    Evidentemente, un color neutro no tiene un efecto reconocible. Los píxeles resultantes permanecen en su lugar. ¿Y si cambiamos los valores de color a algo superior a 128, digamos rgb(204, 204, 204)?

     

    Consulte el filtrado Pen [`feDisplacementMap` que aplica rgb(204, 204, 204)](https://codepen.io/smashingmag/pen/qBjZRWe) de Dirk Weber .

    Las coordenadas se han desplazado a 30 px hacia la izquierda y 30 px hacia la parte superior.

    Hasta ahora hemos aprendido lo suficiente como para resumir la mecánica interna del filtro de desplazamiento en estas tres simples frases:

    • Cualquier valor de color superior a 127 desplazará el píxel correspondiente en la dirección del valor de escala;
    • Cualquier valor de color inferior a 127 desplazará el píxel correspondiente en la dirección opuesta;
    • Un valor de color de 127 no tendrá ningún efecto.

    Por intuición, uno tendería a creer que el color negro no tendría ningún efecto, pero a estas alturas debería quedar claro que no es así. De hecho, el blanco y negro dará como resultado el máximo desplazamiento posible hacia o desde el valor de la escala.

    El mapa absoluto

    En este punto, debo presentarles el mapa especial que será la base de todos los efectos que veremos a partir de ahora. Es un mapa que realizará una distorsión muy sencilla: escalar una imagen proporcionalmente. Lo llamaremos el identity mapo el absolute mapde ahora en adelante.

    Ejemplo de un identity–mapa absoluteque aprovecha los canales de color rojo y azul. ( Vista previa grande )

    Para escalar una imagen por igual en todas las direcciones, los valores de color deben disminuir gradualmente desde un máximo en un borde hasta un mínimo en el borde opuesto. Usaremos rojo Xy azul a Ypartir de ahora, pero al final, no importa qué color elijas x-y yChannelSelector.

    1. En su editor de imágenes favorito, abra un nuevo documento;
    2. Establezca el color de fondo del documento en negro;
    3. Crea una nueva capa y rellénala con un degradado de izquierda a derecha desde rgb(255, 0, 0)hasta rgba(255, 0, 0, 0);
    4. Agregue una segunda capa y agregue un degradado de arriba a abajo desde rgb (0, 0, 255)hasta rgba(0, 0, 255, 0);
    5. Establezca el modo de fusión para esta capa en screen.

    Et voilà, ¡has creado un mapa absoluto ! Este mapa servirá como una base sólida para todo tipo de distorsiones de imágenes:

    • Al aplicar filtros de distorsión similares a los de Photoshop a este mapa, ¡podemos usar estos efectos en filtros CSS!
    • Podemos controlar la escala de los ejes x e y de forma independiente alterando la transparencia del degradado azul o rojo.
    • Es posible "enmascarar" partes del mapa con un color "neutro" ( rgb(127, 0 ,127)o #7F007F) para evitar que las partes correspondientes en la imagen se desplacen.

    Véase el Pen [Variaciones de los mapas de desplazamiento y su aplicación](https://codepen.io/smashingmag/pen/KKqzaKo) de Dirk Weber .

     

    Explorando diferentes mapas en acción

    Para comprender mejor el proceso, creé una pequeña aplicación para explorar varios mapas de desplazamiento . Todos los mapas se han creado aplicando filtros de distorsión simples de Photoshop al mapa absoluto.

    A maptesteren Codepen ( Haga clic para iniciar → )

    El problema de los bordes irregulares

    Es posible que hayas notado los bordes pixelados que a veces aparecen en la imagen de salida. Especialmente el material original con alto contraste, por ejemplo tipografía o ilustraciones vectoriales, es propenso a este efecto.

    Una razón para los bordes irregulares: después del desplazamiento, un borde que alguna vez estuvo perfectamente suavizado en la fuente no será suavizado una segunda vez. (Fuente: DirkWeber ) ( Vista previa grande )

    Esto se debe a varias razones:

    • El filtro tomará la imagen de origen como un mapa de bits:
      si existen bordes suavizados en la fuente, el filtro no los “reinicializará” después de desplazar la fuente. Cualquier píxel se transformará a su nueva ubicación, eso es todo.
    • Errores de redondeo:
      tal vez un píxel 100,100deba desplazarse a 83.276, 124.217. El filtro debe asignar de alguna manera estas coordenadas a valores de píxeles no decimales.
    • Espacios después del desplazamiento:
      tal vez dos píxeles vecinos, digamos en las coordenadas x1:100, x2:101se desplacen a diferentes ubicaciones, tal vez x1:207.4, x2: 211.3. ¿Cómo llenará el filtro el espacio intermedio? Pista: en absoluto. La especificación dice claramente:

    “A veces, las primitivas de filtro dan como resultado píxeles indefinidos. Por ejemplo, la primitiva de filtro feOffsetpuede desplazar una imagen hacia abajo y hacia la derecha, dejando píxeles indefinidos en la parte superior e izquierda. En estos casos, los píxeles no definidos se configuran en negro transparente”. Todo sobre salud dental

    — Módulo de efectos de filtro Nivel 1 , W3C

    Mi arma preferida para solucionar este problema es agregar un ligero desenfoque y luego aumentar el contraste con un archivo feConvolveMatrix. No es perfecto, pero es lo suficientemente bueno para la mayoría de situaciones. Aquí hay una demostración de CodePen :

    Consulte el lápiz [`FeDisplacementMap`: manejo de bordes irregulares](https://codepen.io/smashingmag/pen/PojNWwW) de Dirk Weber .

    ¡No renuncies a Webkit!

    Y luego está WebKit. Es el navegador en el que pasarás la mayor parte del tiempo depurando tus filtros. Desde mi primer artículo sobre el tema, WebKit ha mejorado drásticamente. Una de las partes más divertidas de los filtros SVG es aplicarlos al contenido HTML mediante CSS y, de hecho, Webkit ahora puede aplicar incluso filtros complicados a HTML. Al momento de escribir este artículo, lamentablemente esto todavía no es válido para ningún filtro en feImagesu cadena de renderizado. Webkit no mostrará el elemento en absoluto. A veces ayuda aplicar el filtro a un elemento forgeignelement/que se ha envuelto alrededor de su contenido HTML, pero actualmente hay otro error en WebKit que deja cualquier elemento que tenga un atributo CSS positiono transformsin filtrar, por lo que este método está lejos de ser a prueba de balas. Por el bien de este artículo, evitaremos filtrar elementos HTML.

     

    Una prueba

    Terminaremos este capítulo con una pequeña prueba: ¿cómo esperarías que se vea la imagen desplazada después de que se haya aplicado este degradado map? Piense un momento antes de echar un vistazo a la solución .

    Consulte el bolígrafo [SVG Dispacementquiz](https://codepen.io/smashingmag/pen/wveGgmm) de Dirk Weber .

    Crear mapas de desplazamiento SVG y colocarlos en el filtro

    Queremos poder crear nuestro mapa de desplazamiento de una manera que nos permita modificarlos con JavaScript y CSS dinámicamente y queremos poder animarlos. ¿Qué podría ser más razonable que crear el mapa completamente en SVG?

    Aquí está la receta sobre cómo construir un mapa absoluto en SVG:

    • Crea dos rectas;
    • Aplicar los degradados;
    • Fusionarlos con CSS mix-blend-mode: screen;
    • ¡Estás listo! ( ver en CodePen → )

    Sugerencia: nunca olvide declarar el ancho y el alto en valores de píxeles dentro del SVG. De lo contrario, no aparecerá en Firefox y se mostrará borroso en Chrome.

    Consulte el Pen [Universal SVG Identitymap](https://codepen.io/smashingmag/pen/QWgNdba) de Dirk Weber .

    El mapa SVG está listo, pero incluirlo en un filtro no es tan sencillo como podría pensar. Básicamente, existen tres formas de hacer referencia a un SVG feImage, donde las dos primeras sufren de una desafortunada combinación de problemas de seguridad relacionados con los filtros SVG y el comportamiento defectuoso del navegador :

    1. Como recurso externo: feImage href="mymap.svg" /, un método que no funciona en Webkit/Safari (¿quién lo hubiera adivinado?)
    2. Como fragmento SVG: feImage href="#mymapfragment" /, un método que no funciona en ningún otro lugar excepto en Safari (no lo viste venir, ¿verdad?), lo que nos deja con el único método confiable para varios navegadores...
    3. Como URL de datos:
    feImage href="data:image/svg+xml;charset=utf-8,…"/

    Esto significa que un mapa SVG siempre debe estar codificado en URL de antemano (manualmente o con una herramienta de compilación), o la conversión debe realizarse en el cliente como se demuestra en este ejemplo:

    const feImage = document.querySelector('#myFeImage');const url = feImage.getAttribute('href');fetch(url) .then((response) = { return response.text(); }) .then((svgText) = { const uri = encodeURIComponent(svgText); feImage.setAttribute('href', `data:image/svg+xml;charset=utf-8,${uri}`); }) .catch((error) = { feImage.setAttribute('href', someFallbackURI); });

    Es posible que desees configurarlo modesi CORSnecesitas cargar imágenes desde otro dominio o una CDN:

     

    fetch('mymap.svg', {mode: 'cors'}) .then(…)

    Alternativamente, un fragmento se puede convertir en una URL de datos:

    const myFragmentId = myFeImage.getAttribute('href');const myFragmentHTML = document.getElementById(myFragmentId).outerHTML;const myFragmentDataURL = encodeURIComponent(myFragmentHTML);myFeImage.setAttribute('href', 'data:image/svg+xml;charset=utf-8,${myFragmentDataURL}');

    Sugerencia: cualquier elemento SVG puede ser un fragmento. Pero un fragmento codificado en URL tiene que ser un elemento SVG con un namespaceatributo.

    Para SVG o mapas de bits muy grandes cargados desde otro dominio, un blob puede ser la mejor opción:

    fetch('mymap.svg') .then((response) = { return response.blob(); }) .then((blob) = { const objURL = URL.createObjectURL(blob); feImage.setAttribute('href', objURL); });

    Nota : Este es un truco útil para evitar problemas entre dominios con imágenes en CodePen.

    Construyendo una lupa

    Es hora de poner en práctica nuestros nuevos conocimientos. Esta demostración muestra cómo alterar dinámicamente un mapa de desplazamiento SVG que se ha aplicado a un hermoso panorama de Marte de la NASA con el módulo de aterrizaje Curiosity en el centro.

    JavaScript puede alterar dinámicamente un filtro SVG. Aquí usamos JavaScript para crear una lupa que sigue al mouse del usuario. (Fuente: DirkWeber ) ( Vista previa grande )

    1. Inserte una feImageprimitiva con una referencia a absolutemap;
    2. Cree la "lupa", un SVG que contiene un círculo relleno con un degradado radial, que comienza rgba(127, 0, 127, 0)y termina en rgba(127, 0, 127, 1);
    3. Insertar un segundo feImagecon referencia a la “lupa”;
    4. Fusione ambas imágenes en una primitiva feMerge y haga que el resultado sea feDisplacementMap's in2. Como habrás notado, estamos usando un factor de escala negativo aquí para asegurarnos de que la imagen se reduzca en el exterior y se muestre en su tamaño normal dentro de la “lupa”;
    5. Agregue algo de JavaScript para que los atributos xy yde feImage que hacen referencia a la "lupa" coincidan con la posición del mouse.

    Generando mapas arbitrarios con caminos borrosos

    Una forma totalmente diferente de crear un mapa de desplazamiento SVG es utilizando trazados de bezier borrosos extremadamente gruesos en lugar de gradientes. Aquí tienes una pequeña aplicación que te permite cambiar los puntos de anclaje del Bézier en un mapa creado de esta manera .

    Usar líneas borrosas extremadamente gruesas es un truco para crear mapas de distorsión SVG arbitrarios. Haga clic para abrir la demostración →

    Es posible crear algunos mapas bonitos de esta manera, pero debes tener en cuenta que el desenfoque tiene un impacto en el rendimiento del renderizado. Firefox incluso tiene un umbral de 100 px sobre cuánto desenfoque se permite.

    Animación

    A estas alturas ya hemos aprendido todo sobre los principios fundamentales detrás del filtrado de desplazamiento y cómo crear mapas de desplazamiento en SVG. Estamos listos para la parte divertida: cómo poner todo en marcha.

     

    Los filtros SVG se pueden animar y realizar transiciones. Un gran problema es el hecho de que los valores de filtro que hacen referencia a una URL no se interpolarán, sino que se intercambiarán inmediatamente sin ninguna transición intermedia, un comportamiento que está en línea con la especificación . Puede estar bien en algunas situaciones, pero aburrido la mayor parte del tiempo. ¡Queremos giros, ondas, deformaciones y transformaciones animados!

    Cuando pensamos en mapas animados, lo primero que nos viene a la mente es un gif animado o WebP. Bueno, las imágenes animadas funcionarán de alguna manera en todos los navegadores . Pero el rendimiento varía mucho, desde bastante malo hasta extremadamente malo. Y luego están las limitaciones relacionadas con la plataforma: por ejemplo, Blink no puede aplicar este filtro de desplazamiento animado a elementos que contienen otros elementos animados. Y todavía no hablamos sobre el tamaño del archivo. En su lugar, nos centraremos en las dos técnicas de animación más confiables en mi humilde opinión: SMIL (sí, SMIL todavía existe hoy en día ) y JavaScript.

    Por lo general , un filtro se construirá a partir de una variedad de primitivas diferentes y cada atributo que se agregó a un nodo, como x, y, widtho se puede animar con SMIL.heightscale

    Un efecto de falla simple

    Aquí hay un ejemplo muy simple: hacer uso de una primitiva feFlood animada para crear un efecto de falla básico:

    Vea el lápiz [`deDisplacementMap`: un simple error](https://codepen.io/smashingmag/pen/XWgdpXO) de Dirk Weber .

    • Hay dos feFloodprimitivas en este filtro. El primero cubre toda la fuente y está lleno del mapa neutral rgb(127, 0127)para garantizar que no se produzca ningún desplazamiento aquí.
    • El segundo feFloodse rellena rgb(255, 0, 127)para crear un desplazamiento horizontal y ocupa sólo una fracción de la altura del filtro.
    • Ahora es fácil agregar nodos de animación SMIL para los atributos yy height.
    • Una feMergeprimitiva fusiona ambos feFlood en una salida, proporcionando feDisplacementMaplos in2.

    Un mapa de desplazamiento en movimiento

    feImageLa posición de A es animable. En este ejemplo, creamos una animación de tipo psicodélico alucinante moviendo un mapa deformado que se repite a lo largo del xeje:

    Un patrón repetitivo en movimiento creado con la maravillosa herramienta de deformación de Pixelmators (derecha) da como resultado este efecto de deformación alucinante. ( Vista previa grande )

    Este efecto se puede aprovechar aún más agregando máscaras, desenfoques y algunos colores a la mezcla. Aquí hay una versión mejorada del efecto que utiliza las mismas técnicas, pero de una manera más avanzada.

    La versión mejorada de un mapa de desplazamiento en movimiento. Haga clic para abrir. ( Vista previa grande )

    Es posible que hayas notado que dependiendo de tu navegador y CPU, el rendimiento de estas demostraciones puede variar drásticamente. Es un hecho decepcionante que los filtros SVG todavía no estén optimizados para el rendimiento . Su GPU acelerará algunas primitivas simples (por ejemplo, operaciones de color), pero cuando cree un filtro compuesto encadenando y fusionando muchas primitivas, encontrará rápidamente que la velocidad de cuadros cae y los ventiladores aumentan, especialmente en WebKit y Firefox. Los proveedores de navegadores tienen muchos temas en sus listas de tareas pendientes y los efectos de filtro SVG no tienen la máxima prioridad allí, especialmente porque todavía no se encuentran con tanta frecuencia en la naturaleza.

     

    Esto no significa que no puedas usar filtros SVG animados ahora, pero debes aplicarlos de manera responsable : preferiblemente limita las dimensiones del área de pintura animada al rectángulo más pequeño posible, limita el número de iteraciones al mínimo, tenga cuidado con las operaciones desenfocadas y de combinación y pruebe la prueba en muchos navegadores y dispositivos.

    Un buen caso de uso para los efectos de filtro animados son las animaciones pequeñas y restringidas localmente aplicadas a elementos de la interfaz de usuario. A continuación se muestra una demostración de cómo se puede utilizar el efecto animado feImagede arriba para darle vida a una barra de progreso bastante aburrida:

    Consulte el lápiz [SVG `feDisplacementMap`: Descargar barra de progreso](https://codepen.io/smashingmag/pen/wveGgzr) de Dirk Weber .

    Aquí hay otro ejemplo de un componente de interfaz de usuario, mejorado con un efecto pequeño y simple. Un playbotón que se transforma en una onda sonora animada pulsante:

    Consulte el lápiz [SVG `feDisplacementmap`: Play](https://codepen.io/smashingmag/pen/abwNpmg) de Dirk Weber .

    Esta vez, el mapa de desplazamiento se creó difuminando varias primitivas de feFlood como se ve en la imagen a continuación y luego animando el feDisplacementMapatributo scale.

    En este ejemplo, no utilizamos una imagen sino varias primitivas feFlood de diferente tamaño como mapa de desplazamiento. Como queremos lograr una distorsión vertical, el canal rojo se configuró en un valor neutro (127) y valores variables en el canal azul. En el siguiente paso, las primitivas se fusionan y desdibujan. (Fuente: DirkWeber ) ( Vista previa grande )

    Una transición fallida entre elementos

    • Crea 2 SVG diferentes para cada canal en nuestro mapa. Para cada color, cree una cuadrícula de rectángulos con una intensidad de color que varía aleatoriamente.
    • Crea 2 feImageprimitivas diferentes. Codifique en URL cada SVG y luego colóquelo en el hrefatributo - de cada feImage.
    • Agregue animaciones SMIL para width, heighty yatributos.
    • Inserte un feBlendy combine ambos feImagesen una sola salida.
    • Agrega un poco de color feDropShadowspara lograr un efecto fresco de colores divididos.
    • Licue todo y luego introdúzcalo en un recipiente feDisplacementmap.
    • Anima el scaleatributo con SMIL.
    • Siéntete libre de experimentar cambiando formas (por ejemplo, usa círculos en lugar de rectángulos), aplicando diferentes tiempos, agregando efectos de desenfoque y más.

    Las dos imágenes de la izquierda se aplican a diferentes canales de color para crear este efecto de falla original. Se agregan varios nodos de animación SMIL para yy atributos de cada imagen. (Fuente: DirkWeber ) ( Vista previa grande )widthheight

    Animando el mapa en sí

    Hasta ahora hemos aprendido que animar atributos de filtro con SMIL puede ayudarnos a lograr efectos visuales realmente interesantes. Por otro lado, ya vimos cómo se pueden utiliz






    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Una inmersión profunda en el maravilloso mundo del filtrado de desplazamiento SVG

    Una inmersión profunda en el maravilloso mundo del filtrado de desplazamiento SVG

    Register! Deploy Fast. Deploy Smart Índice Una breve introducción al filtrado por desplazamiento

    programar

    es

    https://pseint.es/static/images/programar-una-inmersion-profunda-en-el-maravilloso-mundo-del-filtrado-de-desplazamiento-svg-1119-0.jpg

    2024-04-04

     

    Una inmersión profunda en el maravilloso mundo del filtrado de desplazamiento SVG
    Una inmersión profunda en el maravilloso mundo del filtrado de desplazamiento SVG

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20