AccueilOutils de DesignGénérateur de Blobs SVG

Générateur de Blobs SVG

Le générateur de blob SVG crée des formes organiques aléatoires à partir de courbes de Bézier cubiques lisses, avec des réglages de complexité, d’aléa, de taille, de couleur de remplissage et un dégradé facultatif, puis exporte le code ou le fichier SVG.

6
5
300px

À propos de cet outil

Le générateur de blob SVG crée des formes organiques aléatoires à partir de courbes de Bézier cubiques lisses, avec des réglages de complexité, d’aléa, de taille, de couleur de remplissage et un dégradé facultatif, puis exporte le code ou le fichier SVG.

Mode d’emploi

  1. Réglez la complexité (nombre de points) et l’aléa.
  2. Choisissez la taille et la couleur de remplissage, ou activez un dégradé.
  3. Cliquez sur Régénérer jusqu’à obtenir une forme qui vous plaît.
  4. Copiez le code SVG ou téléchargez le fichier .svg.

Bon à savoir

  • Chaque blob est un unique tracé SVG construit à partir de points autour d’un cercle, reliés par des courbes de Bézier cubiques.
  • Plus de points donnent un contour plus complexe ; plus d’aléa le rend moins circulaire.
  • Les blobs SVG restent nets à toutes les tailles et ne pèsent que quelques centaines d’octets.
  • Les blobs sont appréciés comme décorations d’arrière-plan, cadres d’avatar et séparateurs de sections.
  • Le SVG peut être utilisé en ligne dans le HTML, comme source d’une balise img ou comme fond CSS.

Fonctionne entièrement dans votre navigateur : rien de ce que vous saisissez n’est envoyé ni stocké.

Questions fréquentes

Comment créer une forme blob ?

Réglez ici la complexité et l’aléa puis cliquez sur Régénérer ; chaque clic dessine une nouvelle forme organique aléatoire que vous pouvez télécharger en SVG.

Puis-je utiliser les blobs à des fins commerciales ?

Oui. Les formes sont générées aléatoirement sur votre appareil : vous pouvez les utiliser dans n’importe quel projet.

Comment utiliser un blob SVG en arrière-plan ?

Enregistrez le fichier et référencez-le avec background-image: url(blob.svg), ou collez le SVG directement dans le HTML et placez-le derrière votre contenu.

Peut-on animer un blob ?

Oui : vous pouvez le faire pivoter ou le redimensionner en CSS, ou le transformer entre deux tracés ayant le même nombre de points avec SMIL ou JavaScript.