Cara Membuat Bentuk & Pola Bergelombang di CSS

Gelombang mungkin adalah salah satu bentuk yang paling sulit dibuat di CSS. Kami selalu mencoba mendekatinya dengan properti seperti border-radius dan banyak angka ajaib sampai kita mendapatkan sesuatu yang terasa agak dekat. Dan itu bahkan sebelum kita masuk ke pola bergelombang, yang lebih sulit.

“SVG itu!” Anda mungkin berkata, dan Anda mungkin benar bahwa ini adalah cara yang lebih baik. Tetapi kita akan melihat bahwa CSS dapat membuat wave yang bagus dan kode untuk itu tidak harus gila-gilaan. Dan coba tebak? saya memiliki generator online untuk membuatnya lebih sepele!

Jika Anda bermain dengan generator, Anda dapat melihat bahwa CSS yang dikeluarkan hanya dua gradien dan properti topeng CSS — hanya dua hal itu dan kita dapat membuat bentuk atau pola gelombang apa pun. Belum lagi kita bisa dengan mudah mengontrol ukuran dan kelengkungan ombak saat kita berada di sana.

Beberapa nilai mungkin terlihat seperti “angka ajaib” tetapi sebenarnya ada logika di baliknya dan kami akan membedah kodenya dan menemukan semua rahasia di balik pembuatan gelombang.

Artikel ini merupakan tindak lanjut dari yang sebelumnya di mana saya membangun semua jenis zig-zag yang berbeda, scoped, scalloped, dan ya, perbatasan perbatasan bergelombang. Saya sangat merekomendasikan untuk memeriksa artikel itu karena menggunakan teknik yang sama yang akan kita bahas di sini, tetapi secara lebih rinci.

Matematika di balik gelombang

Sebenarnya, tidak ada satu formula ajaib di balik bentuk bergelombang. Bentuk apa pun dengan kurva yang naik dan turun dapat disebut gelombang, jadi kita tidak akan membatasi diri pada matematika yang rumit. Sebagai gantinya, kami akan mereproduksi gelombang menggunakan dasar-dasar geometri.

Mari kita mulai dengan contoh sederhana menggunakan dua bentuk lingkaran:

Kami memiliki dua lingkaran dengan jari-jari yang sama di samping satu sama lain. Apakah Anda melihat garis merah itu? Ini mencakup bagian atas dari lingkaran pertama dan bagian bawah dari yang kedua. Sekarang bayangkan Anda mengambil garis itu dan mengulanginya.

Kita sudah melihat gelombangnya. Sekarang mari kita isi bagian bawah (atau bagian atas) untuk mendapatkan yang berikut:

Tada! Kami memiliki bentuk bergelombang, dan yang dapat kami kendalikan menggunakan satu variabel untuk jari-jari lingkaran. Ini adalah salah satu ombak termudah yang bisa kita buat dan ini yang saya pamerkan this Artikel sebelumnya

Mari tambahkan sedikit kerumitan dengan mengambil ilustrasi pertama dan sedikit menggerakkan lingkaran:

Kami masih memiliki dua lingkaran dengan jari-jari yang sama tetapi mereka tidak lagi sejajar secara horizontal. Dalam hal ini, garis merah tidak lagi menutupi setengah luas setiap lingkaran, tetapi lebih kecil. Area ini dibatasi oleh garis merah putus-putus. Garis itu melintasi titik pertemuan kedua lingkaran.

Sekarang ambil garis itu dan ulangi dan Anda mendapatkan gelombang lain, yang lebih halus.

Saya pikir Anda mendapatkan ide. Dengan mengontrol posisi dan ukuran lingkaran, kita dapat membuat gelombang apa pun yang kita inginkan. Kami bahkan dapat membuat variabel untuk mereka, yang akan saya sebut P dan S, Masing-masing.

Anda mungkin telah memperhatikan bahwa, di generator online, kami mengontrol gelombang menggunakan dua input. Mereka memetakan ke variabel di atas. S adalah "Ukuran gelombang" dan P adalah "kelengkungan gelombang".

saya mendefinisikan P as P = m*S dimana m adalah variabel yang Anda sesuaikan saat memperbarui kelengkungan gelombang. Ini memungkinkan kita untuk selalu memiliki kelengkungan yang sama, bahkan jika kita memperbarui S.

m dapat berupa nilai apa pun di antara 0 dan 2. 0 akan memberi kita kasus khusus pertama di mana kedua lingkaran disejajarkan secara horizontal. 2 adalah jenis nilai maksimum. Kita bisa menjadi lebih besar, tetapi setelah beberapa tes saya menemukan apa pun di atas 2 menghasilkan bentuk datar yang buruk.

Jangan lupa jari-jari lingkaran kita! Itu juga dapat didefinisikan menggunakan S dan P seperti ini:

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

Ketika P adalah sama dengan 0, kami akan memiliki R = S/2.

Kami memiliki segalanya untuk mulai mengubah semua ini menjadi gradien di CSS!

Membuat gradien

Gelombang kami menggunakan lingkaran, dan ketika berbicara tentang lingkaran, kami berbicara tentang gradien radial. Dan karena dua lingkaran mendefinisikan gelombang kita, kita secara logis akan menggunakan dua gradien radial.

Kita akan mulai dengan kasus khusus dimana P adalah sama dengan 0. Berikut adalah ilustrasi dari gradien pertama:

Gradien ini menciptakan kelengkungan pertama saat mengisi seluruh area bawah — “air” gelombang bisa dikatakan.

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

Grafik --size variabel mendefinisikan jari-jari dan ukuran gradien radial. Jika kita bandingkan dengan S variabel, maka itu sama dengan S/2.

Sekarang mari tambahkan gradien kedua:

Gradien kedua tidak lain adalah lingkaran untuk melengkapi gelombang kita:

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

Jika Anda memeriksa artikel sebelumnya Anda akan melihat bahwa saya hanya mengulangi apa yang sudah saya lakukan di sana.

Saya mengikuti kedua artikel tetapi konfigurasi gradien tidak sama.

Itu karena kita dapat mencapai hasil yang sama menggunakan konfigurasi gradien yang berbeda. Anda akan melihat sedikit perbedaan dalam perataan jika Anda membandingkan kedua konfigurasi, tetapi triknya sama. Ini bisa membingungkan jika Anda tidak terbiasa dengan gradien, tetapi jangan khawatir. Dengan beberapa latihan, Anda akan terbiasa dan Anda akan menemukan sendiri bahwa sintaks yang berbeda dapat menghasilkan hasil yang sama.

Berikut adalah kode lengkap untuk gelombang pertama kami:

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

Sekarang mari kita ambil kode ini dan sesuaikan ke tempat kita memperkenalkan variabel yang membuat ini sepenuhnya dapat digunakan kembali untuk membuat gelombang apa pun yang kita inginkan. Seperti yang kita lihat di bagian sebelumnya, trik utamanya adalah memindahkan lingkaran agar tidak lagi sejajar jadi mari kita perbarui posisi masing-masing lingkaran. Kami akan memindahkan yang pertama ke atas dan yang kedua ke bawah.

Kode kita akan terlihat seperti ini:

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

Saya telah memperkenalkan yang baru --p variabel yang digunakan untuk menentukan posisi tengah setiap lingkaran. Gradien pertama menggunakan 50% calc(-1*var(--p)), jadi pusatnya bergerak ke atas saat yang kedua menggunakan calc(var(--size) + var(--p)) untuk memindahkannya ke bawah.

Demo bernilai seribu kata:

Lingkaran tidak sejajar atau menyentuh satu sama lain. Kami menempatkan mereka berjauhan tanpa mengubah jari-jarinya, jadi kami kehilangan gelombang kami. Tapi kita bisa memperbaikinya dengan menggunakan matematika yang sama yang kita gunakan sebelumnya untuk menghitung radius baru. Ingat bahwa R = sqrt(P² + S²)/2. Dalam kasus kami, --size adalah sama dengan S/2; sama untuk --p yang juga sama dengan P/2 karena kita menggerakkan kedua lingkaran. Jadi, jarak antara titik pusatnya adalah dua kali lipat nilai --p untuk ini:

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

Itu memberi kita hasil dari 55.9px.

Gelombang kami kembali! Mari kita masukkan persamaan itu ke CSS kita:

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

Ini adalah kode CSS yang valid. sqrt() adalah bagian dari spesifikasi, tetapi pada saat saya menulis ini, tidak ada dukungan browser untuk itu. Itu berarti kita perlu taburan JavaScript atau Sass untuk menghitung nilai itu sampai kita menjadi lebih luas sqrt() Dukungan.

Ini sangat keren: yang diperlukan hanyalah dua gradien untuk mendapatkan gelombang keren yang dapat Anda terapkan ke elemen apa pun menggunakan mask Properti. Tidak ada lagi coba-coba — yang Anda butuhkan hanyalah memperbarui dua variabel dan Anda siap melakukannya!

Membalikkan gelombang

Bagaimana jika kita ingin ombak menuju ke arah lain, di mana kita mengisi "langit" alih-alih "air". Percaya atau tidak, yang harus kita lakukan adalah memperbarui dua nilai:

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

Yang saya lakukan hanyalah menambahkan offset yang sama dengan 100%, disorot di atas. Berikut hasilnya:

Kami dapat mempertimbangkan sintaks yang lebih ramah menggunakan nilai kata kunci untuk membuatnya lebih mudah:

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

Kami menggunakan left dan bottom kata kunci untuk menentukan sisi dan offset. Secara default, browser default ke left dan top — itu sebabnya kami menggunakan 100% untuk memindahkan elemen ke bawah. Pada kenyataannya, kami memindahkannya dari top by 100%, jadi itu benar-benar sama dengan mengatakan bottom. Jauh lebih mudah dibaca daripada matematika!

Dengan sintaks yang diperbarui ini, yang harus kita lakukan hanyalah menukar bottom untuk top — atau sebaliknya — untuk mengubah arah gelombang.

Dan jika Anda ingin mendapatkan gelombang atas dan bawah, kami menggabungkan semua gradien dalam satu deklarasi:

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

Jika Anda memeriksa kodenya, Anda akan melihat bahwa selain menggabungkan semua gradien, saya juga telah mengurangi ketinggiannya dari 100% untuk 51% sehingga keduanya menutupi setengah dari elemen. Ya, 51%. Kami membutuhkan sedikit persen ekstra untuk tumpang tindih kecil yang menghindari kesenjangan.

Bagaimana dengan sisi kiri dan kanan?

Ini pekerjaan rumah Anda! Ambil apa yang kami lakukan dengan sisi atas dan bawah dan coba perbarui nilainya untuk mendapatkan nilai kanan dan kiri. Jangan khawatir, ini mudah dan satu-satunya hal yang perlu Anda lakukan adalah menukar nilai.

Jika Anda memiliki masalah, Anda selalu dapat menggunakan pembangkit online untuk memeriksa kode dan memvisualisasikan hasilnya.

Garis bergelombang

Sebelumnya, kami membuat gelombang pertama kami menggunakan garis merah lalu mengisi bagian bawah elemen. Bagaimana dengan garis bergelombang itu? Itu juga gelombang! Lebih baik lagi jika kita dapat mengontrol ketebalannya dengan variabel sehingga kita dapat menggunakannya kembali. Ayo lakukan!

Kami tidak akan memulai dari awal melainkan mengambil kode sebelumnya dan memperbaruinya. Hal pertama yang harus dilakukan adalah memperbarui perhentian warna dari gradien. Kedua gradien mulai dari warna transparan hingga buram, atau sebaliknya. Untuk mensimulasikan garis atau batas, kita harus mulai dari transparan, ke buram, lalu kembali ke transparan lagi:

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

Saya pikir Anda sudah menebak bahwa --b variabel adalah apa yang kita gunakan untuk mengontrol ketebalan garis. Mari kita terapkan ini pada gradien kita:

Ya, hasilnya jauh dari garis bergelombang. Tapi melihat lebih dekat, kita dapat melihat bahwa satu gradien dengan benar menciptakan kelengkungan bawah. Jadi, yang perlu kita lakukan hanyalah memperbaiki gradien kedua. Alih-alih menjaga lingkaran penuh, mari kita buat sebagian seperti gradien lainnya.

Masih jauh, tetapi kami memiliki kedua lekukan yang kami butuhkan! Jika Anda memeriksa kodenya, Anda akan melihat bahwa kami memiliki dua gradien yang identik. Satu-satunya perbedaan adalah posisi mereka:

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

Sekarang kita perlu menyesuaikan ukuran dan posisi untuk bentuk akhir. Kami tidak lagi membutuhkan gradien menjadi tinggi penuh, jadi kami dapat mengganti 100% dengan ini:

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

Tidak ada logika matematika di balik nilai ini. Itu hanya perlu cukup besar untuk kelengkungan. Kita akan melihat efeknya pada pola sebentar lagi. Sementara itu, mari perbarui juga posisinya untuk memusatkan gradien secara vertikal:

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

Masih belum cukup:

Satu gradien perlu bergerak sedikit ke bawah dan yang lainnya sedikit ke atas. Keduanya harus bergerak setengah dari tinggi badan mereka.

Kami hampir sampai! Kami membutuhkan perbaikan kecil agar radius memiliki tumpang tindih yang sempurna. Kedua garis perlu diimbangi dengan setengah batas (--b) ketebalan:

Kami mengerti! Garis bergelombang sempurna yang dapat kita sesuaikan dengan mudah dengan mengontrol beberapa variabel:

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

Saya tahu bahwa logika membutuhkan sedikit untuk dipahami. Tidak apa-apa dan seperti yang saya katakan, membuat bentuk bergelombang di CSS tidak mudah, belum lagi matematika rumit di baliknya. Itu sebabnya generator online adalah penyelamat — Anda dapat dengan mudah mendapatkan kode terakhir bahkan jika Anda tidak sepenuhnya memahami logika di baliknya.

Pola bergelombang

Kita bisa membuat pola dari garis bergelombang yang baru saja kita buat!

Oh tidak, kode polanya akan semakin sulit dipahami!

Sama sekali tidak! Kami sudah memiliki kodenya. Yang perlu kita lakukan hanyalah menghapus repeat-x dari apa yang sudah kita miliki, dan tada.

Pola bergelombang yang bagus. Ingat persamaan yang saya katakan akan kita kunjungi kembali?

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

Nah, inilah yang mengontrol jarak antar garis pada pola. Kita bisa membuat variabel darinya, tapi tidak perlu kerumitan lagi. Saya bahkan tidak menggunakan variabel untuk itu di generator. Mungkin aku akan mengubahnya nanti.

Berikut adalah pola yang sama menuju ke arah yang berbeda:

Saya memberi Anda kode dalam demo itu, tetapi saya ingin Anda membedahnya dan memahami perubahan apa yang saya buat untuk mewujudkannya.

Menyederhanakan kode

Di semua demo sebelumnya, kami selalu mendefinisikan --size dan --p secara mandiri. Tetapi apakah Anda ingat bagaimana saya menyebutkan sebelumnya bahwa generator online mengevaluasi P sama dengan m*S, Di mana m mengendalikan kelengkungan gelombang? Dengan mendefinisikan pengali tetap, kita dapat bekerja dengan satu gelombang tertentu dan kode menjadi lebih mudah. Inilah yang kita perlukan dalam banyak kasus: bentuk bergelombang tertentu dan variabel untuk mengontrol ukurannya.

Mari perbarui kode kita dan perkenalkan m variabel:

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

Seperti yang Anda lihat, kita tidak lagi membutuhkan --p variabel. Saya menggantinya dengan var(--m)*var(--size), dan mengoptimalkan beberapa matematika yang sesuai. Sekarang, Jika kita ingin bekerja dengan bentuk bergelombang tertentu, kita dapat menghilangkan --m variabel dan menggantinya dengan nilai tetap. Mari mencoba .8 misalnya.

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

Lihat bagaimana kode lebih mudah sekarang? Hanya satu variabel untuk mengontrol gelombang Anda, ditambah lagi Anda tidak perlu lagi mengandalkan sqrt() yang tidak memiliki dukungan browser!

Anda dapat menerapkan logika yang sama untuk semua demo yang kami lihat bahkan untuk garis bergelombang dan polanya. Saya mulai dengan penjelasan matematis terperinci dan memberikan kode generik, tetapi Anda mungkin membutuhkan kode yang lebih mudah dalam kasus penggunaan nyata. Inilah yang saya lakukan sepanjang waktu. Saya jarang menggunakan kode generik, tetapi saya selalu mempertimbangkan versi yang disederhanakan terutama bahwa, dalam sebagian besar kasus, saya menggunakan beberapa nilai yang diketahui yang tidak perlu disimpan sebagai variabel. (Lansiran spoiler: Saya akan membagikan beberapa contoh di akhir!)

Keterbatasan pendekatan ini

Secara matematis, kode yang kita buat seharusnya memberikan bentuk dan pola bergelombang yang sempurna, tetapi pada kenyataannya, kita akan menghadapi beberapa hasil yang aneh. Jadi, ya, metode ini memiliki keterbatasan. Misalnya, generator online mampu menghasilkan hasil yang buruk, terutama dengan garis bergelombang. Sebagian dari masalah ini disebabkan oleh kombinasi nilai tertentu di mana hasilnya diacak, seperti menggunakan nilai besar untuk ketebalan batas dibandingkan dengan ukurannya:

Untuk kasus lain, ini adalah masalah yang terkait dengan beberapa pembulatan yang akan menghasilkan ketidaksejajaran dan celah di antara gelombang:

Meskipun demikian, saya masih berpikir metode yang kita bahas tetap bagus karena menghasilkan gelombang halus dalam banyak kasus, dan kita dapat dengan mudah menghindari hasil buruk dengan bermain dengan nilai yang berbeda sampai kita mendapatkannya sempurna.

Membungkus

Saya harap setelah artikel ini, Anda tidak perlu lagi mencoba-coba membuat bentuk atau pola bergelombang. Sebagai tambahan ke generator online, Anda memiliki semua rahasia matematika di balik pembuatan gelombang apa pun yang Anda inginkan!

Artikel berakhir di sini tetapi sekarang Anda memiliki alat yang ampuh untuk membuat desain mewah yang menggunakan bentuk bergelombang. Inilah inspirasi untuk Anda mulai…

Bagaimana denganmu? Gunakan generator online saya (atau tulis kodenya secara manual jika Anda sudah hafal semua matematikanya) dan tunjukkan kreasi Anda! Yuk punya koleksi bagus di kolom komentar.