De belles créations en SVG

 (fuma-nama.vercel.app)
3 points par GN⁺ 2025-04-13 | 2 commentaires | Partager sur WhatsApp
  • SVG est un outil puissant pour représenter des graphiques vectoriels sur le web
  • Les animations peuvent rendre les éléments SVG encore plus attrayants
  • Les masques permettent de mettre en valeur ou de masquer certaines parties d’un élément SVG
  • Le server-side rendering permet d’implémenter une table des matières sans JavaScript côté client
  • La combinaison de CSS et de SVG permet de créer des éléments interactifs

Animations SVG

  • SVG sert à afficher des graphiques vectoriels sur le web
  • Un exemple de code écrit en JSX (React) est inclus
  • Il est possible de créer des lignes avec line ou path, puis de les utiliser comme masques pour ajouter des animations
  • Les animations peuvent être définies avec @keyframes, et la position des éléments peut être modifiée via la propriété transform
  • Les parties conçues dans Figma ou dans un autre éditeur SVG peuvent être réutilisées pour transformer des blocs d’animation en masques

Table des matières style Clerk

  • Une table des matières au style de Clerk est implémentée dans Fumadocs
  • La table des matières est rendue côté serveur afin de rester compatible avec le SSR sans JavaScript côté client
  • La table des matières est rendue dans un environnement serveur où la position exacte des éléments est inconnue, en utilisant un positionnement absolu
  • Une partie animée appelée thumb est ajoutée pour mettre en évidence l’élément actif
  • Les informations de position rendues côté client sont exploitées pour construire une « carte de masque » en SVG
  • La propriété mask-image est utilisée pour masquer un bloc div animé et afficher la partie mise en valeur de la table des matières

Inspirée par Clerk, cette implémentation rend la table des matières d’un site de documentation plus intéressante.

À lire aussi

2 commentaires

 
ndrgrd 2025-04-14

C’est joli, mais au final, mettre clairement en avant uniquement l’élément actuel attire davantage l’œil.
 
GN⁺ 2025-04-13
Avis Hacker News

  • La présentation de Sarah Drasner, « SVG Can Do That? », continue d’étonner beaucoup de monde même 8 ans plus tard. CSS a beaucoup évolué depuis, mais on est moins convaincu par SVG lui-même. Quoi qu’il en soit, c’est fortement recommandé

  • L’une des choses amusantes qu’on peut faire avec un fichier SVG consiste à utiliser des entités dans une DTD inline pour définir des constantes partageables à plusieurs endroits du fichier. On peut en voir un bon exemple sur la page « Squares in Squares » de David Ellsworth

  • Les SVG animés complexes sont amusants, mais difficiles à cause de la complexité de SMIL et de problèmes comme Safari qui casse quand il manque un 0 devant un nombre à virgule flottante

  • « A Deep Dive Into SVG Path Commands » de Nanda Syahrasyad est très utile pour comprendre comment les chemins SVG sont construits. Le contenu date d’il y a presque 2 ans, mais il ouvre vraiment les yeux sur tout ce que SVG peut faire et sur la manière de le faire

  • Si quelqu’un utilise JS de manière créative pour générer dynamiquement du SVG, qu’il m’envoie un DM

  • J’ai fait des choses intéressantes avec SVG dans un projet construit avec React. Il y avait une série d’illustrations statiques et des éléments animés, et les couleurs étaient contrôlées via un CMS

  • SVG+CSS est très puissant. Une fonctionnalité simple que j’aime beaucoup consiste à créer des diagrammes qui respectent le mode sombre/clair sans JavaScript. Exemple de diagramme : blog.davidv.dev/posts/ipvs-lb/

  • Je me demande s’il existe une extension SVG qui permette la densité de trait. J’ai un traceur capable de lever et d’abaisser le stylo, piloté à partir de fichiers SVG. Ce serait bien de pouvoir abaisser le stylo pendant qu’il trace la ligne

    • Ah, c’est un Axidraw d’Evil Mad Scientist Labs. C’est un excellent appareil, et ce sont des gens formidables

  • Super publication, et le design du site est très réussi aussi. SVG existe depuis longtemps, mais on a l’impression que son potentiel est encore loin d’avoir été pleinement exploité. Je ne vois pas d’autre élément capable d’encapsuler fonctionnellement HTML, CSS et JS. On peut pratiquement l’utiliser aussi facilement qu’un document HTML totalement distinct

  • SVG donne l’impression d’un territoire encore très peu exploré et sous-utilisé. On peut faire énormément de choses selon son imagination. Cela dit, il faut parfois les faire de manière assez « hardcore », donc cela dépend des cas d’usage