Wie man Wellenförmige Formen & Muster in CSS erstellt

Die Welle ist wahrscheinlich eine der schwierigsten Formen, die man in CSS erstellen kann. Wir versuchen immer, sie mit Eigenschaften wie border-radius und vielen magischen Zahlen zu approximieren, bis wir etwas erhalten, das sich irgendwie nah anfühlt. Und das ist noch bevor wir überhaupt zu wellenförmigen Mustern kommen, die noch schwieriger sind.

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

Wenn Sie mit dem Generator spielen, können Sie sehen, dass der CSS-Code, den 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 dabei einfach steuern können.

Einige der Werte mögen wie „magische Zahlen“ aussehen, aber dahinter steckt tatsächlich Logik, und wir werden den Code zerlegen und alle Geheimnisse hinter der Erstellung von Wellen aufdecken.

Dieser Artikel ist eine Fortsetzung eines früheren Artikels, in dem ich alle möglichen verschiedenen Zickzack-, abgeschrägten, gekerbten und ja, wellenförmigen Ränder erstellt habe. Ich empfehle dringend, diesen Artikel zu lesen, da er die gleiche Technik verwendet, die wir hier behandeln werden, jedoch detaillierter.

Die Mathematik hinter Wellen

Genau genommen gibt es keine magische Formel hinter wellenförmigen Formen. Jede Form mit Kurven, die nach oben und unten gehen, kann als Welle bezeichnet werden, daher werden wir uns nicht auf komplexe Mathematik beschränken. Stattdessen werden wir eine Welle mit den Grundlagen der Geometrie reproduzieren.

Beginnen wir mit einem einfachen Beispiel, das zwei Kreisformen verwendet

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

Wir sehen bereits die Welle. Füllen wir nun den unteren Teil (oder den oberen) aus, um Folgendes zu erhalten

Tada! Wir haben eine wellenförmige Form, 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 diejenige, die ich in diesem früheren Artikel gezeigt habe.

Fügen wir ein wenig Komplexität hinzu, indem wir die erste Abbildung nehmen und die Kreise ein wenig verschieben

Wir haben immer noch zwei Kreise mit demselben Radius, aber sie sind nicht mehr horizontal ausgerichtet. In diesem Fall bedeckt die rote Linie nicht mehr die halbe Fläche jedes Kreises, sondern eine kleinere Fläche. Diese Fläche ist durch die gestrichelte rote Linie begrenzt. Diese Linie kreuzt den Punkt, an dem sich beide Kreise treffen.

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

Ich glaube, Sie verstehen es. Durch die Steuerung der Position und Größe der Kreise können wir jede gewünschte Welle erstellen. Wir können sogar Variablen dafür erstellen, die ich P und S nennen werde.

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

Ich definiere P als P = m*S, wobei m die Variable ist, die Sie beim Ändern der Krümmung der Welle anpassen. Dies ermöglicht es uns, immer die gleiche Krümmung zu haben, auch wenn wir S ändern.

m kann jeden Wert zwischen 0 und 2 annehmen. 0 ergibt den ersten Sonderfall, bei dem beide Kreise horizontal ausgerichtet sind. 2 ist eine Art Maximalwert. Wir können auch größer gehen, aber nach einigen Tests habe ich festgestellt, dass alles über 2 schlechte, flache Formen ergibt.

Vergessen wir nicht den Radius unseres Kreises! Dieser kann auch mithilfe von S und P wie folgt definiert werden:

R = sqrt(P² + S²)/2
R = sqrt(m²*S² + S²)/2
R = S*sqrt(m² + 1)/2

Wenn m gleich 0 ist (d. h. P gleich 0 ist), dann ist R = S/2.

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

Erstellung von Farbverläufen

Unsere Wellen verwenden Kreise, und wenn wir über Kreise sprechen, sprechen wir über radiale Farbverläufe. Da unsere Welle durch zwei Kreise definiert wird, werden wir logischerweise zwei radiale Farbverläufe verwenden.

Wir beginnen mit dem Sonderfall, bei dem P gleich 0 ist. Hier ist die Abbildung des ersten Farbverlaufs

Dieser Farbverlauf erzeugt die erste Krümmung und füllt den gesamten unteren Bereich aus – 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;
}

Die Variable --size definiert den Radius und die Größe des radialen Farbverlaufs. Wenn wir sie mit der Variablen S vergleichen, ist sie gleich S/2.

Nun 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 sich den vorherigen Artikel ansehen, werden Sie sehen, dass ich einfach wiederhole, was ich dort bereits getan habe.

Ich habe beide Artikel verfolgt, aber die Farbverlaufskonfigurationen sind nicht gleich.

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

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 so an, dass wir eine Variable einführen, die dies vollständig wiederverwendbar macht, um jede gewünschte Welle zu erstellen. Wie wir im vorherigen Abschnitt gesehen haben, besteht der Haupttrick darin, die Kreise zu bewegen, damit sie nicht mehr ausgerichtet sind. Lassen Sie uns also die Position jedes einzelnen aktualisieren. Wir werden den ersten nach oben und den zweiten nach unten bewegen.

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 Variable --p eingeführt, die wir zur Definition der Mittelposition jedes Kreises verwenden. Der erste Farbverlauf verwendet 50% calc(-1*var(--p)), sodass sich sein Zentrum nach oben bewegt, während der zweite calc(var(--size) + var(--p)) verwendet, um ihn nach unten zu bewegen.

Eine Demo ist mehr wert als tausend Worte

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

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

Das ergibt ein Ergebnis von 55.9px.

Unsere Welle ist zurück! Setzen wir diese Gleichung in unser CSS ein

.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;
}

Das obige CSS sieht gültig aus, funktioniert aber nicht, da wir nicht zwei Längen multiplizieren können. Wir müssen die Variable m einführen, die die Krümmung steuert, wie im vorherigen Abschnitt erklärt.

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

  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;
}

Das ist verdammt cool: Es braucht nur zwei Farbverläufe, um eine coole Welle zu erhalten, die Sie mit der mask-Eigenschaft auf jedes Element anwenden können. Kein Probieren mehr – alles, was Sie brauchen, ist, zwei Variablen zu aktualisieren, und Sie sind fertig!

Welle umkehren

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

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

  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 von 100% hinzuzufügen, der oben hervorgehoben ist. 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;
  --m: 0.5;
  --p: calc(var(--m)*var(--size));
  --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1));

  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 verwenden die Schlüsselwörter left und bottom, um die Seiten und den Offset anzugeben. Standardmäßig verwendet der Browser left und top – deshalb verwenden wir 100%, um das Element nach unten zu verschieben. In Wirklichkeit verschieben wir es von top um 100%, sodass es tatsächlich dasselbe ist, als würde man bottom sagen. Viel einfacher zu lesen als Mathematik!

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

Und wenn Sie sowohl obere als auch untere Wellen wünschen, kombinieren wir alle Farbverläufe in einer einzigen Deklaration

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

  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 sich den Code ansehen, werden Sie feststellen, dass ich zusätzlich zum Kombinieren aller Farbverläufe auch ihre Höhe von 100% auf 51% reduziert habe, damit sie beide die Hälfte des Elements bedecken. Ja, 51%. Wir brauchen diesen kleinen zusätzlichen Prozentpunkt für eine kleine Überlappung, die Lücken vermeidet.

Was ist mit den linken und rechten Seiten?

Das ist Ihre Hausaufgabe! Nehmen Sie, was wir mit den oberen und unteren Seiten gemacht haben, und versuchen Sie, die Werte so anzupassen, dass die rechten und linken Werte erzielt werden. Keine Sorge, es ist einfach und das Einzige, was Sie tun müssen, ist Werte zu tauschen.

Wenn Sie Probleme haben, können Sie jederzeit den Online-Generator verwenden, 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. Was ist mit dieser wellenförmigen Linie? Das ist auch eine Welle! Noch besser ist es, wenn wir ihre 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. Das Erste, was wir tun müssen, ist, die Farbverlaufspunkte der Farbverläufe zu aktualisieren. Beide Farbverläufe beginnen mit einer transparenten Farbe und gehen zu einer deckenden, oder umgekehrt. Um eine Linie oder einen Rand zu simulieren, müssen wir von transparent beginnen, zu deckend gehen und dann wieder zurück zu transparent.

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

Ich denke, Sie haben bereits erraten, dass die Variable --b die ist, die wir zur Steuerung der Liniendicke verwenden. Wenden wir dies auf unsere Farbverläufe an

Ja, das Ergebnis ist weit von einer wellenförmigen Linie entfernt. Aber wenn man genau hinsieht, kann man erkennen, dass ein Farbverlauf die untere Krümmung korrekt erzeugt. Also müssen wir nur den zweiten Farbverlauf korrigieren. Anstatt einen vollständigen Kreis beizubehalten, machen wir einen teilweisen, wie den anderen Farbverlauf.

Immer noch weit entfernt, aber wir haben beide benötigten Krümmungen! 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;
  --m: 0.5;
  --p: calc(var(--m)*var(--size));
  --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1));

  --_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%;
}

Nun müssen wir Größe und Position für die endgültige Form anpassen. Wir müssen den Farbverlauf nicht mehr in voller Höhe haben, also können wir 100% durch dies ersetzen

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

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

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

  --_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 ein wenig nach unten und der andere ein wenig nach oben verschoben werden. Beide müssen um die Hälfte ihrer Höhe verschoben werden.

Wir sind fast da! Wir brauchen eine kleine Korrektur für den Radius, um eine perfekte Überlappung zu erzielen. Beide Linien müssen um die Hälfte des Randes (--b) Dicke verschoben werden.

Wir haben es geschafft! Eine perfekte wellenförmige Linie, die wir einfach durch Steuerung einiger Variablen anpassen können.

.wave {
  --size: 50px;
  --b: 10px;
  --m: 0.5;
  --p: calc(var(--m)*var(--size));
  --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1) + 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 Zeit zum Begreifen braucht. Das ist in Ordnung, und wie ich sagte, ist die Erstellung einer wellenförmigen Form in CSS nicht einfach, ganz zu schweigen von der kniffligen Mathematik dahinter. Deshalb ist der Online-Generator 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 aus der wellenförmigen Linie, die wir gerade erstellt haben, ein Muster machen!

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

Überhaupt nicht! Wir haben bereits den Code. Alles, was wir tun müssen, ist repeat-x aus dem, was wir bereits haben, zu entfernen, und tada. 🎉

Ein schönes wellenförmiges Muster. Erinnern Sie sich an die Gleichung, die wir wieder aufgreifen wollten?

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

Nun, das steuert den Abstand zwischen den Linien im Muster. Wir könnten eine Variable daraus machen, aber es gibt keinen Grund für weitere Komplexität. Ich benutze nicht einmal eine Variable dafür im Generator. Vielleicht ändere ich das später.

Hier ist dasselbe Muster in einer anderen Richtung

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

Code vereinfachen

In all den vorherigen Demos definieren wir --size und --p immer unabhängig. Aber --p ist eine Funktion von --size, also können wir es entfernen und unseren Code wie unten aktualisieren

.wave {
  --size: 50px;
  --m: 0.5;
  --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, benötigen wir die Variable --p nicht mehr. Ich habe sie durch var(--m)*var(--size) ersetzt und einige der Mathematik entsprechend optimiert. Wenn wir nun mit einer bestimmten wellenförmigen Form arbeiten möchten, können wir auch die Variable --m weglassen und sie durch einen festen Wert ersetzen. Versuchen wir zum Beispiel .8.

.wave {
  --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 einfach der Code jetzt ist? Nur eine Variable, um Ihre Welle zu steuern, und Sie müssen sich nicht mehr auf sqrt() verlassen!

Sie können die gleiche Logik auf alle Demos anwenden, die wir gesehen haben, auch auf die wellenförmigen Linien und das Muster. Ich habe mit einer detaillierten mathematischen Erklärung begonnen und den generischen Code geliefert, aber Sie stellen möglicherweise fest, dass Sie in einem realen Anwendungsfall einfacheren Code benötigen. Das mache ich die ganze Zeit. Ich verwende selten den generischen Code, betrachte aber immer eine vereinfachte Version, insbesondere da ich in den meisten Fällen einige bekannte Werte verwende, die nicht als Variablen gespeichert werden müssen. (Spoiler-Alarm: Ich werde am Ende einige Beispiele teilen!)

Einschränkungen dieses Ansatzes

Mathematisch gesehen sollte der von uns erstellte Code perfekte wellenförmige Formen und Muster ergeben, aber in Wirklichkeit werden wir einige seltsame Ergebnisse feststellen. Ja, diese Methode hat ihre Grenzen. Zum Beispiel ist der Online-Generator in der Lage, schlechte Ergebnisse zu liefern, insbesondere bei wellenförmigen Linien. Ein Teil des Problems liegt an einer bestimmten Kombination von Werten, bei der das Ergebnis durcheinandergerät, wie z. B. die Verwendung eines großen Wertes für die Randdicke im Vergleich zur Größe.

Für die anderen Fälle ist es das Problem, das mit einigen Rundungen zusammenhängt, die zu Fehlausrichtungen und Lücken zwischen den Wellen führen

Dennoch denke ich, dass die Methode, die wir behandelt haben, eine gute ist, da sie in den meisten Fällen glatte Wellen erzeugt und wir die schlechten Ergebnisse leicht vermeiden können, indem wir mit verschiedenen Werten spielen, bis wir sie perfekt erhalten.

Zusammenfassung

Ich hoffe, dass Sie nach diesem Artikel nicht mehr mit Trial-and-Error herumfummeln müssen, um eine wellenförmige Form oder ein Muster zu erstellen. Zusätzlich zu dem Online-Generator haben Sie alle mathematischen Geheimnisse, um jede Art von Welle zu erstellen, die Sie wünschen!

Der Artikel endet hier, aber jetzt haben Sie ein mächtiges Werkzeug, um schicke Designs mit wellenförmigen Formen zu erstellen. Hier sind einige Inspirationen für den Anfang…

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