Générateur de blob SVG
Créez des formes organiques blob en SVG avec points, part d'aléatoire et graine réglables. Remplissage uni, dégradé ou contour, .svg à télécharger ou data URI CSS.
Réglages du blob
Les mêmes réglages et la même graine donnent toujours la même forme.
Aperçu
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path fill="#8a3ffc" d="M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z"/></svg>
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cpath fill='%238a3ffc' d='M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z'/%3E%3C/svg%3E");Outils Connexes
Voir ToutQu'est-ce que Générateur de blob SVG ?
Génère des formes blob lisses et organiques en SVG. Contrôlez le nombre de points d'ancrage, l'irrégularité de la forme et sa taille, choisissez un remplissage uni, dégradé ou contour, et exportez-la en fichier .svg ou en data URI CSS.
Comment utiliser Générateur de blob SVG
- Choisissez le Remplissage (Uni, Dégradé ou Contour seul) et la ou les couleurs.
- Réglez Points d'ancrage, Part d'aléatoire et Taille.
- Cliquez sur Aléatoire ou saisissez une Graine pour une forme précise.
- Téléchargez le .svg ou copiez le code SVG.
- Ou copiez le Fond CSS (data URI).
Exemple
Points 4, randomness 0, size 100, solid #8a3ffc
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path fill="#8a3ffc" d="M50,5C65,5 95,35 95,50C95,65 65,95 50,95C35,95 5,65 5,50C5,35 35,5 50,5Z"/></svg>
Quand utiliser Générateur de blob SVG
Utilisez les blobs comme arrière-plans décoratifs, masques d'images, cadres d'avatars ou accents d'illustration. Avec une part d'aléatoire de 0, vous obtenez un quasi-cercle ; pour des formes géométriques exactes, utilisez plutôt border-radius ou clip-path.
Comment fonctionne Générateur de blob SVG
Les points d'ancrage sont répartis régulièrement autour d'un cercle (rayon de 45 % de la taille). La distance de chaque point au centre est réduite d'une quantité pseudo-aléatoire à graine allant jusqu'à 60 % × part d'aléatoire. Une spline de Catmull-Rom fermée passant par les points est convertie en commandes de Bézier cubiques, ce qui garantit un contour lisse sans angles. Les remplissages en dégradé utilisent un linearGradient SVG du coin supérieur gauche au coin inférieur droit.
Cas d'utilisation courants
- Formes d'arrière-plan décoratives sur des pages d'atterrissage
- Masques d'images pour des photos de profil
- Accents d'illustration et autocollants
- Blobs animés qui se transforment (générez-en plusieurs avec des graines différentes)
- Éléments de remplacement dans des présentations
Questions Fréquentes
Puis-je recréer un blob que j'ai aimé ?
Oui. Conservez la Graine avec le nombre de points, la part d'aléatoire et la taille ; ils produisent toujours le même tracé.
Comment utiliser un blob comme masque d'image ?
Placez le tracé dans un <clipPath> SVG ou utilisez le SVG téléchargé avec mask-image en CSS.
Pourquoi le blob ne touche-t-il jamais les bords ?
Le rayon maximal est de 45 % de la taille, ce qui laisse une petite marge pour que les contours et l'anticrénelage ne soient pas coupés.