Penjana Gelombang SVG
Penjana gelombang SVG percuma dalam talian: susun 1-5 lapisan gelombang halus, laraskan garis dasar, amplitud, panjang gelombang dan kelembutan, gunakan gradien dua warna dan eksport kod vektor.
Apakah yang dilakukan Penjana Gelombang SVG?
Ia membina bentuk gelombang hiasan sebagai kod SVG sedia guna. Anda boleh menyusun 1-5 lapisan, setiap satu dengan ketinggian garis dasar, amplitud, panjang gelombang dan kelembutan tersendiri, dan mengisinya dengan satu gradien linear dua warna kongsi.
Bagaimana lengkung gelombang dilukis?
Setiap lapisan dihasilkan oleh penjana laluan terbina dalam: gelombang dipecah kepada segmen separuh panjang gelombang dan setiap segmen dilukis dengan titik kawalan Bézier kubik. Fail kekal sangat kecil dan lancar sempurna pada kadar zum mana-mana.
Apakah yang diubah oleh peluncur kelembutan?
Pada 0% segmen menjadi garis lurus lalu gelombang kelihatan bercagak. Apabila dinaikkan, titik kawalan Bézier bergerak ke luar dan pada 100% anda mendapat lengkung menyerupai sinus penuh.
Di mana boleh guna SVG yang dieksport?
Di mana sahaja yang menerima HTML atau SVG: latar wira, pembahagi antara seksyen, pengaki, pembentangan dan alat reka bentuk. Tampal kod yang disalin terus ke HTML anda atau simpan fail .svg melalui butang muat turun.
Adakah gelombang kekal tajam pada saiz apa pun?
Ya. Eksport mengekalkan viewBox 1440x480, jadi grafik itu geometri vektor tulen. Regang ke 100% lebar halaman atau besarkan untuk cetakan — lengkung tidak pernah kabur atau berpiksel.
Bagaimana butang Rawak berfungsi?
Ia memilih bilangan lapisan rawak antara 1 dan 5, nilai rawak baharu bagi setiap parameter dan dua warna rawak yang harmoni, kemudian melukis semula pratonton serta-merta. Tekan berkali-kali sehingga berkenan.
Boleh guna warna jenama sendiri?
Boleh. Dua pemilih warna menetapkan hentian mula dan akhir gradien linear yang dikongsi semua lapisan, jadi menukarnya mewarnai semula seluruh kumpulan gelombang sekaligus.
Adakah data dimuat naik ke pelayan?
Tidak. Penjana berjalan sepenuhnya dalam pelayar anda dengan JavaScript tulen. Warna dan tetapan anda tidak pernah meninggalkan halaman, dan fail eksport dihasilkan setempat pada peranti anda.
Cara Menggunakan Penjana Gelombang SVG
Penjana gelombang SVG ini mencipta bentuk gelombang berlapis sebagai kod SVG yang bersih dan sedia tampal. Setiap lapisan ialah lengkung kubik-bezier halus yang diisi gradien linear dua warna berkongsi, menjadikannya sesuai untuk latar seksuan hero, pemisah halaman dan hiasan pengaki. Semuanya dijana dalam pelayar anda — tiada apa-apa dimuat naik.
- Pilih bilangan lapisan (1-5) yang anda mahu dalam pemilih Lapisan. Lapisan dilukis dari belakang ke depan, jadi setiap lapisan baharu mengecat di atas yang sebelumnya.
- Pilih warna mula dan akhir gradien dengan dua pemilih warna — semua lapisan berkongsi gradien linear ini.
- Haluskan setiap lapisan dengan empat peluncurnya: Ketinggian garis dasar mengalihkan gelombang naik atau turun, Amplitud menetapkan betapa tingginya puncaknya, Panjang gelombang mengawal jarak mengufuk antara puncak, dan Kelembutan membaur daripada garisan zigzag lurus (0%) hingga lengkung kubik-bezier sinusoidal penuh (100%).
- Tekan Rawak untuk menjana gabungan baharu bilangan lapisan, bentuk dan warna serta-merta sehingga sesuatu kelihatan betul.
- Tekan Muat turun SVG untuk menyimpan fail .svg, atau Salin kod untuk meletakkan penanda SVG lengkap ke papan keratan anda, sedia ditampal ke mana-mana fail HTML atau alat reka bentuk.
Untuk pemisah seksyen laman web letakkan SVG di antara dua blok dan biarkan diregangkan ke lebar 100% — viewBox mengekalkan lengkungan tanpa herotan pada sebarang saiz. Kelembutan rendah dengan panjang gelombang pendek memberi rupa lukisan tangan, manakala kelembutan penuh dengan gelombang panjang kelihatan seperti laut tenang.
Alat Berkaitan
- Pengoptimum SVG Optimumkan dan mampat fail SVG serta-merta dalam pelayar anda. Buang metadata, komen dan data editor, kurangkan saiz sehingga 60%.
- Penukar SVG ke PNG Tukar SVG ke PNG, JPEG, atau WebP serta-merta dalam pelayar anda. Sesuaikan skala, saiz, dan warna latar belakang. Percuma, privasi, tanpa muat naik.
- Penukar PNG ke SVG Penukar PNG ke SVG percuma dalam talian. Tukar PNG, JPG dan bitmap lain kepada SVG vektor berskala dengan kawalan warna dan terperinci - sepenuhnya dalam pelayar anda.
- Penjana Border Radius Kreatif Penjana border radius kreatif percuma dalam talian. Seret 8 pemegang atau pilih pratetap blob untuk mencipta bentuk CSS organik dan menyalin kod dengan serta-merta.
- Penukar Warna Penukar warna dalam talian percuma. Tukar format HEX, RGB, HSL, HSV serta-merta dengan pemilih visual. 100% peribadi, berjalan dalam pelayar anda.
- Penjana Easing CSS Penjana easing CSS dalam talian percuma. Seret titik kawalan cubic-bezier pada lengkung interaktif, pilih dari 18 pratetap, lihat pratonton bola berulang dan salin fungsi pengmasaan serta-merta.
- Penjana Text Shadow CSS Penjana text-shadow CSS dalam talian percuma. Tindih beberapa lapisan bayang dengan ofset, kabur, warna dan kelegapan, cuba pratetap Neon, 3D, Retro dan salin CSS serta-merta.
- Penjana Clip Path CSS Penjana clip-path CSS dalam talian percuma. Reka bentuk polygon, circle, ellipse dan inset dengan titik boleh seret, pratonton langsung dan salin kod CSS sekali klik.