Descobri que 98% de todo o meu uso de SVG vem de arquivos SVG pré-criados ou arte vetorial em algum software de design que acabo por exportar como SVG. Não é com muita frequência que manipulo manualmente as coordenadas das coisas no código SVG. Ei, eu até tenho um livro sobre tudo isso.
Mas de vez em quando, é apropriado e talvez até um pouco divertido. Nesse caso, eu queria traçar uma linha bem específica com algumas curvas suaves. Com um pouco de conhecimento da sintaxe de caminho do SVG (a mais estranha, mas a mais poderosa das ferramentas de desenho do SVG), podemos fazer isso sem muito trabalho.
Demonstração que reproduzimos no vídeo:
Veja a Pen
KOvPaa de Chris Coyier (@chriscoyier)
no CodePen.
Ideia original:
Veja o Pen
Lighted Path de Chris Coyier (@chriscoyier)
no CodePen.
Lembre-se de que o que não fizemos foi ajustar o SVG de forma que os cantos arredondados permanecessem em uma boa proporção, enquanto o resto do SVG era flexível e poderia preencher o espaço vertical e horizontal. Isso é possível, é apenas mais complicado e teremos que abordá-lo em outra ocasião.