Placez des points d'ancrage, faites glisser les poignées de Bézier sur un canevas 500×500 et obtenez aussitôt l'attribut d du tracé SVG et une règle CSS clip-path: path().
En mode « Ajouter un point », cliquez sur le canevas pour créer une ancre (une courbe C par défaut). Faites glisser les ancres vertes pour déplacer les nœuds et les poignées bleues pour courber le tracé. En mode « Supprimer un point », cliquez sur une ancre pour la retirer. Copiez ensuite l'attribut d ou le code clip-path ; tout se passe dans votre navigateur.
Placez des points d'ancrage, faites glisser les poignées de Bézier sur un canevas 500×500 et obtenez aussitôt l'attribut d du tracé SVG et une règle CSS clip-path: path(). Utilisez-le au travail, en développement, en apprentissage ou pour une vérification rapide.
Cet outil fonctionne dans le navigateur. Avant d'utiliser des données sensibles, assurez-vous que votre appareil et votre navigateur sont fiables.
L'élément path du SVG décrit sa forme grâce à un attribut d du type « M 100 100 C 150 50 … », et écrire ces coordonnées et points de contrôle de Bézier à la main est source d'erreurs. Cet éditeur vous propose une zone de dessin de 500 × 500 où vous construisez le tracé en cliquant et en faisant glisser, pendant que le panneau de droite génère instantanément le code d correspondant et une règle CSS clip-path: path(). Il convient aux icônes, aux esquisses de logo, aux découpes d'image irrégulières, ou tout simplement pour comprendre le fonctionnement des commandes de chemin SVG.
En mode « Ajouter un point », cliquez sur la zone pour poser une ancre. Le premier point est le départ (M) ; les suivants sont par défaut des nœuds de courbe (C) dotés de deux poignées de contrôle bleues. Passez en mode « Sélectionner / Modifier » pour faire glisser les ancres vertes en forme de trèfle, ou les poignées afin de régler la direction et l'amplitude de chaque courbe. Une fois un nœud sélectionné, « Type de nœud » le transforme en angle droit (L) ou en courbe de Bézier (C). En mode « Supprimer un point », un clic sur une ancre l'efface. La souris, le pavé tactile et l'écran tactile sont pris en charge.
Activez « Aligner sur la grille » et les ancres s'aimantent à une grille de 20 pixels, ce qui facilite les formes symétriques ou régulières ; l'arrière-plan quadrillé s'affiche ou se masque à tout moment. « Fermer le chemin (Z) » relie le dernier point au premier et crée une forme fermée que l'on peut remplir. Si vous ne voulez pas partir de zéro, chargez les modèles cœur, étoile, goutte d'eau ou tête d'Alpa, puis ajustez-les. Toutes les coordonnées sont arrondies à l'entier, ce qui donne un code court, prêt à coller.
L'attribut d utilise un repère de 0 à 500 : associez-le à viewBox="0 0 500 500" dans votre SVG et la forme suivra sa taille. CSS clip-path: path() fonctionne autrement : ses coordonnées sont en pixels et ne s'adaptent pas à l'élément, il convient donc surtout à un élément de 500 × 500 pixels. Pour une découpe responsive, utilisez un clipPath SVG avec clipPathUnits ou redimensionnez l'élément avec transform. Tout s'exécute dans votre navigateur, rien n'est envoyé.
M (moveto) place le crayon au point de départ. L (lineto) trace une ligne droite jusqu'aux coordonnées indiquées. C (curveto) dessine une courbe de Bézier cubique : les deux premières paires de coordonnées sont des points de contrôle, la dernière est le point d'arrivée. Z (closepath) relie le chemin à son début. Cet éditeur n'utilise que ces quatre commandes, ce qui rend le résultat facile à lire et à retoucher à la main.
La fonction path() de clip-path utilise des coordonnées en pixels : (500, 500) sur la zone de dessin signifie 500 pixels vers la droite et 500 vers le bas depuis le coin supérieur gauche de l'élément, quelle que soit sa taille. Si votre élément ne fait pas 500 × 500 pixels, mettez-le à l'échelle avec transform: scale() ou utilisez un <clipPath clipPathUnits="objectBoundingBox"> SVG avec des coordonnées converties entre 0 et 1.
Placez le code d dans <svg viewBox="0 0 500 500"><path d="…" /></svg> et stylisez-le avec fill et stroke. Grâce au viewBox, vous pouvez donner au SVG n'importe quelle largeur et hauteur : la forme est mise à l'échelle proportionnellement. La même chaîne d fonctionne aussi avec la propriété CSS offset-path pour faire avancer un élément le long du tracé.
Pas pour l'instant. L'outil permet seulement de dessiner à partir de zéro ou de partir des modèles cœur, étoile, goutte et tête d'Alpa ; les zones de sortie sont en lecture seule et n'importent pas de code. Pour retoucher une icône complexe existante, un logiciel vectoriel complet comme Inkscape ou Figma est plus adapté.
Voir cette catégorie: Design & Couleurs
Transformez vos captures d'écran en maquettes de navigateur professionnelles.
Créez des effets de texte néon lumineux personnalisés et copiez les styles CSS.
Extrayez la couleur exacte de n'importe quel pixel d'une image chargée.
Ajustez et prévisualisez visuellement les dispositions CSS Flexbox et Grid avec animations et copie de code en temps réel.
