La maravillosa empresa para la que trabajo, Payoneer, tiene un nuevo logotipo y mi trabajo consistía en recrearlo y animarlo para un componente cargador en nuestra aplicación. Explicaré exactamente cómo lo hice, compartiré los problemas que tuve y lo guiaré a través de la solución que se me ocurrió. Y, como beneficio adicional, veremos cómo animarlo.
Pero primero, supongo que algunos de ustedes se estarán preguntando… ¿Recrearlo? ¿Por qué?
La agencia de branding que diseñó nuestro logotipo nos envió un conjunto completo de recursos clasificados por temas. Vienen en todos los tamaños y en todos los formatos disponibles. Teníamos todo, incluidos los SVG, para el logotipo y la animación del cargador. Pero no pudimos usarlos.
Este es el por qué. Echemos un vistazo al logotipo:
Llamamos al nuevo logotipo “The Halo”.
El logo es un anillo con un degradado cónico que consta de cinco colores, y… eso es todo. El problema es que SVG no admite degradados en ángulo (por ahora, al menos), por lo que cuando exportamos un diseño que tiene un degradado cónico como SVG, necesitamos algún tipo de truco para obtener el resultado deseado.
Ahora bien, no soy un experto en lo que respecta a trabajar con software de gráficos vectoriales, por lo que podría haber una forma diferente (y tal vez mejor) de hacerlo, pero sé que la forma más común de exportar gradientes cónicos a SVG es convertir el elemento degradado a una imagen e inserte esa imagen en el SVG como una cadena base64. Eso también es lo que recibimos de la agencia de marca, y confío en que sabrán cuál es la mejor manera de exportar un SVG.
Pero, dado que el archivo SVG final ahora contiene una cadena PNG base64, el tamaño del archivo saltó a casi 1 MB, lo que podría no ser un desastre total, pero es mucho más alto que los 2 KB que debería ser. Multiplique esa diferencia por tres temas (variaciones sin texto, con texto claro y con texto oscuro), y estamos viendo 3 MB de imágenes en lugar de 3 KB de código. Esa es una gran diferencia, así que decidimos recrear el logo con SVG.
¡¿Pero cómo?!
Aunque CSS es totalmente compatible con los gradientes cónicos, SVG no lo es. Entonces, la primera pregunta que me hice fue cómo crear un degradado cónico en SVG. En realidad, le pregunté a Google. Y lo que encontré fue un montón de formas geniales, únicas y creativas de agregar degradados cónicos a SVG, la mayoría de ellos basados en algún tipo de clip-path
implementación. Primero creé un corto <path>
que representa la forma del anillo y lo usó como clip-path
en un simple <rect>
elemento.
A continuación, necesitaba llenar el <rect>
con degradados cónicos, pero primero tenía que encontrar todas las paradas de color correctas para recrear el look. Eso tomó un tiempo, pero después de muchos ajustes, obtuve un resultado con el que estoy feliz:
div.gradient {
background-image: conic-gradient(from 270deg, #ff4800 10%, #dfd902 35%, #20dc68, #0092f4, #da54d8 72% 75%, #ff4800 95%);
}
El último paso fue reemplazar el <rect>
con algo más que admita gradientes cónicos, y la forma más sencilla que he encontrado es usar un SVG <foreignObject>
elemento con un regular <div>
en su interior, y un conic-gradient
como un background-image
. Entonces todo lo que tenía que hacer era configurar el clip-path
sobre el <foreignObject>
elemento, y eso es todo.
Entonces, así es como usé un degradado cónico en un SVG para mantener el diseño totalmente vectorial y escalable con menos de 20 líneas de código y menos de 2 KB de tamaño de archivo.
Pero esa fue la parte fácil. Ahora hablemos de animación.
el cargador
Nuestra aplicación muestra una animación de carga cada vez que un usuario inicia sesión. Habíamos estado usando un archivo GIF para ello, pero tenía la intención de actualizarlo a una animación CSS/SVG pura durante meses. Los beneficios son obvios: un renderizado más rápido significa una experiencia de carga más fluida, y un tamaño de archivo más pequeño significa una carga aún más rápida. Simplemente obtenemos más por menos, lo que es especialmente ideal para una animación de carga.
Aquí está la animación que estaba buscando:
Este tipo de animación es bastante fácil con SVG. Todo lo que realmente necesitamos es un truco usando stroke-dasharray
y stroke-dashoffset
. Ese fue mi punto de partida. Creé un nuevo <path>
en el centro del ring, quitó el fill
, añadió un stroke
con la derecha stroke-width
, y luego trabajó en la animación.
Me tomó un tiempo jugar para obtener el movimiento tal como lo querían los diseñadores. Terminé usando dos animaciones, en realidad: una controla el stroke-dashoffset
, y el segundo gira todo el <path>
una vuelta completa.
Pero, desde el clip-path
propiedad se refiere a la fill
de la forma, animar el trazo significaba que tenía que resolver uno de dos problemas: podía encontrar una forma diferente de animar el movimiento o encontrar una forma diferente de agregar los colores al trazo.
Así que volví a Google y a todas las ideas creativas que encontré antes, pero la mayoría de ellas prácticamente no se podían animar, así que comencé a buscar una buena no-animable.clip-path
manera de agregar colores al trazo. Observé algunas soluciones “listas para usar”, verifiqué el enmascaramiento y terminé con la solución perfecta más simple:
.logoBlend {
mix-blend-mode: lighten;
}
A lighten
el modo de mezcla analiza los colores RGB de cada píxel del elemento renderizado, lo compara con el valor RGB del píxel de fondo que está detrás y conserva el valor más alto. Eso significa que las partes del elemento que son blancas permanecerán blancas y las partes oscuras obtendrán los valores del píxel de fondo.
Al agregar un blanco <rect>
al camino negro, esencialmente bloqueé todo lo que estaba detrás de él. Mientras tanto, todo lo que hay detrás del trazo negro animado es visible. Eso significaba que podía traer de vuelta el <foreignObject>
con el conic-gradient
, ponerlo detrás de la mix-blend-mode
y dale una animación de rotación simple para que coincida con el diseño.
Tenga en cuenta que el resultado final de este método tendrá un fondo blanco, no transparente como el logotipo estático, pero me pareció bien. Si es necesario, puede darle la vuelta, usar un fondo negro y ocultar las partes claras de su elemento configurando el modo de fusión en darken
.
Toques finales
Ya había terminado bastante en este punto, y bastante feliz con el resultado final. Pero un par de días después, recibí un archivo JSON basado en Lottie de la agencia de marcas con exactamente la misma animación. En retrospectiva, tal vez podría ahorrarme mi trabajo y usar su archivo, hubiera funcionado bien. Incluso el tamaño del archivo era sorprendentemente pequeño, pero aun así era 8✕ más grande que el SVG, así que terminamos usando mi animación de todos modos.
Pero, eso significaba que tenía una última cosa que hacer. La animación de Lottie tenía una “animación de inicio” donde el pequeño punto naranja crece a la vista, y también tuve que agregarlo a mi animación. Agregué un breve retraso de 0,5 s a las tres animaciones, así como una animación de escala al principio.
Haga clic en “Reejecutar” en el Pen para ver la animación nuevamente desde el punto inicial.
¡Eso es! Ahora mi empresa tiene un nuevo logotipo y un conjunto de activos ligeros y totalmente escalables para usar en nuestras plataformas web.
Y para aquellos de ustedes que se preguntan, sí, terminé creando un pequeño y agradable componente Logo en React ya que lo estamos usando. Incluso representa el SVG de acuerdo con un tema que se le pasó como accesorio, lo que facilita la implementación y mantiene todos los cambios futuros en una sola ubicación.
¿Y usted?
¿Crees que hay una mejor manera de obtener el mismo resultado? ¡Comparte tu opinión en los comentarios! Y gracias por leer.