Balayage
Gratuit, sans inscription, fonctionne dans votre navigateur.
Deux points et beaucoup de douceur : une unique courbe balayée, sans aucune répétition. La vague la moins ondulée d'ici, et celle qui fonctionne le mieux quand le séparateur fait un travail de graphisme plutôt que de simplement séparer deux couleurs.
Les réglages qui la produisent
| Générateur | Vague |
|---|---|
| Points | 2 |
| Amplitude | 85% |
| Irrégularité | 0% |
| Ligne de base | 52% |
| Couches | 1 |
| Douceur | 130% |
| Graine | 5 |
Ce qu'il faut savoir
- Deux points, c'est le minimum que le générateur accepte, et cela donne une montée et une descente.
- Irrégularité nulle : la courbe est un balayage mathématique net.
- La vague la plus légère du catalogue, à 246 octets.
Ce que ça coûte en octets
Cette forme exacte pèse 246 octets en SVG et 407 octets en arrière-plan CSS — l'URI de données est plus lourde parce que l'encodage en pourcentage coûte trois caractères pour chacun qu'il échappe. Les deux chiffres concernent la forme montrée ci-dessus, avec deux décimales de précision sur les coordonnées.
| Format | Taille |
|---|---|
| SVG | 246 B |
| Arrière-plan CSS | 407 B |
| clip-path CSS | 438 B |
Le début du SVG de Balayage
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-720 166.4C-564 166.4,-312 166.4,0 166.4C312 166.4,408 166.4,720 166.4C1032 166.4,1284 166.4,1440 166.4L1440 320L-720 320Z" fill="#4f46e5"/></svg>Plus en détail
Retournez celle-ci horizontalement et elle change complètement de caractère — un balayage a une direction, et le sens dans lequel il court devrait s'accorder avec le parcours de l'œil dans la section du dessus. C'est aussi pourquoi les contrôles de miroir sont une réflexion de la courbe existante et non une régénération : retourner ne doit pas relancer les dés sur une forme que vous aviez déjà retenue.
Questions
Comment modifier Balayage une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Balayage dans la rangée de préréglages, puis faites glisser ce que vous voulez. Le préréglage est un point de départ, pas un verrou — tous les curseurs restent actifs, et le champ de graine accepte un mot si vous préférez nommer votre forme plutôt que la numéroter.
Sera-t-elle identique la prochaine fois ?
Oui, tant que la graine est la même. Celle-ci est la graine 5 avec 2 points. Le générateur est déterministe : ces réglages reproduisent cette courbe exacte sur n'importe quel appareil.
Puis-je utiliser une autre couleur ?
Oui — la couleur est appliquée à l'export, elle n'est pas figée dans la géométrie. L'aperçu ci-dessus utilise la couleur par défaut ; choisissez la vôtre dans le générateur et le SVG, l'arrière-plan CSS et le clip-path suivront.
Chaque chiffre et chaque forme de cette page ont été produits en exécutant le générateur au moment de la compilation : ils décrivent donc l'outil que vous vous apprêtez à utiliser, et non une version qui a existé un jour.