Resolvendo um desafio de programação curva com gradientes SVG

No mundo da programação, tarefas aparentemente simples podem se transformar em desafios complexos. Recentemente, encontramos um desses desafios ao tentar transformar um projeto Figma em código. A tarefa envolvia a criação de um mostrador radial com um gradiente linear – um requisito aparentemente simples que logo se mostrou mais complexo do que o esperado.

Nesta postagem, vamos mergulhar no mundo dos gradientes SVG e explorar a solução que criamos para enfrentar os desafios que surgiram e discutir por que, às vezes, receber desafios complexos de engenharia como esse pode ser altamente recompensador.

Jogar uma bola curva

A princípio, parecia simples. Deve haver uma biblioteca que possamos usar para criar o mostrador e aplicar um gradiente linear a ele. Quão difícil poderia ser?

E depois de uma rápida pesquisa em bibliotecas investigativas, como High Charts e FusionCharts , encontramos bibliotecas capazes de criar mostradores radiais, bem como gerar gradientes lineares usando SVG. No entanto, a verdadeira complexidade surgiu ao tentar combinar esses dois elementos perfeitamente. O obstáculo estava na natureza dos gradientes lineares definidos no SVG. Por padrão, os gradientes lineares transitam entre as cores ao longo de uma linha reta. Quando aplicado ao traçado de um caminho circular, a direção do gradiente permanece linear, desconsiderando a curva do círculo.

Conseqüentemente, se aplicássemos um gradiente linear a um mostrador circular completo criado com uma única curva, o gradiente seguiria um caminho reto em vez do caminho radial desejado ao longo do mostrador. Isso não atingiria o gradiente curvo que estávamos procurando - então estávamos de volta à prancheta.

Desfazendo o problema

Em vez disso, para obter o efeito de um gradiente de transição suave envolvendo o mostrador radial, percebemos que precisávamos quebrar o mostrador em várias seções e aplicar gradientes distintos a cada seção.

Em nosso exemplo, dividimos o mostrador em quatro seções; cada um atribuiu seu próprio gradiente linear. Ao selecionar cuidadosamente as cores para as paradas de gradiente, conseguimos criar uma aparência de gradiente contínuo ao redor do mostrador.

Aqui, começamos a ver como podemos construir um mostrador radial em SVG. O atributo “d” define um caminho a ser traçado. Neste caso, especifica o caminho para o primeiro quarto do nosso mostrador radial.

O 'M' significa “Move To” e define o ponto inicial do caminho nas coordenadas (150,10). O comando 'a' cria um arco elíptico. Este comando arc tem vários parâmetros. Os dois primeiros parâmetros, '120 120', definem os raios x e y da elipse usados para desenhar o arco. O '0 0 1' define a rotação do eixo x (que é zero), sinalizador de arco grande e sinalizador de varredura. O final '103.9230 60' define o ponto final do caminho, que completa nosso arco. Em seguida, aplicamos o gradiente com o atributo Stroke no caminho.

Este processo é repetido para cada quarto do mostrador. Cada quarto tem seu próprio caminho e seu próprio gradiente. Isso dá o efeito de um único gradiente de transição suave circulando ao redor do mostrador.

Preenchimento de Gradiente Dinâmico

Para preencher dinamicamente o gradiente ao longo do dial, aproveitamos as propriedades stroke-dashoffset e stroke-dasharray do caminho SVG. Essa técnica é comumente empregada ao criar mostradores radiais. CSS tricks tem um artigo detalhado sobre a abordagem: Animação de linha SVG funciona .

Ao definir o traço-dasharray igual ao comprimento do caminho, estabelecemos um padrão de traços e intervalos semelhantes a uma linha pontilhada circundando o círculo. A propriedade traço-dashoffset determinou o ponto inicial do padrão de traço, animando efetivamente o movimento do traço. Ao animar o deslocamento do traço do início do caminho até o comprimento do caminho, o traço parecia “viajar” ao redor do círculo.

Abraçando a complexidade (às vezes)

Embora projetos complexos possam se traduzir em desafios técnicos difíceis, eles também servem como oportunidades para os programadores aprimorarem suas habilidades de resolução de problemas. Isso é parte integrante do que mantém a programação interessante, pelo menos para mim.

As complexidades que enfrentamos na programação geralmente refletem a complexidade dos designs com os quais estamos trabalhando. Nosso design Figma, apresentando um mostrador radial com um gradiente linear, serve como um ótimo exemplo de como um elemento de design visualmente atraente pode apresentar desafios técnicos significativos.

É fácil para os programadores tentar instintivamente trabalhar com designers para chegar a um acordo em termos de especificações de design. Na verdade, essa costuma ser a abordagem correta. Mas, às vezes, se você quiser que seus designs se destaquem da multidão, precisará ultrapassar sua zona de conforto e criar maneiras criativas de resolver seus problemas.

Outra maneira de colocar isso é que, embora as complexidades do design possam se traduzir em desafios técnicos, elas também servem como oportunidades para os programadores aprimorarem sua habilidade mais valiosa, sua capacidade de resolver problemas.

Publicado também aqui .