So erstellen Sie wellenförmige Formen und Muster in CSS

Die Welle ist wahrscheinlich eine der am schwierigsten zu erstellenden Formen in CSS. Wir versuchen immer, es mit Eigenschaften wie anzunähern border-radius und viele magische Zahlen, bis wir etwas bekommen, das sich irgendwie nah anfühlt. Und das ist, bevor wir überhaupt zu Wellenmustern kommen, die schwieriger sind.

"SVG es!" Sie könnten sagen, und Sie haben wahrscheinlich Recht, dass es ein besserer Weg ist. Aber wir werden sehen, dass CSS schöne Wellen schlagen kann und der Code dafür nicht verrückt sein muss. Und rate was? Ich habe ein Online-Generator um es noch trivialer zu machen!

Wenn Sie mit dem Generator spielen, können Sie sehen, dass das CSS, das er ausspuckt, nur aus zwei Farbverläufen und einer CSS-Maskeneigenschaft besteht – nur diese beiden Dinge, und wir können jede Art von Wellenform oder Muster erstellen. Ganz zu schweigen davon, dass wir die Größe und die Krümmung der Wellen ganz einfach steuern können, wenn wir schon dabei sind.

Einige der Werte können wie folgt aussehen: „magische Zahlen“, aber dahinter steckt tatsächlich Logik, und wir werden den Code analysieren und alle Geheimnisse hinter der Erzeugung von Wellen entdecken.

Dieser Artikel ist eine Fortsetzung von ein vorheriges wo ich alle Arten von verschiedenen Zickzack-, Zielfernrohr-, Bogenkanten- und ja, wellenförmigen Grenzlinien gebaut habe. Ich empfehle dringend, diesen Artikel zu lesen, da er dieselbe Technik verwendet, die wir hier behandeln werden, jedoch detaillierter.

Die Mathematik hinter Wellen

Genau genommen gibt es hinter Wellenformen kein Patentrezept. Jede Form mit auf- und absteigenden Kurven kann als Welle bezeichnet werden, daher beschränken wir uns nicht auf komplexe Mathematik. Stattdessen reproduzieren wir eine Welle mit den Grundlagen der Geometrie.

Beginnen wir mit einem einfachen Beispiel mit zwei Kreisformen:

Wir haben zwei Kreise mit gleichem Radius nebeneinander. Siehst du diese rote Linie? Es bedeckt die obere Hälfte des ersten Kreises und die untere Hälfte des zweiten. Stellen Sie sich nun vor, Sie nehmen diese Zeile und wiederholen sie.

Wir sehen bereits die Welle. Lassen Sie uns nun den unteren Teil (oder den oberen) füllen, um Folgendes zu erhalten:

Tada! Wir haben eine wellige Form und eine, die wir mit einer Variablen für die Kreisradien steuern können. Dies ist eine der einfachsten Wellen, die wir machen können, und es ist die, in der ich angegeben habe this vorheriger Artikel

Lassen Sie uns ein wenig Komplexität hinzufügen, indem wir die erste Illustration nehmen und die Kreise ein wenig verschieben:

Wir haben immer noch zwei Kreise mit denselben Radien, aber sie sind nicht mehr horizontal ausgerichtet. In diesem Fall bedeckt die rote Linie nicht mehr die Hälfte der Fläche jedes Kreises, sondern eine kleinere Fläche. Dieser Bereich wird durch die gestrichelte rote Linie begrenzt. Diese Linie kreuzt den Punkt, an dem sich beide Kreise treffen.

Nehmen Sie jetzt diese Linie und wiederholen Sie sie, und Sie erhalten eine weitere Welle, eine glattere.

Ich denke, du verstehst es. Indem wir die Position und Größe der Kreise steuern, können wir jede gewünschte Welle erzeugen. Wir können sogar Variablen für sie erstellen, die ich aufrufen werde P und S, Bzw.

Sie haben wahrscheinlich bemerkt, dass wir im Online-Generator die Welle mit zwei Eingängen steuern. Sie werden den obigen Variablen zugeordnet. S ist die „Größe der Welle“ und P ist die „Krümmung der Welle“.

ich definiere P as P = m*S woher m ist die Variable, die Sie anpassen, wenn Sie die Krümmung der Welle aktualisieren. Dadurch haben wir immer die gleiche Krümmung, auch wenn wir S aktualisieren.

m kann ein beliebiger Wert zwischen sein 0 und 2. 0 geben uns den ersten speziellen Fall, in dem beide Kreise horizontal ausgerichtet sind. 2 ist eine Art Maximalwert. Wir können größer werden, aber nach ein paar Tests fand ich, dass alles darüber hinausging 2 erzeugt schlechte, flache Formen.

Vergessen wir nicht den Radius unseres Kreises! Das kann auch mit definiert werden S und P so was:

R = sqrt(P² + S²)/2

Wann P entspricht 0, wir werden haben R = S/2.

Wir haben alles, um all dies in CSS in Farbverläufe umzuwandeln!

Farbverläufe erstellen

Unsere Wellen verwenden Kreise, und wenn wir von Kreisen sprechen, sprechen wir von radialen Farbverläufen. Und da zwei Kreise unsere Welle definieren, verwenden wir logischerweise zwei radiale Farbverläufe.

Wir beginnen mit dem speziellen Fall wo P entspricht 0. Hier ist die Illustration des ersten Farbverlaufs:

Dieser Verlauf erzeugt die erste Krümmung, indem er den gesamten Bodenbereich ausfüllt – sozusagen das „Wasser“ der Welle.

.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

Das --size Variable definiert den Radius und die Größe des radialen Farbverlaufs. Wenn wir es mit dem vergleichen S Variable, dann ist es gleich S/2.

Jetzt fügen wir den zweiten Farbverlauf hinzu:

Der zweite Farbverlauf ist nichts anderes als ein Kreis, um unsere Welle zu vervollständigen:

radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%

Wenn Sie überprüfen der vorherige Artikel Sie werden sehen, dass ich nur wiederhole, was ich dort bereits getan habe.

Ich habe beide Artikel befolgt, aber die Verlaufskonfigurationen sind nicht gleich.

Das liegt daran, dass wir mit unterschiedlichen Verlaufskonfigurationen dasselbe Ergebnis erzielen können. Wenn Sie beide Konfigurationen vergleichen, werden Sie einen leichten Unterschied in der Ausrichtung feststellen, aber der Trick ist derselbe. Dies kann verwirrend sein, wenn Sie mit Farbverläufen nicht vertraut sind, aber keine Sorge. Mit etwas Übung gewöhnt man sich daran und findet selbst heraus, dass unterschiedliche Syntax zum gleichen Ergebnis führen kann.

Hier ist der vollständige Code für unsere erste Welle:

.wave {
  --size: 50px;

  mask:
    radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

Nehmen wir nun diesen Code und passen ihn an, wo wir eine Variable einführen, die ihn vollständig wiederverwendbar macht, um jede gewünschte Welle zu erstellen. Wie wir im vorherigen Abschnitt gesehen haben, besteht der Haupttrick darin, die Kreise so zu verschieben, dass sie nicht mehr ausgerichtet sind. Aktualisieren wir also die Position jedes Kreises. Wir werden den ersten nach oben und den zweiten nach unten verschieben.

Unser Code wird so aussehen:

.wave {
  --size: 50px;
  --p: 25px;

  mask:
    radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}

Ich habe eine neue eingeführt --p Variable, die verwendet wird, um die Mittelposition jedes Kreises zu definieren. Der erste Farbverlauf wird verwendet 50% calc(-1*var(--p)), also bewegt sich seine Mitte nach oben, während der zweite verwendet wird calc(var(--size) + var(--p)) um es nach unten zu verschieben.

Eine Demo sagt mehr als tausend Worte:

Die Kreise sind weder ausgerichtet noch berühren sie sich. Wir haben sie weit voneinander entfernt, ohne ihre Radien zu ändern, also haben wir unsere Welle verloren. Aber wir können die Dinge reparieren, indem wir die gleiche Mathematik verwenden, die wir zuvor verwendet haben, um den neuen Radius zu berechnen. Erinnere dich daran R = sqrt(P² + S²)/2. In unserem Fall, --size entspricht S/2; das gleiche für --p was auch gleich ist P/2 da wir beide Kreise bewegen. Der Abstand zwischen ihren Mittelpunkten ist also doppelt so groß wie der Wert von --p dafür:

R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))

Das gibt uns ein Ergebnis von 55.9px.

Unsere Welle ist zurück! Lassen Sie uns diese Gleichung in unser CSS einfügen:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p) * var(--p) + var(--size)*var(--size));

  mask:
    radial-gradient(var(--R) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

Dies ist gültiger CSS-Code. sqrt() ist Teil der Spezifikation, aber zum Zeitpunkt, an dem ich dies schreibe, gibt es keine Browserunterstützung dafür. Das bedeutet, dass wir ein bisschen JavaScript oder Sass brauchen, um diesen Wert zu berechnen, bis wir breiter werden sqrt() unterstützen.

Das ist verdammt cool: Es braucht nur zwei Farbverläufe, um eine coole Welle zu erhalten, die Sie mit dem auf jedes Element anwenden können mask Eigentum. Kein Trial-and-Error mehr – Sie müssen lediglich zwei Variablen aktualisieren und schon kann es losgehen!

Umkehrung der Welle

Was ist, wenn wir wollen, dass die Wellen in die andere Richtung gehen, wo wir den „Himmel“ anstelle des „Wassers“ füllen? Ob Sie es glauben oder nicht, alles, was wir tun müssen, ist, zwei Werte zu aktualisieren:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p) * var(--p) + var(--size) * var(--size));

  mask:
    radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%)
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%) 
      50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
}

Alles, was ich dort getan habe, ist, einen Offset gleich hinzuzufügen 100%, oben hervorgehoben. Hier ist das Ergebnis:

Wir können eine freundlichere Syntax mit Schlüsselwortwerten in Betracht ziehen, um es noch einfacher zu machen:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size) * var(--size));

  mask:
    radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% bottom var(--size) / calc(4 * var(--size)) 100% repeat-x;
}

Wir benutzen die left und bottom Schlüsselwörter, um die Seiten und den Versatz anzugeben. Standardmäßig ist der Browser standardmäßig auf left und top — deshalb verwenden wir 100% um das Element nach unten zu verschieben. In Wirklichkeit bewegen wir es von der top by 100%, also ist es wirklich dasselbe wie zu sagen bottom. Viel einfacher zu lesen als Mathe!

Mit dieser aktualisierten Syntax müssen wir nur noch tauschen bottom für top – oder umgekehrt – um die Richtung der Welle zu ändern.

Und wenn Sie sowohl obere als auch untere Wellen erhalten möchten, kombinieren wir alle Farbverläufe in einer einzigen Deklaration:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  mask:
    /* Gradient 1 */
    radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      left calc(50% - 2*var(--size)) bottom 0 / calc(4 * var(--size)) 51% repeat-x,
    /* Gradient 2 */
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% bottom var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x,
    /* Gradient 3 */
    radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      left calc(50% - 2 * var(--size)) top 0 / calc(4 * var(--size)) 51% repeat-x,
    /* Gradient 4 */
    radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% top var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x;
}

Wenn Sie den Code überprüfen, werden Sie sehen, dass ich nicht nur alle Farbverläufe kombiniert, sondern auch deren Höhe reduziert habe 100% zu 51% sodass sie beide die Hälfte des Elements bedecken. Ja, 51%. Wir brauchen dieses kleine zusätzliche Prozent für eine kleine Überlappung, die Lücken vermeidet.

Was ist mit der linken und rechten Seite?

Es sind deine Hausaufgaben! Nehmen Sie, was wir mit den oberen und unteren Seiten gemacht haben, und versuchen Sie, die Werte zu aktualisieren, um die rechten und linken Werte zu erhalten. Keine Sorge, es ist einfach und das einzige, was Sie tun müssen, ist, Werte zu tauschen.

Wenn Sie Probleme haben, können Sie immer verwenden der Online-Generator um den Code zu überprüfen und das Ergebnis zu visualisieren.

Wellenlinien

Zuvor haben wir unsere erste Welle mit einer roten Linie erstellt und dann den unteren Teil des Elements gefüllt. Wie wäre es mit dieser Wellenlinie? Das ist auch eine Welle! Noch besser ist es, wenn wir seine Dicke mit einer Variablen steuern können, damit wir sie wiederverwenden können. Machen wir das!

Wir werden nicht bei Null anfangen, sondern den vorherigen Code nehmen und ihn aktualisieren. Als erstes müssen Sie die Farbstopps der Farbverläufe aktualisieren. Beide Farbverläufe beginnen von einer transparenten Farbe zu einer undurchsichtigen Farbe oder umgekehrt. Um eine Linie oder einen Rand zu simulieren, müssen wir von transparent beginnen, zu undurchsichtig wechseln und dann wieder zurück zu transparent:

#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%

Ich denke das hast du schon erraten --b Variable ist das, was wir verwenden, um die Linienstärke zu steuern. Wenden wir dies auf unsere Farbverläufe an:

Ja, das Ergebnis ist weit entfernt von einer Wellenlinie. Aber wenn wir genau hinsehen, können wir sehen, dass ein Gradient die untere Krümmung korrekt erzeugt. Alles, was wir wirklich tun müssen, ist also, den zweiten Gradienten zu korrigieren. Anstatt einen vollen Kreis beizubehalten, machen wir einen Teilkreis wie den anderen Farbverlauf.

Noch weit, aber wir haben beide Krümmungen, die wir brauchen! Wenn Sie den Code überprüfen, werden Sie sehen, dass wir zwei identische Farbverläufe haben. Der einzige Unterschied ist ihre Positionierung:

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) 
      calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
    radial-gradient(var(--R) at left 50% top    calc(-1*var(--p)), var(--_g)) 
      50% var(--size)/calc(4*var(--size)) 100%;
}

Jetzt müssen wir die Größe und Position für die endgültige Form anpassen. Wir brauchen den Gradienten nicht mehr in voller Höhe, also können wir ihn ersetzen 100% mit diesem:

/* Size plus thickness */
calc(var(--size) + var(--b))

Hinter diesem Wert steckt keine mathematische Logik. Es muss nur groß genug für die Krümmung sein. Wir werden seine Wirkung auf das Muster gleich sehen. Aktualisieren wir in der Zwischenzeit auch die Position, um die Farbverläufe vertikal zu zentrieren:

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;  
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) 
      calc(50% - 2*var(--size)) 50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat,
    radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), var(--_g)) 50%
      50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat;
}

Immer noch nicht ganz da:

Ein Farbverlauf muss sich etwas nach unten und der andere etwas nach oben bewegen. Beide müssen sich um die Hälfte ihrer Höhe bewegen.

Wir sind fast da! Wir brauchen eine kleine Korrektur, damit der Radius eine perfekte Überlappung hat. Beide Linien müssen um die Hälfte des Randes versetzt sein (--b) Dicke:

Wir haben es! Eine perfekte Wellenlinie, die wir leicht anpassen können, indem wir einige Variablen steuern:

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: calc(sqrt(var(--p) * var(--p) + var(--size) * var(--size)) + var(--b) / 2);

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), var(--_g)) 
     calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--p)),var(--_g)) 
     50%  calc(50% + var(--size)/2 + var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x;
}

Ich weiß, dass die Logik etwas braucht, um sie zu verstehen. Das ist in Ordnung, und wie gesagt, das Erstellen einer Wellenform in CSS ist nicht einfach, ganz zu schweigen von der kniffligen Mathematik dahinter. Deshalb die Online-Generator ist ein Lebensretter – Sie können den endgültigen Code leicht erhalten, auch wenn Sie die Logik dahinter nicht vollständig verstehen.

Wellenmuster

Wir können ein Muster aus der gerade erstellten Wellenlinie machen!

Oh nein, der Code des Musters wird noch schwieriger zu verstehen sein!

Gar nicht! Den Code haben wir bereits. Alles, was wir tun müssen, ist zu entfernen repeat-x von dem, was wir bereits haben, und tada. 🎉

Ein schönes Wellenmuster. Erinnerst du dich an die Gleichung, von der ich sagte, dass wir sie noch einmal durchgehen würden?

/* Size plus thickness */
calc(var(--size) + var(--b))

Nun, das steuert den Abstand zwischen den Linien im Muster. Wir können eine Variable daraus machen, aber es besteht keine Notwendigkeit für mehr Komplexität. Ich verwende dafür nicht einmal eine Variable im Generator. Vielleicht ändere ich das später.

Hier ist das gleiche Muster, das in eine andere Richtung geht:

Ich stelle Ihnen den Code in dieser Demo zur Verfügung, aber ich möchte, dass Sie ihn analysieren und verstehen, welche Änderungen ich vorgenommen habe, um dies zu erreichen.

Vereinfachung des Codes

In allen vorherigen Demos definieren wir immer die --size und --p unabhängig. Aber erinnern Sie sich, wie ich vorhin erwähnt habe, dass der Online-Generator auswertet P als gleich m*S, Wobei m steuert die Krümmung der Welle? Indem wir einen festen Multiplikator definieren, können wir mit einer bestimmten Welle arbeiten und der Code kann einfacher werden. Das brauchen wir in den meisten Fällen: eine bestimmte Wellenform und eine Variable, um ihre Größe zu steuern.

Lassen Sie uns unseren Code aktualisieren und die einführen m Variable:

.wave {
  --size: 50px;
  --R: calc(var(--size) * sqrt(var(--m) * var(--m) + 1));

  mask:
    radial-gradient(var(--R) at 50% calc(var(--size) * (1 + var(--m))), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-1 * var(--size) * var(--m)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  }

Wie Sie sehen, brauchen wir die nicht mehr --p Variable. Ich habe es durch ersetzt var(--m)*var(--size), und einige der Mathematik entsprechend optimiert. Wenn wir nun mit einer bestimmten Wellenform arbeiten wollen, können wir das weglassen --m Variable und ersetzen Sie sie durch einen festen Wert. Lass es uns versuchen .8 zum Beispiel.

--size: 50px;
--R: calc(var(--size) * 1.28);

mask:
  radial-gradient(var(--R) at 50% calc(1.8 * var(--size)), #000 99%, #0000 101%) 
    calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
  radial-gradient(var(--R) at 50% calc(-.8 * var(--size)), #0000 99%, #000 101%) 
    50% var(--size) / calc(4 * var(--size)) 100% repeat-x;

Sehen Sie, wie der Code jetzt einfacher ist? Nur eine Variable, um Ihre Welle zu steuern, und Sie müssen sich nicht mehr darauf verlassen sqrt() die keine Browserunterstützung hat!

Sie können dieselbe Logik auf alle Demos anwenden, die wir gesehen haben, sogar für die Wellenlinien und das Muster. Ich habe mit einer detaillierten mathematischen Erklärung begonnen und den generischen Code angegeben, aber in einem echten Anwendungsfall benötigen Sie möglicherweise einfacheren Code. Das mache ich die ganze Zeit. Ich verwende selten den generischen Code, aber ich ziehe immer eine vereinfachte Version in Betracht, insbesondere weil ich in den meisten Fällen einige bekannte Werte verwende, die nicht als Variablen gespeichert werden müssen. (Spoiler-Alarm: Ich werde am Ende ein paar Beispiele teilen!)

Einschränkungen dieses Ansatzes

Mathematisch gesehen sollte uns der von uns erstellte Code perfekte wellenförmige Formen und Muster geben, aber in Wirklichkeit werden wir auf einige seltsame Ergebnisse stoßen. Also, ja, diese Methode hat ihre Grenzen. Beispielsweise kann der Online-Generator schlechte Ergebnisse liefern, insbesondere bei Wellenlinien. Ein Teil des Problems ist auf eine bestimmte Kombination von Werten zurückzuführen, bei der das Ergebnis durcheinander gebracht wird, z. B. wenn ein großer Wert für die Randstärke im Vergleich zur Größe verwendet wird:

In den anderen Fällen ist es das Problem im Zusammenhang mit einigen Rundungen, die zu einer Fehlausrichtung und Lücken zwischen den Wellen führen:

Trotzdem denke ich, dass die Methode, die wir behandelt haben, immer noch gut ist, weil sie in den meisten Fällen glatte Wellen erzeugt, und wir können die schlechten Ergebnisse leicht vermeiden, indem wir mit verschiedenen Werten spielen, bis wir sie perfekt haben.

Wrapping up

Ich hoffe, dass Sie nach diesem Artikel nicht mehr mit Versuch und Irrtum herumfummeln werden, um eine wellenförmige Form oder ein Muster zu erstellen. Zusätzlich zum Online-Generator, haben Sie alle mathematischen Geheimnisse, um jede Art von Welle zu erzeugen, die Sie wollen!

Der Artikel endet hier, aber jetzt haben Sie ein leistungsstarkes Werkzeug, um ausgefallene Designs mit wellenförmigen Formen zu erstellen. Hier ist Inspiration für den Einstieg …

Was ist mit Ihnen? Verwenden Sie meinen Online-Generator (oder schreiben Sie den Code manuell, wenn Sie bereits die ganze Mathematik auswendig gelernt haben) und zeigen Sie mir Ihre Kreationen! Lassen Sie uns eine gute Sammlung im Kommentarbereich haben.