Générateur de blobs

Des blobs SVG organiques en quelques secondes

Les blobs sont ces formes douces et irrégulières que l'on voit derrière les sections d'accueil, les photos de profil, les illustrations et les écrans d'intégration des applications. Ils cassent la rigidité des grilles de rectangles et donnent à une mise en page un aspect convivial, comme fait main. Ce générateur de blobs les crée sous forme de tracés SVG propres : choisissez quelques paramètres, regardez la forme se mettre à jour et copiez le code directement dans votre projet.

Comme un blob n'est qu'un seul tracé SVG, il est minuscule, s'agrandit sans perte de qualité et peut être recoloré en CSS ou animé par morphing entre deux tracés comportant le même nombre de points.

Comment la forme est construite

Le générateur place un nombre choisi de points d'ancrage autour d'un cercle. Le caractère aléatoire attire chaque point vers l'intérieur d'une quantité aléatoire différente, tandis que la taille met à l'échelle l'ensemble du contour dans la zone de dessin. Les points d'ancrage sont ensuite reliés par une spline de Catmull-Rom fermée, convertie en courbes de Bézier cubiques, ce qui garantit des jonctions lisses sans angle visible. Avec trois ou quatre points, vous obtenez de simples formes de galet, tandis que dix points ou plus avec un caractère aléatoire élevé produisent des formes ondulantes, semblables à des nuages. À 0 % d'aléatoire, le résultat est une forme régulière arrondie en un cercle parfait.

Couleurs, contours et réutilisation

Remplissez le blob d'une couleur unie ou d'un dégradé diagonal à deux couleurs, et ajoutez un contour de 1 à 16 pixels lorsque vous voulez un style autocollant ou badge. Chaque blob provient d'une graine numérique : la même graine avec les mêmes réglages produit toujours la même forme, vous pouvez donc enregistrer la graine, ajuster une valeur plus tard et garder tout le reste identique. Téléchargez un SVG pour le web ou un PNG de 800 × 800 pixels à fond transparent pour vos présentations et outils de design. Tout le traitement a lieu localement dans votre navigateur et rien n'est envoyé.