Animar una masa de texto con SVG y recorte de texto

Encontré esta pequeña animación en un boletín de diseño.Desafortunadamente perdí la pista de la fuente, ¡así que avíseme si la reconoce!es por.

En él, un bloque de texto parece aparecer a la vista con un remolino de colores, luego sale de la misma manera en que entró. Es un efecto ingenioso que quería recrear en código.

El enfoque que adopté fue utilizar texto SVG como ruta de recorte para un fondo SVG. Debemos utilizar texto SVG porque CSS actualmente solo nos permite animar el fondo con recorte de texto si el fondo es un GIF, lo cual no vamos a hacer.

Nuestra primera tarea es crear un fondo de diferentes formas SVG. Las manchas ovaladas funcionan bastante bien. Lo que debes asegurarte es hacer coincidir el tamaño de la mesa de trabajo/enlace en cualquier aplicación de ilustración que estés usando con la misma dimensión que viewBoxdeseas que tenga el trabajo final. (En Inkscape, esta opción se encuentra en la sección Escala de Propiedades del documento).

El objetivo es cubrir la mayor parte de la mesa de trabajo con una variedad de formas. Descubre cuáles son mejores si algunas de las formas se superponen.

A continuación, crearemos algo de texto en un grupo , agruparemos los objetos que componen el fondo dentro de un elemento y aplicaremos un CSS clip-pathen ese grupo. En total se parece a esto:

        We are    Creators    +Innovators                

En este punto, todo lo que obtenemos es texto sin formato porque todavía no hemos llegado a la animación de fondo.

eyframes pulse { /* Rotating it along with the scale makes it a little bit more fancy */ 0%, 100% { transform: scale(0) rotate(33deg); } 35%, 65% { transform: scale(1) rotate(0deg); }}

Hasta ahora, todo bien.

transform-box: fill-box;​No es esto.

Podríamos empezar a pintar cosas codificando valores de color usando un editor de texto o de vectores, pero es más divertido colorear las formas dinámicamente. Algo como esto:

// Define an array of colorsconst colors = ['#f5a147','#51cad8','#112b39'];// Select the SVG pathsvar blobs = document.querySelectorAll("path");// Randomly apply colors to the SVG fill propertyblobs.forEach(blob =gt; {  blob.style.fill = colors[Math.floor(Math.random() * colors.length)];});

Para cambiar los valores de texto para cada iteración, primero debemos agregarlos a la ruta de recorte SVG.

  We are  Creators  +Innovators    We are  Movers  +Shakers    We are  Stylish  +Techy

Luego podemos usar CSS o JavaScript para revelar las líneas de texto en nuestro orden preferido. Desafortunadamente, no podemos rodear cada sección del uso de un elemento porque los elementos no funcionan dentro de un archivo clipPath. Para esta publicación, dividiremos las cosas en tres animaciones CSS, una para cada grupo de tres rutas:

/* Selects paths 1-3 */#textClip text:nth-of-type(n + 1):nth-of-type(-n + 3) {  animation: showFirst 12s infinite;}/* Selects paths 4-6 */#textClip text:nth-of-type(n + 4):nth-of-type(-n + 6) {  animation: showSecond 12s infinite;}/* Selects paths 7-9 */#textClip text:nth-of-type(n + 7):nth-of-type(-n + 9) {  animation: showThird 12s infinite;}@keyframes showFirst {  0%, 33% {    opacity: 1;  }  33.0001%, 100% { opacity: 0; }}@keyframes showSecond {  33.0001%, 66% {    opacity: 1;  }  0%, 33%, 66.0001%, 100% { opacity: 0; }}@keyframes showThird {  66.0001%, 99.999% {    opacity: 1;  }  0%, 66%, 100% { opacity: 0; }}

¡Eso funciona!

Como señaló Claus Colloseus en los comentarios, la demostración directamente arriba y abajo no funcionará en Firefox debido a una ambigüedad en la especificación de enmascaramiento CSS: “La geometría sin procesar de cada elemento hijo excluyendo las propiedades de representación como relleno, trazo, el ancho del trazo dentro de un clipPathdefine conceptualmente una máscara de 1 bit… que representa la silueta de los gráficos asociados con ese elemento”. Firefox ignora cualquier cambio de opacidad dentro de un clipPathy por lo tanto muestra los tres a la vez. WebKit, por otro lado, oculta cosas con una opacidad de 0 dentro de un archivo clipPath. No me corresponde a mí decir quién tiene razón en este caso, pero como solución alternativa, deberíamos utilizarlo maskjunto con algunos fillen lugar del clipPathenfoque descrito aquí. Como muestra la demostración actualizada, el enfoque básico es el mismo, pero la animación CSS debe cambiarse ligeramente para adaptarse al funcionamiento de las máscaras.

En este punto, podemos divertirnos un poco. Por ejemplo, podemos intercambiar fondos para obtener un efecto diferente. Utilicé la herramienta estrella de Inkscape con tres o cuatro puntos para generar algunas formas aleatorias (usando el parámetro aleatorio de Inkscape) y luego las coloreé usando una paleta de uno de los muchos generadores de esquemas de color (usé Palx) para producir esta versión:

Los fondos ni siquiera necesitan llenar todo el fondo, depende del efecto que queramos crear. Por ejemplo, podríamos duplicar el texto usando un elemento y rellenar el texto con él, como se ve en esta demostración.

Podríamos mezclarlo rotando las gotas de fondo de esta manera:

Para que los colores cambien con cada nuevo conjunto de palabras, podríamos usar CSS o JavaScript para la animación. Utilicé JavaScript (y moví la animación CSS que ocultaba las líneas de texto en JavaScript):

Para centrar el texto horizontalmente, agregue x="50%" text-anchor="middle"cada elemento (Demo). Centrarlo verticalmente requeriría más cálculos manuales ya que estamos trabajando con un formato de varias líneas.

Una de las cosas buenas de este enfoque es que, dado que utiliza SVG, responde de forma predeterminada.

PD Después de hacer este planteamiento y buscar el autor del GIF original, me encontré con otra recreación de Martí Fenosa haciendo el mismo efecto con un enfoque diferente. ¡Mira también su demostración porque es inteligente!