Comment utiliser : Générateur de blobs SVG
- Cliquez sur Nouveau blob aléatoire jusqu'à obtenir une forme qui vous plaît.
- Utilisez Complexité pour ajouter ou retirer des bosses, et Aléatoire pour un contour plus arrondi ou plus irrégulier.
- Choisissez une couleur unie, un dégradé ou un contour.
- Téléchargez-le en SVG (adaptable à toutes les tailles) ou en PNG, ou copiez le code SVG dans votre HTML.
Comment les blobs sont créés
Le générateur place des points autour d'un cercle, déplace chacun vers l'intérieur ou l'extérieur d'une valeur aléatoire, puis les relie par une courbe fermée lisse (segments de Bézier cubiques passant par chaque point). Plus il y a de points, plus il y a de bosses ; plus l'aléatoire est élevé, moins le contour est circulaire. Le résultat est un seul <path> : léger, net à toutes les tailles et facile à recolorer.
Utiliser les blobs sur un site web
- Décoration d'arrière-plan : placez le SVG en position absolue derrière une section d'accueil, avec une couleur douce ou une faible opacité.
- Masques d'image : utilisez le blob comme
mask-imageou transformez le tracé enclip-path: path()pour recadrer une photo dans cette forme. - Animation : générez deux blobs avec la même complexité et animez le passage de l'un à l'autre en CSS ou en SMIL pour un effet de « morphing ».
Vous préférez une forme en CSS pur ? Le générateur de border-radius crée des blobs avec 8 valeurs de rayon. Pour des séparateurs de section, essayez le générateur de vagues SVG.
Aussi recherché comme : générateur de blob svg, générateur de blob, générateur de forme organique, générateur de formes svg, blob svg aléatoire, créer un blob svg, générateur de forme abstraite, générateur de forme svg.
Outils complémentaires : Générateur de blobs SVG
- Générateur clip-path CSS — Découpez images et éléments en n'importe quelle forme : choisissez l'une des 15 formes de départ (triangle, hexagone, étoile, flèche, chevron, bulle de dialogue, cercle, ellipse, rectangle arrondi en inset…), puis déplacez les points sur un exemple ou sur votre propre image.
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
- Optimiseur SVG — Nettoyez les SVG exportés depuis Figma, Illustrator, Inkscape ou Sketch avec SVGO, puis vérifiez l'aperçu avant/après pour vous assurer que l'icône s'affiche toujours correctement.
- Convertisseur SVG en PNG — Générez des images PNG d'une grande netteté à partir de graphiques vectoriels SVG, exactement à la taille dont vous avez besoin — pour les boutiques d'applications, les réseaux sociaux, les e-mails ou les documents.
Questions fréquentes
Comment créer une forme de blob ?
Cliquez sur Nouveau blob aléatoire, ajustez la complexité et l'aléatoire, puis téléchargez le SVG. Chaque blob est un seul tracé lisse.
Puis-je utiliser les blobs à des fins commerciales ?
Oui. Les formes sont générées aléatoirement sur votre appareil : utilisez-les dans n'importe quel projet, sans attribution nécessaire.
Comment placer une image à l'intérieur d'un blob ?
Utilisez le SVG comme masque CSS (mask-image: url(blob.svg)) sur l'image, ou copiez le tracé dans un clipPath SVG.
SVG ou PNG ?
SVG pour les sites web : il reste net à toute taille et son poids est minime. PNG pour les applications qui n'acceptent pas le SVG, comme certains outils de présentation ou de réseaux sociaux.
Puis-je installer Générateur de blobs SVG en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur de blobs SVG est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.