←Accueil des Outils/100 % Côté Client

Générateur de Blobs Organiques et Fluides SVG (Courbes Lisses & Export React/CSS)

Générez des formes organiques et lisses de blobs SVG ainsi que des badges fluides dynamiques avec complexité de Bézier paramétrable, graine aléatoire (seed), dégradés et export instantané en React JSX / CSS.

Configuration du Blob

Seed: 1337
6 points
Minimal (3)Standard (6)Complex (16)
55%
Smooth (5%)Moderate (50%)Dramatic (100%)
Start Color
End Color
45°
Stroke Outline
Interactive View

SVG généré & Export

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <linearGradient id="_R1afnnnkq_" gradientTransform="rotate(45)">
      <stop offset="0%" stop-color="#6366f1" />
      <stop offset="100%" stop-color="#ec4899" />
    </linearGradient>
  </defs>
  <path d="M 431.99 250.00 C 428.88 301.71, 372.56 368.19, 330.23 388.97 C 287.90 409.74, 216.44 397.83, 178.02 374.67 C 139.60 351.51, 106.85 303.90, 99.72 250.00 C 92.60 196.10, 93.72 79.79, 135.25 51.24 C 176.78 22.70, 299.44 45.59, 348.89 78.71 C 398.35 111.84, 435.10 198.29, 431.99 250.00 Z" fill="url(#_R1afnnnkq_)" style="transition: all 0.3s ease;" />
</svg>
Points de contrôle du tracé
6anchor nodes
Indice de lissage
6Cubic Bezier segments
Taille estimée du fichier
665bytes payload
Référence technique et guide d'architecture

Générateur de Blobs Organiques et Fluides SVG (Courbes Lisses & Export React/CSS) — Guide de référence

Générez des formes organiques et lisses de blobs SVG ainsi que des badges fluides dynamiques avec complexité de Bézier paramétrable, graine aléatoire (seed), dégradés et export instantané en React JSX / CSS.

Paramètres clés et contrôles

complexityinteger (3 - 32)

Définit le nombre total de points d'ancrage répartis radialement autour de l'origine centrale pour construire le polygone de Bézier cyclique.

contrastfloat (0.0 - 1.0)

Définit l'amplitude de variance appliquée aux distances radiales des points par rapport au centre, modulant la déviation de forme et l'asymétrie.

seedstring | integer

Valeur de graine pseudo-aléatoire régissant les décalages déterministes en coordonnées polaires, garantissant une génération géométrique idempotente.

smoothnessfloat (0.1 - 1.0)

Coefficient de tension pour le calcul des points de contrôle cubiques Catmull-Rom ou de Bézier, dictant la fluidité de la courbure par rapport à des sommets anguleux.

exportFormatenum ('svg' | 'react' | 'css')

Format d'export cible : balisage brut SVG `<path>`, composant fonctionnel React JSX autonome, ou chaîne CSS `clip-path: path(...)`.

Conseils de pro et bonnes practices

Pièges courants et dépannage

Auto-intersection du tracé ou boucles de rebroussement lors de l'augmentation de la complexité

Réduisez le paramètre `contrast` ou ajustez le coefficient de tension Catmull-Rom en dessous de 0.5 pour empêcher les poignées de contrôle de Bézier cubiques adjacentes de se chevaucher ou de boucler au-delà des limites du segment radial.

Le CSS `clip-path: path(...)` ne s'adapte pas de manière responsive aux dimensions du parent

Convertissez le système de coordonnées en valeurs fractionnaires (0 à 1) et utilisez `clip-path: url(#blobId)` avec un élément SVG `<clipPath id="blobId" clipPathUnits="objectBoundingBox">`, permettant aux tracés vectoriels de s'étirer dynamiquement à 100% de l'élément hôte.

Raccord visible ou angles vifs au niveau du sommet de jonction initial/final de la boucle fermée

Assurez-vous d'implémenter un bouclage circulaire du tableau où le point de contrôle initial référence le dernier index d'ancre `(i - 1 + N) % N` et le point de contrôle terminal référence `(i + 1) % N`, garantissant une continuité de courbure C1/C2 à la fermeture de la frontière.

Foire aux questions (FAQ)

▼

▼

▼

▼

Outils et utilitaires connexes

Tous les outils →
Générateur de bannières ASCII Art et d'en-têtes de codeutility

Générez des bannières texte rétro en ASCII, des en-têtes d'encadrés de terminal et des blocs de commentaires de code multipolices avec styles de police personnalisables, caractères de bordure et texte prêt à copier.

Ouvrir l'outil→
Générateur de QR Code vCard (Carte de visite numérique et créateur de contacts)utility

Générez des QR codes vCard 3.0/4.0 contenant nom complet, numéro de téléphone, e-mail, entreprise, fonction, adresse et site web pour une intégration instantanée dans les carnets d'adresses de smartphones.

Ouvrir l'outil→
Spécification Technique des QR Codes et Formats de Charge Utileutility

Guide technique sur les niveaux de correction Reed-Solomon, la marge de sécurité et l'encodage normalisé pour Wi-Fi et vCard.

Ouvrir l'outil→
Guide Pratique de Comparaison de Différences Textuelles et de Codeutility

Manuel technique de l'algorithme Myers, modes d'affichage côte à côte et unifié, tolérance aux espaces et création de patches Git.

Ouvrir l'outil→
Calculateur de Pourcentage et de Marge de Précisionutility

Calculateur complet de pourcentages, taux de variation, remises commerciales, TVA, marge brute commerciale et taux de marque/markup.

Ouvrir l'outil→
Générateur de Slugs URL pour le Référencement (SEO)utility

Transformez vos titres et chaînes de caractères en slugs d'URL optimisés pour le référencement avec gestion des accents et séparateurs configurables.

Ouvrir l'outil→