Générateur de vagues et de blobs en CSS et SVG
Déplacez quelques curseurs, obtenez une forme, copiez le code. Des vagues pour les séparateurs de section, des blobs pour les arrière-plans et les masques — exportés en SVG, en arrière-plan CSS, en clip-path ou en un seul border-radius. Rien n'est envoyé et rien n'est généré sur un serveur : les courbes sont calculées dans cette page, ce qui explique à la fois l'instantanéité et le fait que tout continue de fonctionner hors ligne.
Style
Forme
Régler
Sortie
Collez ceci directement dans votre projet. Le SVG ne porte aucun balisage identifiant, aucun commentaire de générateur et aucun lien de retour vers ce site.
Pourquoi ces courbes n'ont aucune cassure
La plupart des générateurs de ce type placent les points de contrôle de Bézier à vue de nez — au tiers du chemin vers le point suivant, en général — et le résultat présente une petite cassure à chaque point d'échantillonnage. On ne la voit pas sur une vignette et on ne peut pas la rater une fois la forme affichée sur trois mètres derrière une image de couverture. Celui-ci dérive chaque point de contrôle de la tangente d'une spline de Catmull-Rom, de sorte que les deux segments de courbe qui se rejoignent en un point calculent la *même* direction à partir des deux mêmes voisins. La régularité n'est pas un réglage ici, ni quelque chose que l'on vérifie après coup : c'est une conséquence de l'arithmétique, et la suite de tests vérifie qu'elle tient à chaque jonction sur des milliers de formes générées.
Le CSS que vous copiez est bien la forme que vous avez vue
Deux choses se cassent habituellement entre l'aperçu d'un générateur et le CSS qu'il vous remet. La première est le dièse d'une couleur hexadécimale : dans une URI de données, un `#` non encodé met fin à l'URL, le navigateur lit le reste comme un fragment, et l'arrière-plan ne se peint tout simplement pas — sans erreur en console ni rien dans le panneau réseau. Ici chaque couleur est encodée en pourcentage avant d'atteindre la feuille de style. La seconde ne concerne que les blobs en border-radius : si les deux rayons qui se rejoignent sur un bord dépassent 100 % à eux deux, le navigateur réduit *tous* les coins pour compenser, et la forme qu'il dessine est donc plus plate que celle que vous aviez choisie. Les valeurs émises par cet outil sont générées à l'intérieur de cette limite, si bien que le navigateur n'y touche pas.
Les octets, affichés plutôt que cachés
Une forme collée dans une feuille de style est du poids à chaque chargement de page, donc le compteur d'octets se trouve sous la zone de sortie et se met à jour pendant que vous faites glisser. Les coordonnées sont arrondies à deux décimales — un centième de pixel sur un canevas de 1440 unités, bien en deçà de ce qu'un écran peut montrer — ce qui retire généralement un tiers ou plus de la longueur du tracé sans aucun changement visible. Si le nombre paraît élevé, réduire les points est presque toujours la solution : c'est le seul curseur qui change la taille de façon significative.
Sans compte, sans envoi, sans filigrane
Il n'y a aucun serveur à qui envoyer quoi que ce soit. Le générateur est fait de quelques kilo-octets de JavaScript qui s'exécutent dans cette page, vos réglages sont conservés dans le stockage local de ce navigateur, et les formes que vous créez sont les vôtres sans attribution requise. Une fois la page chargée, elle fonctionne sans connexion, ce qui veut aussi dire qu'elle fonctionne derrière un proxy d'entreprise qui bloque la moitié d'internet.
Questions
Est-ce gratuit ?
Oui, sans compte, sans filigrane, sans limite quotidienne et sans attribution requise. Les formes que vous générez vous appartiennent et sont utilisables commercialement.
Y a-t-il quelque chose qui est envoyé ?
Non. Il n'y a pas de serveur. Les courbes sont calculées dans votre navigateur et vos réglages restent dans le stockage local de ce navigateur. Vous pouvez surveiller le panneau réseau pendant que vous travaillez, il reste vide.
À quoi sert la graine ?
Elle rend une forme reproductible. Les mêmes graine et réglages donnent toujours la courbe identique : vous pouvez la noter, l'envoyer à un collègue, ou revenir le mois prochain et retrouver la même forme plutôt qu'un nouveau tirage. Elle accepte aussi bien un mot qu'un nombre.
Pourquoi mon arrière-plan CSS ne s'affiche-t-il pas ?
Presque toujours à cause d'un dièse non encodé venant d'une couleur hexadécimale, qui tronque l'URI de données au premier `#`. La sortie d'ici est déjà encodée : copiez la déclaration entière plutôt que de la reconstruire à la main autour de votre propre couleur.
Puis-je les utiliser dans un projet commercial ?
Oui. Une courbe générée est une liste de coordonnées, pas une œuvre créative assortie d'une licence, et rien ici ne revendique de droits sur ce que vous faites.
Est-ce que ça marche hors ligne ?
Une fois la page chargée, oui. Il n'y a aucune image à récupérer et aucun serveur à interroger, donc l'outil continue de générer des formes connexion coupée.