Coisas incríveis feitas com SVG
(fuma-nama.vercel.app)- SVG é uma ferramenta poderosa para representar gráficos vetoriais na web
- É possível tornar elementos SVG mais atraentes com animação
- É possível usar máscaras para destacar ou ocultar partes específicas de elementos SVG
- Com renderização no lado do servidor, é possível implementar um TOC sem JavaScript no cliente
- A combinação de CSS e SVG permite criar elementos interativos
Animação com SVG
- SVG é usado para representar gráficos vetoriais na web
- Inclui código de exemplo escrito em JSX (React)
- É possível criar linhas com
lineoupathe usá-las como máscara para adicionar animações - É possível definir animações com
@keyframese alterar a posição dos elementos com a propriedadetransform - Partes desenhadas no Figma ou em outros editores de SVG podem ser aproveitadas para tratar blocos animados como máscara
Sumário no estilo Clerk
- Um sumário no estilo Clerk foi implementado no Fumadocs
- O sumário é renderizado no servidor para manter compatibilidade com SSR sem JavaScript no cliente
- O sumário é renderizado em um ambiente de servidor, onde a posição exata dos elementos é desconhecida, usando posicionamento absoluto
- Foi adicionada uma parte animada chamada thumb para destacar o item ativo
- As informações de posição renderizadas no cliente são usadas para compor um "mapa de máscara" com SVG
- A propriedade
mask-imageé usada para mascarar um blocodivanimado e renderizar a parte destacada do sumário
Inspirado pelo Clerk, o sumário de um site de documentação foi implementado de forma mais interessante.
2 comentários
Ficou legal, mas destacar com certeza apenas o item atual acaba chamando mais a atenção.
Comentários do Hacker News
A apresentação "SVG Can Do That?", de Sarah Drasner, ainda surpreende muita gente mesmo depois de 8 anos. O CSS evoluiu bastante desde então, mas há menos convicção sobre o próprio SVG. De qualquer forma, é fortemente recomendada
Uma das coisas divertidas que dá para fazer com arquivos SVG é usar entidades em um DTD inline para definir constantes que podem ser compartilhadas em várias partes do arquivo. Há um bom exemplo na página "Squares in Squares", de David Ellsworth
SVGs com animações complexas são divertidos, mas difíceis por causa da complexidade do SMIL e de problemas como o Safari quebrar quando não há um 0 antes do ponto flutuante
"A Deep Dive Into SVG Path Commands", de Nanda Syahrasyad, é muito útil para entender como os caminhos SVG são construídos. É material de quase 2 anos atrás, mas abre os olhos para tudo o que SVG pode fazer e como fazer
Se alguém está usando JS de forma criativa para gerar SVG dinamicamente, gostaria que me mandasse uma DM
Fiz um trabalho interessante com SVG em um projeto construído com React. Havia uma série de ilustrações estáticas e elementos animados, e as cores eram controladas pelo CMS
SVG+CSS é muito poderoso. Um recurso simples de que gosto é criar diagramas que respeitam o modo escuro/claro sem JavaScript. Diagrama de exemplo: blog.davidv.dev/posts/ipvs-lb/
Fico me perguntando se existe alguma extensão de SVG que permita densidade de linhas. Tenho um plotter em que posso levantar e abaixar a caneta, e ele é acionado a partir de arquivos SVG. Seria bom poder abaixar a caneta enquanto ela desenha a linha
Post muito legal, e o design do site também é ótimo. O SVG existe há bastante tempo, mas ainda parece que seu potencial não foi totalmente explorado. Não consigo pensar em outro elemento que consiga encapsular HTML, CSS e JS de forma funcional. Dá para usá-lo com facilidade basicamente como se fosse um documento HTML completamente diferente
SVG parece uma área muito pouco explorada e subutilizada. Dá para fazer muita coisa, dependendo da imaginação. Mas talvez seja preciso fazer muitas coisas de maneira bem "hardcore", então depende do caso de uso