Générateur de blob : formes SVG et blobs CSS animés
Générateur de blob
Générateur de blob : blobs SVG aléatoires et animation de blob CSS | We.Inc
Générez des formes de blob organiques aléatoires en path SVG, ou un blob en pur CSS avec border-radius qui se transforme grâce à des @keyframes à copier. Basé sur une seed, pour retrouver le même blob.
Un blob est une forme fermée, douce et irrégulière, utilisée derrière des photos, des icônes et des textes de hero. Ce générateur les crée de deux façons : en path SVG tracé à travers des points déplacés au hasard autour d'un cercle, ou en CSS simple avec huit pourcentages de border-radius. La version CSS peut se transformer d'une forme à l'autre avec une courte animation @keyframes à copier.
Blob SVG ou blob CSS ?
Blob en path SVG
Blob CSS en border-radius
Variété de formes
Autant de bosses que voulu, très irrégulier
Formes d'œuf et de galet à quatre côtés doux
Peut contenir du contenu
Comme image de fond ou masque
Oui, c'est une boîte normale avec du texte ou une image dedans
Animation de morphing
Nécessite JavaScript ou SMIL
@keyframes sur border-radius
Sortie
Un élément svg ou un fichier .svg
Quelques lignes de CSS
Les blobs adoucissent les mises en page en grille rigides et donnent à une marque une forme bien à elle. Chaque blob ici provient d'une seed, donc les mêmes réglages et la même seed reconstruisent toujours la même forme. Essayez le mode SVG pour des formes à plusieurs lobes, puis passez au mode CSS quand vous voulez une boîte qui ondule lentement.
Choisissez le mode SVG ou le mode CSS.
En mode SVG, réglez le nombre de points de la forme et la distance maximale de chaque point par rapport au cercle. Chaque nouvelle seed donne une nouvelle forme.
En mode CSS, appuyez sur Nouvelle forme pour tirer de nouvelles valeurs de border-radius, et activez Animer pour obtenir un morphing entre trois formes.
Copiez le markup SVG, téléchargez le fichier .svg, ou copiez le CSS et les keyframes.
Entre 5 et 8 points avec un aléatoire moyen donne les formes les plus sympathiques. Beaucoup de points avec un aléatoire élevé ressemblent à des éclaboussures.
Utilisez le blob SVG comme mask-image ou derrière une photo avec position: absolute pour que le texte reste sélectionnable.
Gardez les animations de blob lentes, de 6 à 12 secondes, et en alternance pour que le mouvement ne revienne jamais brusquement au début.
Désactivez l'animation pour les visiteurs qui préfèrent réduire les mouvements. La sortie keyframes inclut déjà cette media query.
Questions fréquentes
Comment fonctionne le blob CSS ?
border-radius accepte des rayons horizontaux et verticaux distincts pour chaque coin, écrits sous forme de quatre valeurs, une barre oblique et quatre autres. Quand les deux rayons qui se rejoignent sur chaque côté totalisent 100 pour cent, les coins fusionnent en un contour organique fluide au lieu d'un rectangle arrondi.
Comment animer un blob en CSS ?
Placez deux valeurs de border-radius ou plus dans @keyframes et lancez l'animation avec ease-in-out, infinite et alternate. Les navigateurs interpolent chaque rayon de coin, donc le contour passe en douceur d'une forme à l'autre. Activez Animer en mode CSS pour obtenir des keyframes prêtes à l'emploi.
Puis-je retrouver le même blob plus tard ?
Oui. La forme dépend uniquement des réglages et de la seed. Notez la seed, ou gardez le code copié, et le générateur reconstruira exactement ce contour.
Puis-je utiliser le blob SVG comme clip-path ?
Vous pouvez le référencer avec clip-path: url(#id) quand le SVG se trouve dans la même page, ou coller l'attribut d dans clip-path: path() pour une taille fixe en pixels. Un mask-image avec le fichier .svg est la façon la plus simple de le redimensionner avec l'élément.
Comment le blob SVG est tracé
Le générateur place des points régulièrement autour d'un cercle, puis déplace chacun vers l'intérieur ou l'extérieur d'une valeur aléatoire contrôlée par le curseur d'aléatoire. Une courbe lisse passe par les points grâce à des segments de Bézier cubiques, sans aucun angle vif.
Moins de points et moins d'aléatoire donnent un galet. Plus de points et plus d'aléatoire donnent une éclaboussure ou un nuage.
Animer un blob sans JavaScript
La propriété CSS d, qui permettrait de transformer un path SVG dans une feuille de style, n'est pas Baseline selon MDN, donc elle échoue dans certains grands navigateurs. C'est pourquoi l'option animée utilise border-radius. Chaque rayon de coin est une longueur ou un pourcentage, donc le navigateur peut interpoler seul entre les keyframes.
Ajouter une rotation lente en plus du changement de rayon rend le mouvement plus organique. Restez discret pour que l'effet reste en arrière-plan.
Exemple d'animation de blob CSS
Blob qui se transforme derrière un cadre photo
Trois formes de border-radius dans une seule animation en alternance, plus une rotation lente. La media query de mouvement réduit l'arrête pour les personnes qui demandent moins de mouvement.
Lire un border-radius à huit valeurs
Les valeurs avant la barre oblique sont les rayons horizontaux, celles d'après les rayons verticaux, chacune dans l'ordre haut gauche, haut droit, bas droit, bas gauche.
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%
Coin
Rayon horizontal
Rayon vertical
Haut gauche
Haut droit
Bas droit
Bas gauche
Créateur de blob
Chaque forme provient de la seed affichée sous l'aperçu. Modifiez les curseurs ou tirez une nouvelle seed, puis copiez le SVG ou le CSS.