Générateur de blob SVG (formes organiques)
Touchez pour obtenir une autre forme jusqu’à en trouver une qui convienne. Réglez les points et l’irrégularité, choisissez les couleurs et copiez le SVG ou utilisez-le comme masque de photo.
Mode d’emploiDes formes organiques pour le site
Disponible en: 
Générateur de blob SVG (formes organiques): à quoi ça sert
Choisissez le nombre de points et l’irrégularité, la couleur ou un dégradé de deux couleurs, et générez de nouvelles formes d’un simple toucher. La courbe passe en douceur par tous les points et se ferme sans angles.
Téléchargez le SVG, copiez le code ou copiez la version masque (clipPath) pour découper n’importe quelle photo à la forme du blob.
Mode d’emploi
- Réglez les points et l’irrégularité.
- Choisissez la couleur ou le dégradé et générez des formes jusqu’à ce qu’elle vous plaise.
- Téléchargez le SVG ou copiez le masque de photo.
Quand l’utiliser
- Arrière-plans derrière des photos et des illustrations.
- Photos de profil à la forme organique.
- Décorations pour des sections de sites et des publications.
Questions fréquentes
À quoi sert un blob ?
Les formes organiques adoucissent la rigidité des mises en page carrées : elles s’intègrent bien derrière des photos, des icônes et des illustrations, comme fond de sections et comme cadre de photos de profil.
Comment l’utiliser comme cadre de photo ?
Copiez le code du masque (clip-path) : il utilise le même dessin dans un clipPath avec des coordonnées relatives, et toute image avec le style clip-path:url(#blob) prend la forme du blob.
Puis-je l’animer ?
Oui, en générant deux formes avec le même nombre de points et en animant l’attribut d avec CSS ou JavaScript. Utilisez des animations lentes et respectez les personnes qui préfèrent moins de mouvement (prefers-reduced-motion).
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.