Resolviendo un desafío de programación curva con gradientes SVG

En el mundo de la programación, las tareas aparentemente sencillas pueden convertirse en desafíos complejos. Recientemente, nos encontramos con uno de esos desafíos al intentar transformar un diseño de Figma en código. La tarea en cuestión consistía en crear una esfera radial con un gradiente lineal, un requisito aparentemente simple que pronto resultó ser más complejo de lo esperado.

En esta publicación, profundizaremos en el mundo de los gradientes SVG y exploraremos la solución que ideamos para abordar los desafíos que surgieron y argumentaremos por qué, a veces, enfrentarse a desafíos de ingeniería complejos como este puede ser muy gratificante.

Lanzó una bola curva

Al principio, parecía simple. Debe haber una biblioteca que podamos usar para crear el dial y aplicarle un degradado lineal. ¿Qué tan difícil podría ser?

Y después de una búsqueda rápida de bibliotecas de investigación como High Charts y FusionCharts , encontramos bibliotecas capaces de crear diales radiales y generar gradientes lineales usando SVG. Sin embargo, la verdadera complejidad surgió al intentar combinar estos dos elementos a la perfección. El obstáculo residía en la naturaleza de los gradientes lineales definidos en SVG. De forma predeterminada, los degradados lineales hacen la transición entre los colores a lo largo de una línea recta. Cuando se aplica al trazo de una ruta circular, la dirección del degradado permanece lineal, sin tener en cuenta la curva del círculo.

En consecuencia, si tuviéramos que aplicar un degradado lineal a un dial circular completo creado con una sola curva, el degradado seguiría una trayectoria recta en lugar de la trayectoria radial deseada a lo largo del dial. Eso no lograría el degradado curvo que buscábamos, así que volvimos a la mesa de dibujo.

Rompiendo el problema

En cambio, para lograr el efecto de un gradiente de transición suave que rodea el dial radial, nos dimos cuenta de que necesitábamos dividir el dial en varias secciones y aplicar gradientes distintos a cada sección.

En nuestro ejemplo, dividimos la esfera en cuatro secciones; cada uno asignó su propio gradiente lineal. Al seleccionar cuidadosamente los colores para las paradas de degradado, pudimos crear una apariencia de degradado continuo alrededor de la esfera.

Aquí, comenzamos a ver cómo podemos construir un dial radial en SVG. El atributo “d” define un camino a dibujar. En este caso, especifica la ruta del primer cuarto de nuestro dial radial.

La 'M' significa "Mover a" y establece el punto inicial de la ruta en las coordenadas (150,10). El comando 'a' crea un arco elíptico. Este comando de arco tiene varios parámetros. Los dos primeros parámetros, '120 120', establecen el radio xey de la elipse utilizada para dibujar el arco. El '0 0 1' define la rotación del eje x (que es cero), la bandera de arco grande y la bandera de barrido. El '103.9230 60' final establece el punto final del camino, que completa nuestro arco. Luego aplicamos el degradado con el atributo de trazo en la ruta.

Este proceso se repite para cada cuarto de la esfera. Cada cuarto tiene su propio camino y su propio gradiente. Esto da el efecto de un único gradiente de transición suave que circula alrededor de la esfera.

Relleno de degradado dinámico

Para llenar dinámicamente el gradiente a lo largo del dial, aprovechamos las propiedades de trazo-desplazamiento y trazo-rayo de la ruta SVG. Esta técnica se emplea comúnmente cuando se crean esferas radiales. Los trucos de CSS tienen un artículo detallado sobre el enfoque: la animación de línea SVG funciona .

Al establecer el trazo-raya horizontal igual a la longitud de la ruta, establecimos un patrón de rayas y espacios que se asemejan a una línea punteada que rodea el círculo. La propiedad stroke-dashoffset determinaba el punto de inicio del patrón de guiones, animando efectivamente el movimiento del trazo. Al animar el desplazamiento de trazo y trazo desde el inicio del camino hasta la longitud del camino, el trazo parecía "viajar" alrededor del círculo.

Aceptar la complejidad (a veces)

Si bien los diseños complejos pueden traducirse en desafíos técnicos difíciles, también sirven como oportunidades para que los programadores perfeccionen sus habilidades de resolución de problemas. Esta es una parte integral de lo que hace que la programación sea interesante, al menos para mí.

Las complejidades a las que nos enfrentamos en la programación a menudo reflejan la complejidad de los diseños con los que trabajamos. Nuestro diseño Figma, que presenta una esfera radial con un degradado lineal, sirve como un excelente ejemplo de cómo un elemento de diseño visualmente atractivo puede presentar importantes desafíos técnicos.

Es fácil como programadores intentar instintivamente y trabajar con diseñadores para llegar a un compromiso en términos de especificaciones de diseño. De hecho, ese es a menudo el enfoque correcto. Pero a veces, si desea que sus diseños se destaquen entre la multitud, deberá superar su zona de confort y encontrar formas creativas de resolver sus problemas.

Otra forma de expresar esto es que, si bien las complejidades del diseño pueden traducirse en desafíos técnicos, también sirven como oportunidades para que los programadores perfeccionen su habilidad más valiosa, su capacidad para resolver problemas.

También publicado aquí .