Connected Nodes

Cet effet est gratuit — la catégorie Navigation en contient 36 au total, dont 4 gratuits. Effect.Labs regroupe 811 effets vanilla. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit

Exemples d'usage

API

DB

Cache

Queue

4 services 4 connexions actives Faites glisser un nœud pour explorer

① Dashboard — Topologie de microservices

QuandDans un panneau de monitoring ou d'architecture système pour visualiser les dépendances entre services (API, base de données, cache, file de messages) sans charger une librairie de graphe tierce.

PourquoiLa structure SVG + CSS suffit pour un graphe statique ; le drag JS ajoute l'interactivité d'exploration à la demande. Fond sombre et couleurs par domaine encodent le type de service immédiatement.

RéglagesPositions initiales CSS conservées, stroke-width: 2, stroke-dasharray: 6 4, nœuds 48 px, palette par défaut (indigo API, rose DB, vert Cache, ambre Queue).

Idée

Dev

Design

Prod

② Éditeur de contenu — Carte conceptuelle d'article

QuandDans un outil d'écriture ou un wiki pour visualiser la structure d'un article (concepts, sections, thèmes) et les liens entre idées avant la rédaction, avec un nœud central comme pivot.

PourquoiLa topologie hub-and-spoke (un nœud central relié aux autres) modélise naturellement une carte mentale ; les lignes en pointillés sont lisibles sur fond clair ou sombre sans alourdir l'interface.

RéglagesNœud hub centré (top: 40%, left: 40%), stroke-width: 1 pour un rendu plus aérien, libellés courts (4–5 caractères max), couleurs alignées sur la charte éditoriale.

SRC

MAP

FLT

OUT

③ Outil low-code — Éditeur de pipeline de traitement

QuandDans une interface no-code où l'utilisateur connecte visuellement des blocs de traitement (Source → Filtre → Transform → Sortie) en les reliant par glisser-déposer.

PourquoiNœuds et lignes SVG constituent l'UI primitive de tout éditeur de workflow ; la mise à jour des coordonnées SVG au drag est native au DOM, sans canvas ni librairie tierce.

Réglages4 nœuds disposés en diagonale, connexions linéaires (a→b→c→d, pas de retour d→a), étiquettes avec initiales de traitement (SRC, MAP, FLT, OUT).

Comment ça marche

Chaque nœud est un <div class="node-point"> en position: absolute dans un conteneur .nodes-scene qui couvre 100 % × 100 % de son parent. Les coordonnées initiales sont déclarées en pourcentages via les classes .node-a à .node-d (ex. top: 20%; left: 15%) — aucune valeur en pixels codée en dur. Chaque nœud affiche un dégradé linéaire à 135° (deux tons d'une même teinte) pour simuler un léger relief ; user-select: none empêche la sélection de texte pendant un éventuel glisser.

Un <svg class="node-lines"> couvre toute la scène en position: absolute; inset: 0 avec pointer-events: none pour ne jamais intercepter les clics sur les nœuds. Les quatre éléments <line> (a→b, b→c, c→d, d→a) définissent les connexions : tracés en indigo clair (stroke: rgb(129,140,248)), épaisseur 2, motif stroke-dasharray: 6 4 (6 px de trait, 4 px d'espace), opacité 0,6.

Au survol, chaque nœud émet un halo de lueur via box-shadow en transition 0.2s — la seule animation du code. La propriété cursor: grab (et grabbing à l'état actif via :active) signale l'intention de déplacement sans qu'aucune logique de drag ne soit incluse dans le code fourni.

Les attributs x1/y1/x2/y2 de chaque <line> démarrent à 0,0 : ils restent invisibles tant qu'ils ne sont pas initialisés via getBoundingClientRect() sur chaque paire de nœuds après rendu DOM. Le drag réel (mise à jour des coordonnées SVG à chaque déplacement) nécessite une vingtaine de lignes de JavaScript vanilla, illustrées dans les exemples interactifs ci-dessous.

Accessibilité

Aucune gestion de prefers-reduced-motion dans le code fourni — la seule animation est transition: box-shadow 0.2s au survol, non répétitive et imperceptible. À coupler avec @media (prefers-reduced-motion: reduce) { .node-point { transition: none } } si l'implémentation du drag ajoute d'autres transitions.
Les nœuds sont des <div> sans tabindex ni role — non atteignables au clavier dans l'état de base. Pour une implémentation accessible, ajoutez tabindex="0", role="button" et gérez les touches fléchées pour déplacer le nœud actif.
Le <svg> de lignes est purement décoratif mais ne porte pas aria-hidden="true" — à ajouter pour éviter qu'un lecteur d'écran ne le parcoure inutilement.
Contraste insuffisant en configuration par défaut : texte blanc sur fond ambre (#f59e0b) et rose (#ec4899) n'atteint pas 4,5:1 WCAG AA pour du texte à 0,75 rem — optez pour du texte sombre (color:#1e1b4b) ou des teintes de fond plus foncées.

Compatibilité navigateur

Uniquement CSS + SVG natif — zéro dépendance externe, aucune balise canvas requise.

Chrome 88+✓ Complet

Firefox 87+✓ Complet

Safari 15+✓ Complet

Edge 88+✓ Complet

Mobile iOS✓ Touch OK

Android Chrome✓ Complet

Si SVG n'est pas supporté (navigateur très ancien), les lignes de connexion n'apparaissent pas — les nœuds colorés restent lisibles et la page fonctionnelle.

Le code

Copiez les trois blocs dans votre page. Aucune dépendance.

HTML

<div class="anchor-demo">
  <div class="nodes-scene" id="nodesScene">
    <svg class="node-lines">
      <line id="line-ab" x1="0" y1="0" x2="0" y2="0">
      </line>
      <line id="line-bc" x1="0" y1="0" x2="0" y2="0">
      </line>
      <line id="line-cd" x1="0" y1="0" x2="0" y2="0">
      </line>
      <line id="line-da" x1="0" y1="0" x2="0" y2="0">
      </line>
    </svg>
    <div class="node-point node-a" data-node="a">A</div>
    <div class="node-point node-b" data-node="b">B</div>
    <div class="node-point node-c" data-node="c">C</div>
    <div class="node-point node-d" data-node="d">D</div>
  </div>
</div>

CSS

.anchor-demo  {
   position: relative;
   width: 100%;
   height: 220px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   }

.anchor-demo *  {
   box-sizing: border-box;
   }

.nodes-scene  {
   position: relative;
   width: 100%;
   height: 100%;
   }

.nodes-scene svg.node-lines  {
   position: absolute;
   inset: 0px;
   width: 100%;
   height: 100%;
   pointer-events: none;
   }

.nodes-scene svg.node-lines line  {
   stroke: rgb(129, 140, 248);
   stroke-width: 2;
   stroke-dasharray: 6, 4;
   opacity: 0.6;
   }

.node-point  {
   position: absolute;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.75rem;
   font-weight: 700;
   color: rgb(255, 255, 255);
   cursor: grab;
   user-select: none;
   z-index: 2;
   transition: box-shadow 0.2s;
   }

.node-point:active  {
   cursor: grabbing;
   }

.node-point:hover  {
   box-shadow: rgba(129, 140, 248, 0.6) 0px 0px 20px;
   }

.node-a  {
   background: linear-gradient(135deg, rgb(99, 102, 241), rgb(129, 140, 248));
   top: 20%;
   left: 15%;
   }

.node-b  {
   background: linear-gradient(135deg, rgb(236, 72, 153), rgb(244, 114, 182));
   top: 60%;
   left: 55%;
   }

.node-c  {
   background: linear-gradient(135deg, rgb(16, 185, 129), rgb(52, 211, 153));
   top: 25%;
   left: 70%;
   }

.node-d  {
   background: linear-gradient(135deg, rgb(245, 158, 11), rgb(251, 191, 36));
   top: 70%;
   left: 20%;
   }

JavaScript (fx-0476)

// Effet CSS pur — pas de JavaScript nécessaire

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriété	Défaut	Effet
.anchor-demo height	220px	Hauteur du conteneur. Passez à 100% ou 360px pour occuper toute une carte ou une section hero.
.node-point width / height	48px	Diamètre de chaque nœud. 64 px pour des libellés longs, 32 px pour un graphe dense à nombreux nœuds.
stroke (svg line)	rgb(129,140,248)	Couleur des lignes SVG. Remplacez par votre couleur d'accent, ou variez par type de connexion (obligatoire vs optionnelle).
stroke-width (svg line)	2	Épaisseur des lignes. 1 = discret, 3–4 = connexion forte. Peut encoder le poids d'une arête dans un graphe pondéré.
stroke-dasharray (svg line)	6 4	Motif de tirets. '0' = ligne pleine (lien direct), '2 6' = pointillé fin (lien faible), '8 3 2 3' = tiret-point.
opacity (svg line)	0.6	Opacité des lignes. 1 = pleine visibilité, 0.3 = connexions en retrait pour mettre les nœuds au premier plan.
Fond des nœuds (.node-a à .node-d background)	4 dégradés (indigo, rose, vert, ambre)	Remplacez par vos couleurs brand ou encodez l'état du nœud : vert = sain, rouge = erreur, gris = hors ligne.

FAQ

Pourquoi les lignes SVG sont-elles invisibles au chargement ?

Les attributs x1/y1/x2/y2 de chaque <line> démarrent à 0 — il faut les initialiser après rendu DOM avec getBoundingClientRect() sur chaque paire de nœuds. Appelez cette mise à jour dans un requestAnimationFrame ou après DOMContentLoaded pour que les positions CSS en pourcentages soient déjà calculées.

Comment ajouter un cinquième nœud et de nouvelles connexions ?

Ajoutez un <div class="node-point"> avec data-node="e" et ses coordonnées CSS, puis une <line id="line-ae"> dans le SVG. La logique de mise à jour des extrémités est identique — passez simplement la nouvelle paire à votre fonction de recalcul.

Peut-on ajouter une flèche directionnelle sur les connexions ?

Oui : définissez un <marker> dans un bloc <defs> SVG, puis appliquez marker-end="url(#arrow)" sur chaque <line> ciblée. Les styles CSS existants (couleur, épaisseur, tirets) restent inchangés — seule la balise SVG évolue.