Cosas geniales hechas con SVG
(fuma-nama.vercel.app)- SVG es una herramienta poderosa para representar gráficos vectoriales en la web
- Con animaciones, los elementos SVG pueden volverse más atractivos
- Se pueden usar máscaras para resaltar u ocultar partes específicas de los elementos SVG
- Con renderizado del lado del servidor se puede implementar una TOC sin JavaScript del lado del cliente
- Al combinar CSS y SVG se pueden crear elementos interactivos
Animación SVG
- SVG se usa para representar gráficos vectoriales en la web
- Se incluye código de ejemplo escrito en JSX (React)
- Se puede crear una línea con
lineopathy usarla como máscara para agregar animación - Se puede definir la animación con
@keyframesy cambiar la posición de los elementos mediante la propiedadtransform - Se pueden aprovechar partes diseñadas en Figma u otros editores SVG para tratarlas como bloques animados en la máscara
Tabla de contenidos estilo Clerk
- Se implementó una tabla de contenidos estilo Clerk en Fumadocs
- La tabla de contenidos se renderiza en el servidor para que sea compatible con SSR sin JavaScript del lado del cliente
- Se renderiza la tabla de contenidos en un entorno de servidor donde no se puede conocer la posición exacta de los elementos usando posicionamiento absoluto
- Se agregó una parte animada llamada thumb para resaltar el elemento activo
- Usando la información de posición renderizada en el cliente, se construye un "mapa de máscaras" con SVG
- Con la propiedad
mask-image, se enmascara un bloquedivanimado para renderizar la parte resaltada de la tabla de contenidos
Inspirado en Clerk, se implementó una tabla de contenidos más interesante para un sitio de documentación.
2 comentarios
Se ve genial, pero simplemente destacar con claridad solo el elemento actual llama más la atención.
Opiniones de Hacker News
La charla "SVG Can Do That?" de Sarah Drasner, incluso 8 años después, sigue sorprendiendo a mucha gente. CSS ha avanzado mucho desde entonces, pero hay menos certeza sobre el propio SVG. De todos modos, muy recomendada
Una de las cosas interesantes que se pueden hacer con archivos SVG es usar entidades en un DTD en línea para definir constantes que pueden compartirse en varias partes del archivo. Se puede ver un buen ejemplo en la página "Squares in Squares" de David Ellsworth
Los SVG con animaciones complejas son divertidos, pero resultan difíciles por la complejidad de SMIL y problemas como que Safari falle cuando no hay un 0 delante de un número de punto flotante
"A Deep Dive Into SVG Path Commands" de Nanda Syahrasyad es muy útil para entender cómo se construyen las rutas SVG. Aunque es material de hace casi 2 años, te abre los ojos a todo lo que SVG puede hacer y cómo hacerlo
Si alguien está usando JS de forma creativa para generar SVG dinámicamente, me gustaría que me enviara un DM
Hice un trabajo interesante con SVG en un proyecto construido con React. Había una serie de ilustraciones estáticas y elementos animados, y los colores se controlaban desde un CMS
SVG+CSS es muy potente. Una función simple que me gusta es crear diagramas que respeten el modo oscuro/claro sin JavaScript. Diagrama de ejemplo: blog.davidv.dev/posts/ipvs-lb/
Me pregunto si existe una extensión de SVG que permita densidad de líneas. Tengo un plotter que puede levantar y bajar la pluma, y funciona a partir de archivos SVG. Sería genial poder bajar la pluma mientras dibuja las líneas
Gran publicación, y el diseño del sitio también está muy bueno. SVG existe desde hace mucho tiempo, pero da la impresión de que su potencial todavía no se ha aprovechado por completo. No se me ocurre otro elemento que pueda encapsular HTML, CSS y JS de forma funcional. Básicamente se puede usar con facilidad como si fuera un documento HTML completamente distinto
SVG se siente como un terreno muy poco explorado y poco utilizado. Se pueden hacer muchas cosas dependiendo de la imaginación. Pero también puede requerir hacer muchas cosas de forma bastante "hardcore", así que depende del caso de uso