Générateur de Blobs SVG

Qu'est-ce qu'un générateur de blobs SVG ?

Un générateur de blobs SVG crée des formes organiques fermées en échantillonnant des points autour d'un cercle et en les reliant avec des courbes de Bézier lisses. Le résultat est une silhouette douce et fluide — le genre de forme que tu vois derrière un hero marketing, autour d'une photo de profil ou comme blob coloré en fond d'une landing page.

Les blobs vivent au point d'équilibre entre géométrie et aléatoire. Ajuste le nombre de points pour obtenir des formes jellybean (3-4), galet (5-6) ou chaotiques (10+). Bouge le curseur d'aléa pour passer de quasi-circulaire à fortement déformé. Appuie sur le dé pour relancer un seed à tout moment.

Tout tourne dans ton navigateur. Exporte comme snippet SVG prêt à coller, fichier .svg téléchargeable ou valeur clip-path CSS que tu peux appliquer directement à n'importe quel élément HTML pour le masquer dans la forme du blob.

Ce que tu apprendras en faisant des blobs

• Les courbes Bézier cubiques donnent au blob sa douceur — chaque paire de points adjacents a deux poignées de contrôle, calculées pour que la tangente soit continue à chaque jonction.
• Les splines Catmull-Rom (utilisés ici) dérivent automatiquement ces poignées à partir des points voisins, donc tu n'as pas à régler les control points à la main pour garder la courbe lisse.
• Le CSS clip-path: path(...) peut appliquer une forme de blob à n'importe quel élément — image, div, vidéo — sans affecter sa boîte de mise en page.

Comment générer un blob étape par étape

1. 1

   Choisis le nombre de points

   Moins de points (3-5) font des blobs jellybean. Plus de points (8-12) font des formes plus galet et irrégulières.

2. 2

   Règle l'aléa

   0% est un cercle. 50% donne des courbes douces en forme de blob. 100% donne des silhouettes très déformées et dramatiques.

3. 3

   Choisis une couleur ou un dégradé

   Utilise un remplissage uni, ou active Dégradé et choisis deux couleurs plus un angle. Colle aux patterns populaires des sections hero.

4. 4

   Aléatoirise et exporte

   Appuie sur le dé pour relancer un seed. Quand ça te plaît, copie le SVG, copie le clip-path CSS ou télécharge le .svg.

Où les blobs fonctionnent le mieux

Trois façons courantes d'utiliser un blob et ce à quoi faire attention.

Exemples de blobs à essayer

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Bienvenue sur Coddy</h1></section>

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

Erreurs courantes avec les blobs SVG

• Oublier viewBox et donner au <svg> une width/height fixe. La forme ne se met pas à l'échelle de façon responsive — utilise viewBox plus width/height en CSS.
• Animer de gros paths remplis à chaque frame. La rastérisation de path coûte cher ; utilise transform/opacity ou pré-flou avec un CSS filter pour que la GPU gère ça.
• Copier le <svg> inline dans Tailwind/Bootstrap et hériter de display: inline au lieu de block. Le gap baseline par défaut laisse quelques pixels sous la forme.

Questions fréquentes