Design / SVG

Générateur de blobs SVG (formes organiques aléatoires)

Créez des blobs lisses et aléatoires pour vos arrière-plans et illustrations : choisissez le nombre de points et le niveau d’aléatoire, sélectionnez une couleur ou un dégradé à deux couleurs, puis téléchargez ou copiez le SVG.

Générateur de blobs SVG (formes organiques aléatoires): Les points sont répartis régulièrement autour d’un cercle, puis chacun est rapproché du centre d’une distance aléatoire avant d’être relié aux autres par une courbe fermée et lisse. Avec peu de points et un niveau d’aléatoire élevé, les formes sont irrégulières ; avec beaucoup de points et un faible niveau d’aléatoire, elles sont douces et presque rondes. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.

Catégorie
Outils développeur
Exécutions
Dans votre navigateur
Coût
Gratuit · sans inscription
Disponibilité
Prêt à l'emploi
Générateur de formes organiques SVGTraitement local

Fonctionne entièrement dans votre navigateur

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path d="M359.5,200 C360.7,243.5 315.4,319 278.8,336.4 C242.1,353.9 174.7,327.5 139.5,304.7 C104.4,282 69.5,237.5 68,200 C66.4,162.5 96.4,100.3 130.4,79.5 C164.4,58.7 233.7,55.4 271.9,75.5 C310.1,95.6 358.4,156.5 359.5,200 Z" fill="#63c42d"/></svg>

Les points sont répartis régulièrement autour d’un cercle, puis chacun est rapproché du centre d’une distance aléatoire. Ils sont ensuite reliés par une courbe fermée et lisse. Moins il y a de points et plus la forme est aléatoire, plus elle est irrégulière ; avec 0 % d’aléatoire, on obtient un cercle. Les formes organiques créent des arrière-plans doux derrière les photos, les icônes et les titres.

Utilisations

Les formes douces créent des arrière-plans agréables derrière des photos de produits, des icônes, des avatars et des titres. Derrière du texte, utilisez une couleur pâle ou un remplissage faiblement opaque pour préserver le contraste ; pour voir la forme derrière du verre dépoli, combinez-la avec le générateur de glassmorphism.

Modification

Le résultat est constitué d’un seul tracé avec des courbes de Bézier cubiques ; il s’ouvre donc dans n’importe quel éditeur vectoriel. Pour modifier quelques points à la main, collez-le dans l’éditeur SVG.

Comment l'utiliser

  1. Choisissez le nombre de points et le niveau d’aléatoire.
  2. Sélectionnez une couleur ou un dégradé.
  3. Cliquez pour générer de nouveaux blobs jusqu’à obtenir celui qui vous convient, puis téléchargez ou copiez le SVG.

Confidentialité et limitations

Les formes sont dessinées dans votre navigateur.

Outils associés

Vague SVGÉditeur SVGGlassmorphism

Questions fréquentes

Comment placer une photo à l’intérieur d’un blob ?

Copiez le tracé et utilisez-le dans un clipPath SVG, ou enregistrez le blob et utilisez-le comme mask-image CSS par-dessus la photo.

Puis-je animer un blob ?

Oui : générez deux blobs avec le même nombre de points et animez l’attribut d du tracé entre les deux ; un nombre de points identique rend la transformation fluide.

Y a-t-il une limite de taille ?

Le SVG mesure 400 × 400, mais peut être redimensionné à n’importe quelle taille sans perdre en netteté.

Outil gratuit · dans votre navigateur exécutions · aucun compte requis