De belles créations en SVG

 (fuma-nama.vercel.app)
3 points par GN⁺ 2025-04-13 | 2 commentaires | Partager sur WhatsApp
  • Le SVG ne se limite pas à un simple format d’icônes : en combinant mask, path et les animations CSS, on peut créer des effets de fils parcourus par un flux ainsi qu’une mise en surbrillance de TOC
  • Le principe clé de l’implémentation consiste, au lieu d’afficher directement une ligne créée avec line ou path, à l’utiliser comme zone de masque pour limiter la zone d’affichage d’un bloc animé
  • Animated Wires applique mask="url(#...)" à un rect, déplace translateY avec @keyframes, et étend le style visuel avec linearGradient et des variables CSS
  • Le TOC style Clerk de Fumadocs, pour des raisons de compatibilité SSR, rend le contour côté serveur, puis rend côté client le thumb indiquant la position active à l’aide des informations de position du navigateur
  • L’attribut d d’un <path> SVG n’est pas une chaîne générée automatiquement mais une liste de commandes, ce qui permet de reconstruire côté client une image de masque ayant la même forme que le contour de TOC rendu côté serveur

Animated Wires avec des masques SVG

  • Le code d’exemple se base non pas sur du HTML classique, mais sur la syntaxe JSX ou React
  • La ligne de base peut être créée avec line ou path en SVG
    • Dans l’exemple, une line verticale est placée dans viewBox="0 0 50 50"
  • Au lieu de dessiner directement la ligne à l’écran, on l’utilise comme mask pour limiter la zone visible d’une autre forme
    • On applique mask="url(#line)" à un rect, et on place une line blanche à l’intérieur du mask
  • Le mouvement est créé en appliquant une animation CSS au rect
    • @keyframes to-down déplace l’élément de translateY(-10px) jusqu’à translateY(50px)
  • Le style visuel est étendu en combinant une ligne de fond, une ligne de masque plus épaisse, linearGradient et la variable CSS --height
    • @keyframes to-down-2 déplace l’élément de calc(var(--height) * -1) jusqu’à 100%
  • La plupart des effets similaires utilisent une approche qui découpe le bloc animé avec un masque
    • Certains designs peuvent être réalisés dans Figma ou dans d’autres éditeurs SVG
    • La landing page de Unkey est un exemple de cette approche

Le TOC style Clerk de Fumadocs

  • Fumadocs implémente un sommaire (TOC) de style Clerk
  • Pour être compatible avec le SSR, le contour du TOC doit être rendu côté serveur sans JavaScript client
    • Le serveur ne peut pas connaître la position exacte des éléments
    • L’implémentation utilise un positionnement absolute et rend le contour comme plusieurs composants, ensuite raccordés entre eux
  • La partie du contour correspondant à l’élément actif ou au heading visible dans le viewport est affichée sous forme de thumb
    • Comme le thumb doit être animé, il ne suffit pas de simplement changer la couleur du composant de contour
    • Le thumb, qui est l’élément interactif, est rendu côté client
  • Côté client, une carte de masque est construite à partir des informations de position obtenues dans le navigateur
    • Le SVG est utilisé pour créer cette carte de masque
    • L’attribut d d’un <path> SVG est une liste de commandes et permet de rendre une ligne reliant des points
    • La documentation associée est disponible dans SVG Paths sur MDN Web Docs
  • Le SVG ainsi créé a la même forme que le contour original du TOC pré-rendu côté serveur
  • Comme pour Animated Wires, le SVG est inséré comme data URL dans mask-image en CSS, puis un bloc div animé est masqué pour rendre le thumb mis en surbrillance
    • Le div interne utilise des valeurs comme width: 1, height: thumb.height, transform: translateY(${thumb.top}px), transition: "all 500ms", backgroundColor: "white"
  • L’implémentation React.js peut être consultée dans le code source toc-clerk.tsx

À 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 sur Hacker News

  • Même si cela date d’il y a 8 ans, la célèbre présentation de Sarah Drasner, « SVG Can Do That? », continue d’ouvrir les yeux à beaucoup de monde.
    Depuis, CSS a énormément mûri ; pour SVG lui-même, je ne sais pas si c’est autant le cas, mais je la recommande vivement dans tous les cas.
    Slides : https://slides.com/sdrasner/svg-can-do-that
    Vidéo : https://youtu.be/ADXX4fmWHbo?si=6YPZkopyEDc8PSte

    • Le livre est très bon aussi, mais je ne sais pas vraiment si les outils qu’il recommande sont encore pertinents aujourd’hui.

  • Une chose amusante qu’on peut faire avec des fichiers SVG consiste à utiliser les entités d’une DTD inline pour définir des constantes partagées à plusieurs endroits du fichier.
    On en voit un excellent exemple dans le SVG de la page « Squares in Squares » de David Ellsworth.
    Cela ne pose pas de problème dans les principaux navigateurs, mais certains outils comme Inkscape ne parsèrent même pas la DTD et ne développent pas les entités.
    [0] https://kingbird.myphotos.cc/packing/squares_in_squares.html

    • Ici, le terme « entités » désigne en fait le mécanisme SGML/XML qui permet de définir et de réutiliser un contenu syntaxique arbitraire via des références d’entité comme &ref.
      En SVG, la méthode consiste à placer des formes, chemins, etc. sous defs, à leur donner un id, puis à les réutiliser dans le corps du SVG ; la page liée semble aussi utiliser cette approche à l’intérieur de chaque SVG.
      Il ne s’agit pas de partager des carrés entre plusieurs dessins, puisqu’ils arrivent chacun dans un DOM distinct.
      Je me demande pourquoi les premiers concepteurs de SVG ont estimé devoir réimplémenter provisoirement le mécanisme des entités.
      C’est peut-être lié au fait qu’on peut écraser les attributs de rendu au point d’utilisation ; et comme SVG s’inscrivait à l’époque dans le mouvement de transition XHTML/XML du W3C, il n’était sans doute pas encore acquis que les navigateurs ignoreraient les définitions d’entités ou le prologue/DOCTYPE du document.
    • J’ai peut-être raté quelque chose, mais je ne trouve pas sur cette page de !doctype ni de !element qui indiquerait une DTD.
      Si l’on parle simplement de defs et use en SVG, alors ce n’est pas une DTD.
    • On peut aussi extraire d’autres parties d’un SVG existant et les dupliquer pour les utiliser ailleurs dans la page.
      https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
    • Cela peut fonctionner dans les navigateurs, mais beaucoup d’outils SVG ignorent les DTD à cause du risque d’attaque par déni de service.
      Par exemple, l’attaque Billion laughs.
      https://en.wikipedia.org/wiki/Billion_laughs_attack
    • Cette page a mis environ 5 bonnes secondes à se rendre sur un iPhone SE modèle 2022.

  • « A Deep Dive Into SVG Path Commands » de Nanda Syahrasyad est vraiment excellent pour comprendre comment les chemins SVG sont construits.
    L’article a presque 2 ans, mais il m’a ouvert les yeux sur ce que SVG peut faire et sur la manière exacte dont il le fait.
    [0] https://www.nan.fyi/svg-paths

  • J’ai déjà travaillé sur un projet qui faisait ce genre de choses amusantes avec SVG.
    Il était construit avec React, ajoutait des éléments animés à plusieurs illustrations statiques, et les couleurs étaient pilotées depuis le CMS.
    Le front-end appelait une API pour recevoir l’image SVG avec les bonnes couleurs, et l’animation était gérée en masquant et affichant des éléments SVG.
    On peut voir un exemple ici : https://web.archive.org/web/20221020133516im_/https://uncrow...

  • Macromedia Flash me manque vraiment.
    Il n’y a jamais eu de technologie comparable à Flash et au format SWF, qui permettaient de profiter d’innombrables jeux indé et films d’animation sans téléchargement séparé, dès lors qu’on avait Flash Player.
    La barrière à l’entrée était aussi très basse.
    SVG a le potentiel de faire tout ce que faisait SWF, mais il lui manque un éditeur comme Flash et une façon de coder par scènes/objets comme ActionScript.
    Il y a aussi des bizarreries selon les navigateurs, si bien que seuls les SVG simples sont garantis de s’afficher correctement partout.

    • Cela existe encore aujourd’hui sous le nom Adobe Animate, et on peut exporter en HTML.
      Comparer SVG et Flash me semble d’emblée revenir à comparer des pommes et des oranges.
      Le format SVG n’a pas besoin de faire directement tout ce que faisait Flash ; il peut s’appuyer sur d’autres technologies dans le navigateur.
    • Je pense que WebAssembly pourrait être un point de comparaison.
      Par exemple, Unity, Unreal et Godot peuvent être compilés assez facilement pour le navigateur.
      Le problème est que ces applis deviennent assez volumineuses et se retrouvent souvent non pas dans quelques Mo, mais plutôt dans des dizaines de Mo.
    • Il semble y avoir une opportunité de startup pour recréer cela.

  • Les SVG animés complexes sont amusants à bricoler, mais quand on plonge profondément dans SMIL, Safari peut bloquer un téléphone parce qu’il manque un zéro devant une valeur en virgule flottante, ou produire toutes sortes de bizarreries.

  • Si vous créez dynamiquement et de façon créative du SVG avec JavaScript et que vous cherchez un emploi, vous pouvez m’envoyer un DM.

  • Je me demande s’il existe une extension SVG permettant de contrôler la densité du trait.
    J’ai un traceur qui peut lever et abaisser le stylo, et il est piloté par des fichiers SVG.
    J’aimerais pouvoir abaisser le stylo pendant le tracé d’une ligne, comme on le fait souvent en écriture manuscrite.
    Pour référence, c’est un Axidraw d’Evil Mad Scientist Labs ; c’est un excellent appareil et les gens qui le fabriquent sont formidables.

    • Stocker des instructions personnalisées dans un fichier SVG normal et les interpréter dans le lecteur est assez simple.
      Par exemple, j’utilise un découpeur laser/traceur polyvalent : l’opacité sert à la puissance du laser, l’épaisseur du trait à la vitesse de déplacement, le canal vert au nombre de répétitions, le canal bleu à la hauteur de l’axe Z, et le canal rouge à abaisser le stylo ou éteindre le laser, etc.
    • Ce genre de chose serait probablement mieux géré avec du G-code.
      Je travaille sur ce type de tâche ici.
      https://github.com/WillAdams/gcodepreview

  • Tant que je n’avais pas essayé de créer moi-même des icônes ou des logos, je trouvais toujours étrange qu’il y ait des transformations (transform) dans les SVG.
    Il est difficile d’aligner correctement les courbes.
    Une fois mon deuxième logo terminé, il m’a semblé trop plat et j’ai voulu l’incliner de 10° ; à l’idée de réécrire toutes ces lignes et courbes, la rotation m’a paru un bien meilleur choix.
    Heureusement, placé à côté du texte, il faisait bizarre, ce qui m’a amené à modifier encore plusieurs fois l’angle pour que le crénage paraisse correct.

  • J’ai récemment créé un petit jeu pour le plaisir, et le rendu utilise surtout des tuiles SVG animées en CSS : https://pipeline-panic.vercel.app/