Générateur de Blobs

Formes SVG organiques avec courbes de Bézier personnalisées.

Paramètres

Bords du blob (sommets)6

Pointu (complexité)60%

Mode de remplissage

UniLinéaireRadial

Couleur de départ

Couleur de fin

Code SVG XML brut

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
  <defs>
    <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff6b35" />
      <stop offset="100%" stop-color="#dd2c00" />
    </linearGradient>
  </defs>
  <path d="M 290.0 148.0 Q 320.0 200.0 290.0 252.0 Q 260.0 303.9 200.0 303.9 Q 140.0 303.9 110.0 252.0 Q 80.0 200.0 110.0 148.0 Q 140.0 96.1 200.0 96.1 Q 260.0 96.1 290.0 148.0 Z" fill="url(#blob-grad)" />
</svg>

Composant React JSX

export const Blob = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
    <defs>
      <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stopColor="#ff6b35" />
        <stop offset="100%" stopColor="#dd2c00" />
      </linearGradient>
    </defs>
    <path d="M 290.0 148.0 Q 320.0 200.0 290.0 252.0 Q 260.0 303.9 200.0 303.9 Q 140.0 303.9 110.0 252.0 Q 80.0 200.0 110.0 148.0 Q 140.0 96.1 200.0 96.1 Q 260.0 96.1 290.0 148.0 Z" fill="url(#blob-grad)" />
  </svg>
);

Comment ça marche

Ajustez l'aléa et la complexité pour façonner une forme organique.
Choisissez les couleurs et un dégradé pour le remplissage.
Régénérez jusqu'à obtenir une forme qui vous plaît.
Exportez le code SVG brut ou un composant React JSX prêt à l'emploi.

À quoi ça sert

Ajouter une forme d'arrière-plan organique à une page d'accueil.
Créer des blobs décoratifs pour un système de design.
Insérer un blob SVG directement dans un projet React sous forme de composant.

Bon à savoir

Les blobs sont générés procéduralement — régénérez pour explorer des variantes plutôt que de modifier des points individuels.
Une complexité très élevée produit des données de tracé plus longues ; des blobs plus simples gardent le SVG léger.

Questions fréquentes

Puis-je utiliser le blob directement dans React ?

Oui — exportez-le en composant JSX et insérez-le dans votre projet, ou prenez le SVG brut pour n'importe quelle autre stack.

Les formes sont-elles modifiables ensuite ?

Le SVG exporté est un vecteur standard que vous pouvez affiner dans n'importe quel éditeur, même si l'outil lui-même fonctionne par régénération plutôt que par édition de points.

Y a-t-il quelque chose de téléversé ?

Non. La génération et l'export se déroulent entièrement dans votre navigateur.

Outils associés

Visionneuse DXF

Palette de Couleurs

Convertisseur de Couleur

Générateur de Box Shadow CSS

Vérificateur de Contraste