Générateur de Blobs SVG

Créez de Beaux Blobs SVG en Quelques Secondes

Les formes organiques de type "blob" sont l'une des tendances les plus populaires du web design moderne — on les retrouve en arrière-plan de sections hero, comme séparateurs, accents décoratifs sur des cartes, et même comme icônes d'applications. Ce Générateur de Blobs SVG vous permet de créer des blobs uniques, parfaitement lisses, avec quelques curseurs, puis de copier le SVG ou de le télécharger pour l'utiliser dans n'importe quel projet.

Comment le Blob Est Construit

Le générateur place un certain nombre de points d'ancrage uniformément autour d'un cercle, puis décale le rayon de chaque point d'une valeur aléatoire basée sur le paramètre aléatoire. Les points sont ensuite reliés en une courbe fermée et lisse à l'aide de segments de Bézier cubiques dérivés d'une spline Catmull–Rom, ce qui garantit un contour propre et continu, sans aucun angle visible, peu importe à quel point les points sous-jacents sont chaotiques.

Une graine déterministe pilote toutes les décisions aléatoires, ce qui signifie que la même configuration produit toujours exactement le même blob. Cliquez sur relancer pour parcourir de nouvelles formes sans rien changer d'autre.

Options de Personnalisation

• Complexité — nombre de points d'ancrage (de 3 à 20). Les valeurs faibles donnent des blobs doux et arrondis. Les valeurs élevées produisent des contours complexes et ondulés.
• Aléatoire — à quel point chaque point peut s'écarter du rayon de base. Zéro produit un cercle ; un aléatoire maximal donne des formes organiques spectaculaires.
• Graine — entier qui rend chaque résultat reproductible. Avec la même graine, vous obtenez toujours la même forme.
• Remplissage — choisissez une couleur unie ou un dégradé linéaire à deux arrêts avec un angle ajustable.
• Contour — trait optionnel avec couleur et épaisseur configurables.

Formats de Sortie

Le générateur produit un balisage SVG propre et minimal que vous pouvez coller directement dans un document HTML, un composant React, un fichier Figma ou n'importe quel outil de design acceptant le SVG. Vous pouvez copier le code dans le presse-papiers en un clic, ou télécharger la forme en tant que fichier .svg autonome.

Usages Courants

• Arrière-plans hero et accents de landing pages
• Masques d'image de type avatar
• Formes décoratives derrière des cartes de fonctionnalités
• Badges abstraits et éléments d'UI de type sticker
• Transitions en blob entre sections de page
• Décoration de diapositives de présentation

Puisque la sortie est du SVG pur, elle reste nette à n'importe quelle résolution, a une taille de fichier minuscule et peut être animée avec CSS ou JavaScript. Vous pouvez également modifier le tracé obtenu dans des outils comme Illustrator, Figma ou Inkscape si vous avez besoin d'ajustements supplémentaires.