Générateur de blobs SVG

Qu'est-ce que Générateur de blobs SVG ?

Le Générateur de blobs SVG est un outil gratuit dans le navigateur pour les designers et les développeurs front-end qui veulent des formes blob douces et organiques pour des arrière-plans, des sections hero, des avatars ou des touches décoratives sans les dessiner à la main. Tu contrôles deux valeurs : la complexité (le nombre de points d'ancrage autour de la forme) et le contraste (à quel point chaque point s'écarte d'un cercle parfait). Une graine dans l'état, incrémentée par le bouton Régénérer, te permet de parcourir des variations infinies tout en gardant la complexité et le contraste fixes. La sortie est rendue sous la forme d'un unique tracé de Bézier fermé et lisse, ce qui te permet de copier un balisage SVG propre, d'obtenir une règle CSS clip-path() pour masquer n'importe quel élément ou de télécharger un fichier .svg prêt à l'emploi. Utilise-le pour créer rapidement des décorations conformes à ta marque ou pour apprendre comment les tracés de blob sont construits à partir de points autour d'un cercle.

Comment utiliser Générateur de blobs SVG

1. Ouvre les Réglages et définis la complexité (nombre de points, 3-16) de la forme.
2. Règle le contraste (0-100) pour contrôler à quel point les bords sont irréguliers et ondulés.
3. Choisis une couleur de remplissage avec la pastille de couleur ou en saisissant une valeur HEX.
4. Clique sur Régénérer pour tirer une nouvelle variation aléatoire à partir de la graine suivante jusqu'à ce que la forme te plaise.
5. Copie le balisage SVG ou la règle clip-path CSS, ou clique sur Télécharger pour enregistrer un fichier .svg.

Exemples

Questions fréquentes

Que contrôlent la complexité et le contraste ?

La complexité est le nombre de points d'ancrage répartis uniformément autour d'un cercle (de 3 à 16) — plus de points donnent un contour plus détaillé. Le contraste est la distance dont chaque point est poussé aléatoirement vers l'intérieur ou l'extérieur du rayon de base (de 0 à 100), donc 0 est proche d'un simple cercle et 100 est très irrégulier.

Comment fonctionne le bouton Régénérer ?

Chaque blob est construit à partir d'une graine numérique plus ta complexité et ton contraste. Régénérer augmente la graine de un et recalcule la forme, ce qui te donne une nouvelle variation aléatoire à chaque clic tandis que la complexité, le contraste et la couleur restent identiques.

Quelle est la différence entre la sortie SVG et la sortie clip-path ?

La sortie SVG est un fichier <svg> complet et autonome que tu peux intégrer ou télécharger. La sortie clip-path est une seule règle CSS utilisant path() que tu peux appliquer à n'importe quel élément HTML pour le rogner selon le même contour de blob.

Puis-je changer la couleur et télécharger le fichier ?

Oui. Définis la couleur de remplissage avec la pastille de couleur ou une valeur HEX ; l'aperçu, le SVG et le téléchargement l'utilisent tous. Clique sur Télécharger pour enregistrer un fichier blob.svg généré entièrement dans ton navigateur.

Mes formes ou mes réglages sont-ils envoyés à un serveur ?

Non. Le blob est généré avec une fonction aléatoire locale à graine et toutes les chaînes SVG et clip-path sont construites dans ton navigateur. Rien n'est envoyé, donc l'outil fonctionne hors ligne et ton travail reste privé.