Générateur SVG : blobs, vagues, motifs et dégradés

Générer un blob, une vague ou un motif SVG : méthode et exports

Le générateur calcule des tracés vectoriels à partir d'une graine aléatoire : même graine et mêmes réglages donnent exactement le même fichier. Six modes sont proposés (blob, vagues, motif répétitif, dégradé maillé, courbes topographiques, badge), exportables en SVG, en composant React, en fond CSS, en data URI ou en PNG jusqu'à 4 fois la taille. Le blob par défaut pèse moins de 1 Ko.

Comment un blob est construit

L'outil répartit N points sur un cercle (N = complexité, de 3 à 16) dont le rayon vaut 35 % du plus petit côté. Chaque rayon est décalé au hasard dans une fourchette de ± (aléatoire ÷ 10) × 22,5 % du rayon, sans descendre sous 20 px. Les points sont ensuite reliés par une courbe de Catmull-Rom convertie en segments de Bézier cubiques, dont la tension suit le réglage « arrondi ». Le hasard vient d'un générateur pseudo-aléatoire déterministe (Mulberry32) initialisé par la graine.

Exemple

Réglages par défaut : toile de 600 × 600 px, 8 points, aléatoire 6, graine 42. Le rayon de base vaut 210 px, chaque point s'écarte d'au plus 28,35 px, et le tracé compte 8 segments de Bézier. Le fichier SVG fait 952 octets avec son dégradé linéaire à trois couleurs ; en data URI base64, il passe à environ 1 300 caractères, un tiers de plus. La graine 43 donne une autre forme ; la graine 42 redonne toujours la même.

Options et limites

• Effets : grain (filtre de bruit fractal), ombre portée, rotation, miroir, 12 palettes et 10 préréglages.
• L'animation ajoute des règles CSS dans le fichier : elle fonctionne dans un navigateur mais pas dans la plupart des logiciels de mise en page ni dans l'export PNG, qui fige une image.
• Le grain et le flou du dégradé maillé reposent sur des filtres SVG, coûteux à afficher sur de grandes surfaces ou sur mobile.
• Le composant React est obtenu par conversion du texte SVG : relisez-le avant de l'intégrer dans un projet typé.

Tout est calculé dans votre navigateur ; aucune image n'est envoyée à un serveur.

Questions fréquentes

Comment retrouver exactement la même forme SVG ?

Notez la graine affichée (42 par défaut) et vos réglages : le générateur pseudo-aléatoire de l'outil produit toujours le même tracé pour la même graine. Changer seulement la graine, par exemple 43, donne une nouvelle forme avec les mêmes paramètres. Le bouton de tirage aléatoire choisit une graine entre 0 et 99 999.

Vaut-il mieux exporter en SVG ou en PNG ?

Le SVG reste net à toutes les tailles et pèse souvent moins de 1 Ko pour un blob simple (952 octets avec les réglages par défaut). Le PNG convient aux outils qui n'acceptent pas le vectoriel ; l'outil l'exporte en 1x, 2x ou 4x la taille de la toile, soit 2 400 × 2 400 px en 4x pour une toile de 600 px. L'animation est perdue en PNG.

Comment utiliser le blob en fond de page CSS ?

Choisissez le format CSS : l'outil compresse le SVG, l'encode en data URI et fournit une règle background-image avec background-size: cover et un centrage. Collez-la dans la feuille de style de votre section. Le format data URI en base64 est environ un tiers plus lourd que le SVG d'origine.

L'animation fonctionne-t-elle partout ?

L'animation est écrite en CSS (keyframes) à l'intérieur du fichier SVG. Elle tourne quand le SVG est affiché dans un navigateur, mais Figma, Illustrator ou PowerPoint l'ignorent généralement, et l'export PNG ne conserve qu'une image fixe. La vitesse se règle entre 2 et 16 secondes par cycle.

L'outil est-il vraiment gratuit ?

Oui, l'intégralité des outils sur Kristools sont 100% gratuits et accessibles sans inscription.

Mes données sont-elles protégées ?

Oui. Tous les traitements sont effectués directement et en toute sécurité dans votre navigateur. Aucune donnée personnelle n'est envoyée vers nos serveurs.