sOutline Node

Le sOutline complète le système Shape avec une fonction clé : ajouter un contour externe à un shape déjà stylé, sans modifier le fill interne. Différent du Border Width intégré dans sRectangle/sEllipse/etc. qui ne gère que le stroke propre au shape.

Utile dès qu'on travaille avec des compound shapes (sMerge, sBoolean) : le Border Width natif de chaque shape source ne donne pas un contour unifié sur l'ensemble. Le sOutline si.

• Effects Library : Tools > Shape > sOutline
• Ajout rapide : clic droit dans le Node Editor → Add Tool > Shape > sOutline

Border Width natif (sRectangle, sEllipse...)

Gère le contour du shape individuel. Bien pour une shape simple. Sur un compound (sMerge + sBoolean), chaque shape aura son propre contour = pas unifié.

sOutline

Ajoute un contour autour du compound shape global. Contour unique cohérent, indépendant des shapes internes.

Règle : shape simple → Border Width intégré suffit. Compound shape (plusieurs shapes mergés/booléen) → sOutline obligatoire pour un contour propre.

• Input1 (requis)— sortie d'un shape node. Typiquement un compound shape provenant de sMerge ou sBoolean.

Contour unifié sur compound shape :
sRectangle → sBoolean Subtract ← sEllipse
                  ↓
              sOutline (Thickness 0.005) → sRender

Double-stroke (deux contours superposés) :
Shape → sOutline (Thickness 0.005, couleur 1)
      → sOutline (Thickness 0.01, couleur 2)  ← épais en dessous
      → sRender

Write-on animation :
Shape → sOutline (Length animée 0 → 1) → sRender

Shape avec outline colorée différente du fill :
sNGon (fill bleu) → sOutline (Thickness 0.003, couleur blanche) → sRender

Thickness

Épaisseur du contour. En coordonnées normalisées. 0.005 = contour fin subtil, 0.02+ = contour épais style illustration plate.

Border Style

Comportement des coins : Bevel (biseau plat), Round (coins arrondis), Miter (coins pointus prolongés).

Cap Style

Extrémités du contour (quand Length < 1 et le contour est ouvert) :

• Flat : bouts coupés nets.
• Rounded : bouts arrondis (demi-cercle).
• Squared : bouts prolongés en carré.

Length

Fraction du contour tracée. 1 = entier, 0 = rien, 0.5 = moitié. Animer 0 → 1 = write-on animation du contour.

Position

Point de départ du tracé le long du contour. Combinée avec Length permet de positionner le gap dans l'outline.

• Contour unifié autour d'un compound shape — sBoolean Donut → sOutline = contour propre autour et à l'intérieur du donut, impossible avec Border Width natif.
• Double-stroke (contour + contour) — deux sOutline empilés avec Thickness différents et couleurs différentes = effet badge / écusson avec double bord.
• Write-on animation du contour entier — Length animé 0 → 1 = contour qui se trace progressivement. Révélation graphique classique.
• Outline colorée différente du fill — shape avec fill bleu, sOutline blanc par- dessus = bleu cerclé de blanc. Style illustration / logo sport.
• Contour externe pour stickers / badges — un shape + sOutline avec couleur très contrastée = look sticker découpé (comme les badges Instagram / social).
• Contour d'un texte (via sBoolean + shapes) — lettres formées par shapes + sMerge + sOutline = texte avec contour unifié.
• Logos à traits avec épaisseur contrôlée — le sOutline donne un stroke consistant indépendant des propriétés des shapes sources.

• Thickness 0.003-0.008 = subtil, 0.01-0.02 = évident, 0.03+ = très marqué (style cartoon / illustration).
• Border Style Round pour look friendly (soft UI, Material design), Miter pour look technique précis (blueprint, logo géométrique).
• Length 0 → 1 animé = write-on — pour un effet « contour qui se dessine », animer Length sur 1-2 secondes avec ease-in/ ease-out.
• Empiler sOutline pour double-strokes — premier sOutline épais foncé, deuxième plus fin clair = effet relief / embossage.
• Cap Style Round pour write-on élégant — les extrémités arrondies du tracé progressent plus proprement qu'avec des bouts Flat.
• sOutline après sTransform — si on met sTransform avant sOutline, le contour se transforme aussi. Si on met après, le contour reste à la même épaisseur peu importe le scale du shape.
• Pour du stroke variable (épaisseur qui varie le long du tracé), le sOutline n'est pas suffisant. Utiliser plusieurs sOutline combinés ou importer un SVG avec stroke variable.