Générateur de Blog Vectoriel (SVG Blobs)
Générez des formes blob SVG personnalisables : couleur, nombre de côtés, lissage, contour ou rempli, puis téléchargez ou copiez le SVG.
Soutenez le projet
J’ai choisi de limiter les publicités pour garder l’expérience simple et agréable. Si cet outil vous a été utile, vous pouvez m’aider à le faire vivre — chaque geste compte pour un développeur solo.
Description
Générateur de formes blob vectorielles (SVG) gratuit et sans inscription. La forme est définie par un rayon qui varie selon l’angle : chaque point est placé en x = centre_x + r × cos(θ), y = centre_y + r × sin(θ), avec r = base_radius + (aléa − 0,5) × profondeur × taille. Vous réglez la complexité (nombre de sommets N), la profondeur (variation du rayon), la couleur et le style (rempli ou contour). Le tracé est toujours lissé en courbes de Bézier. Téléchargez le SVG ou copiez le code.
Qu’est-ce qu’un blob SVG ?
Un blob (forme organique) est une forme vectorielle aux contours arrondis et irréguliers, souvent utilisée en design d’interface et en illustration. Au format SVG (Scalable Vector Graphics), le blob reste net à toute taille et peut être stylé en CSS (couleur, dégradé, animation). Ce générateur produit des blobs uniques à partir d’un paramètre de graine (seed) et de réglages visuels.
Comment utiliser l’outil
- Couleur : Choisissez une des 8 couleurs proposées ou saisissez un code hexadécimal personnalisé (ex.
#3b82f6). - Complexité (sommets) : Nombre de vertices N (3 à 24). Plus N est élevé, plus la forme est détaillée ou « dentelée ».
- Profondeur (variation) : Définit l’amplitude du hasard sur le rayon. À 0 %, le blob est un cercle ; à 100 %, le rayon varie au maximum et la forme est plus irrégulière.
- Style : Sélectionnez Rempli (forme pleine) ou Contour (trait uniquement). En mode contour, réglez l’épaisseur du trait.
- Générer aléatoirement : Nouvelle forme avec les mêmes réglages (couleur, complexité, profondeur, style) et une nouvelle graine.
- Télécharger SVG : Enregistrez le fichier
.svgsur votre ordinateur. - Copier le SVG : Copiez le code SVG dans le presse-papiers pour le coller dans votre projet.
Le tracé utilise toujours un lissage à 100 % (tangentes identiques entre courbes adjacentes) pour une forme continue et fluide.
La forme générée est toujours contenue dans le viewbox (0 0 120 120) : elle est mise à l’échelle et centrée avec une marge pour rester entièrement visible.
Exemples d’utilisation
- Maquette web : Générez un blob en fond de section (hero, bannière) avec une couleur de marque.
- Présentation : Créez des formes décoratives pour slides (PowerPoint, Google Slides) en téléchargeant le SVG.
- Logo ou identité : Utilisez un blob en contour fin comme élément graphique réutilisable.
- Animation : Intégrez le SVG dans une page et animez la couleur ou la transformation en CSS ou JavaScript.
Utilisations courantes des blobs
Les blobs SVG servent de décoration légère, de séparateurs de section, de fonds de cartes ou de zones de contenu. Ils s’associent bien au flat design et au minimalisme. En mode contour, ils peuvent évoquer des tracés à la main ou des icônes.
Avantages du format SVG
Le SVG est vectoriel : il reste net sur écran Retina et en impression. Le fichier reste léger et peut être modifié (couleur, taille) via CSS ou en éditant le code. Aucune image bitmap (PNG, JPG) n’est nécessaire pour des formes simples.
Intégration dans une page web
Collez le code SVG copié directement dans votre HTML, ou enregistrez le fichier et insérez-le avec une balise <img src="blob.svg">. Pour changer la couleur avec CSS, utilisez fill (forme remplie) ou stroke (contour) selon le mode utilisé.
FAQ
Les blobs sont-ils générés côté serveur ?
Non. La génération est entièrement effectuée dans votre navigateur. Aucune donnée n’est envoyée à un serveur ; vous pouvez utiliser l’outil hors ligne une fois la page chargée.
Puis-je utiliser les blobs en commercial ?
Oui. Les blobs générés par l’outil sont libres d’utilisation. Vous pouvez les intégrer à des sites, applications, maquettes ou supports imprimés sans redevance.
Le SVG est-il compatible avec tous les navigateurs ?
Oui. Le SVG est pris en charge par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Pour des environnements très anciens, une alternative en PNG peut être exportée depuis un logiciel de design à partir du SVG.
Comment obtenir une forme différente avec les mêmes réglages ?
Cliquez sur « Générer aléatoirement ». La couleur, la complexité, la profondeur et le style restent inchangés ; seule la forme (la géométrie du blob) change grâce à une nouvelle graine aléatoire. Le lissage reste toujours à 100 %.
Puis-je modifier la couleur du SVG après copie ?
Oui. Dans le code SVG copié, repérez l’attribut fill (mode rempli) ou stroke (mode contour) et remplacez la valeur hexadécimale par la couleur souhaitée. Vous pouvez aussi cibler le chemin avec CSS et utiliser fill ou stroke.
Quelle est la taille du fichier SVG généré ?
Le fichier est très léger (quelques centaines d’octets à quelques ko), car il ne contient qu’une forme vectorielle simple. Il est adapté au web et au référencement (pas d’image lourde).
Une suggestion ou une demande d'outil ?
Vous avez repéré une erreur, vous souhaitez un nouvel outil ou vous avez un retour à partager ? Contactez-moi par email, je serais ravi d'échanger avec vous.