Quel format de path SVG l'outil produit-il ?

L'outil produit un path SVG standard avec des courbes de Bézier cubiques (commande "C"). Le markup complet est un élément avec viewBox "0 0 300 300", utilisant des coordonnées absolues et se terminant par "Z".

Comment utiliser une forme blob dans un vrai projet ?

Vous pouvez utiliser le SVG téléchargé comme source , comme background-image CSS, ou incorporer le code directement dans votre HTML. En CSS vous pouvez appliquer clip-path avec la fonction path() en utilisant la chaîne du path copié.

Générateur de Blob

Générez des formes blob organiques aléatoires en SVG. Personnalisez la complexité et l'aléatoire, choisissez votre couleur, puis téléchargez ou copiez le code SVG.

SVG instantanéCopie du pathTéléchargement gratuit

① Ajustez complexité, aléatoire et couleur ② Cliquez Aléatoire pour générer ③ Copiez SVG ou téléchargez PNG

Complexité (points)6

Aléatoire50

Graine

Couleur de remplissage#C9B89A

Comment ça marche

Le blob est construit à partir de N points équidistants sur un cercle, chacun déplacé aléatoirement vers l'intérieur ou l'extérieur. Des courbes de Bézier cubiques connectent les points via la conversion Catmull-Rom.

Complexité

Contrôle le nombre de points d'ancrage (6–10). Plus de points créent des silhouettes plus complexes et irrégulières. Moins de points produisent des blobs plus simples et ronds.

Aléatoire

Contrôle à quel point chaque point peut s'écarter du rayon du cercle de base. 0 donne un cercle parfait ; 100 donne une irrégularité organique maximale.

Qu'est-ce qu'une forme blob et comment est-elle générée ?

Les formes blob sont des silhouettes douces, organiques, ressemblant à des amibes, très utilisées dans le design web moderne pour les arrière-plans, illustrations, avatars et accents UI. Elles sont générées algorithmiquement en distribuant des points d'ancrage autour d'un cercle à intervalles angulaires égaux, puis en déplaçant chaque point radialement. Des courbes de Bézier cubiques — via la conversion Catmull-Rom — connectent les points de manière fluide. Le résultat est un path SVG intégrable en HTML ou CSS via background-image, clip-path ou <svg> inline, exportable vers Figma, Illustrator et Inkscape.

Questions fréquentes

Une forme blob est une silhouette douce, organique et arrondie qui ressemble à une amibe naturelle. Contrairement aux formes géométriques, les blobs ont des contours irréguliers et fluides. Ils sont largement utilisés dans le design web moderne pour les arrière-plans, illustrations et décorations UI.

Les blobs sont créés en plaçant N points d'ancrage à intervalles angulaires égaux sur un cercle. Chaque point est ensuite déplacé aléatoirement vers l'intérieur ou l'extérieur. Des courbes de Bézier cubiques — via la conversion Catmull-Rom à Bézier — connectent tous les points en un path fermé et fluide.

La complexité contrôle le nombre de points d'ancrage (6–10). Plus de points permettent plus de variation locale. L'aléatoire contrôle à quel point chaque point peut s'écarter du cercle de base. À 0 tous les points sont sur le cercle ; à 100 ils s'écartent au maximum.

L'outil produit un path SVG standard avec des courbes de Bézier cubiques (commande "C"). Le markup complet est un élément <svg> avec viewBox "0 0 300 300", utilisant des coordonnées absolues et se terminant par "Z".

La forme générée est déterministe avec les mêmes valeurs de seed, complexité et aléatoire. Une aléatoire très élevée avec une faible complexité peut occasionnellement produire des paths auto-intersectants. SVG se met à l'échelle à l'infini sans perte de qualité.

Vous pouvez utiliser le SVG téléchargé comme source <img>, comme background-image CSS, ou incorporer le code <svg> directement dans votre HTML. En CSS vous pouvez appliquer clip-path avec la fonction path() en utilisant la chaîne du path copié.

Oui. SVG et les courbes de Bézier cubiques sont pris en charge dans tous les navigateurs modernes. Le fichier téléchargé est un XML SVG compatible avec Figma, Illustrator, Inkscape et Sketch.

Qu'est-ce qu'une forme blob et comment est-elle générée ?

Questions fréquentes

Explorez notre réseau