Qu’est-ce qu’un blob SVG ?

Un blob est une forme douce et organique, sans arêtes droites, située quelque part entre un cercle et une éclaboussure. Les blobs sont très utilisés comme éléments décoratifs dans le web design moderne : derrière les images et illustrations principales, comme cadres d’avatar, arrière-plans de section, ou boutons et badges ludiques. Comme il s’agit de graphiques vectoriels, ils restent nets quelle que soit leur taille et ne pèsent que quelques centaines d’octets.

Description de l’outil

Cet outil génère aléatoirement des formes de blob sous forme de code SVG propre, directement dans votre navigateur. Cliquez sur « Randomiser » jusqu’à obtenir une forme qui vous plaît, puis ajustez le nombre de bosses, son irrégularité et l’arrondi de ses courbes. Remplissez-la avec une couleur unie ou un dégradé, ou affichez-la en contour, et faites-la éventuellement se transformer entre plusieurs formes dans une boucle fluide. Téléchargez le résultat au format SVG ou PNG, ou copiez-le sous forme de balisage SVG, d’arrière-plan CSS ou de clip-path CSS.

Fonctionnalités

  • Blobs aléatoires reproductibles : la même valeur de départ et les mêmes paramètres donnent toujours la même forme
  • Complexité, caractère aléatoire et fluidité réglables, des galets arrondis aux étoiles pointues
  • Remplissage uni, dégradé ou contour avec n’importe quelle couleur
  • Animation de morphing en boucle entre plusieurs formes, intégrée au SVG sans JavaScript
  • Téléchargement au format SVG ou PNG transparent, à la taille de votre choix
  • Code SVG, d’arrière-plan CSS et de clip-path CSS prêt à copier

Fonctionnement

L’outil place des points autour d’un cercle, déplace chacun d’eux vers l’intérieur d’une distance aléatoire, puis trace une courbe fermée et fluide qui les relie. La courbe est mesurée avec précision et mise à l’échelle afin que le blob remplisse l’image d’un bord à l’autre. Un générateur de nombres aléatoires initialisé par une valeur de départ détermine chaque point : un nombre ou un mot utilisé comme valeur de départ permet donc de retrouver le même blob ultérieurement. Pour l’animation, plusieurs blobs comportant le même nombre de points sont placés dans un seul élément SVG animate, et le navigateur effectue une interpolation entre eux.

Conseils

  • Cinq à huit points avec un niveau de hasard moyen donnent des formes de blob classiques ; un niveau de hasard plus faible crée un rendu plus calme et professionnel.
  • Réglez la fluidité sur 0 % pour obtenir des polygones évoquant des cristaux ou des pierres précieuses.
  • Utilisez le code clip-path CSS pour recadrer une photo ou une vidéo selon la forme du blob.
  • Notez la valeur de départ, ou saisissez votre propre mot comme valeur de départ, afin de recréer exactement le même blob ultérieurement.
  • Gardez l’animation de morphing lente, environ 8 à 15 secondes par boucle, pour préserver une ambiance calme en arrière-plan.