Générateur de blobs SVG

Créez des formes organiques en SVG, avec dégradé, et exportez le code ou un composant React.

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.9 154.0 Q 328.6 200.0 292.2 248.2 Q 255.7 296.4 194.1 306.7 Q 132.4 317.0 108.4 258.5 Q 84.3 200.0 110.7 145.5 Q 137.1 91.1 195.1 99.5 Q 253.2 107.9 290.9 154.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.9 154.0 Q 328.6 200.0 292.2 248.2 Q 255.7 296.4 194.1 306.7 Q 132.4 317.0 108.4 258.5 Q 84.3 200.0 110.7 145.5 Q 137.1 91.1 195.1 99.5 Q 253.2 107.9 290.9 154.0 Z" fill="url(#blob-grad)" />
  </svg>
);

Comment ça marche

Réglez le nombre de bords et le côté pointu pour façonner un blob organique.
Choisissez les couleurs et un dégradé pour le remplissage.
Cliquez sur Aléatoire 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 de fond organique à une page d'accueil.
Créer des blobs décoratifs pour un système de design.
Placer un blob SVG dans un projet React sous forme de composant.

Bon à savoir

Les blobs sont générés au hasard : relancez pour explorer des variantes, plutôt que de retoucher les points un à un.
Une complexité très élevée donne un tracé plus long ; des blobs plus simples gardent un SVG léger.

Questions fréquentes

Puis-je utiliser le blob directement dans React ?

Oui : exportez un composant JSX et collez-le dans votre projet, ou prenez le SVG brut pour toute autre technologie.

Les formes sont-elles modifiables ensuite ?

Le SVG exporté est un vecteur standard que vous pouvez peaufiner dans n'importe quel éditeur ; l'outil lui-même fonctionne par régénération, pas par retouche des points.

Quelque chose est-il envoyé sur un serveur ?

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

Outils associés

Visionneuse DXF

Palette de couleurs d'image

Convertisseur de couleur

Générateur de box-shadow CSS

Vérificateur de contraste