SVG Dalga Oluşturucu

Eğri yoğunluğu, katman sayısı ve düz ya da gradyan dolgusu ayarlanabilen katmanlı SVG dalga şekilleri oluşturun, ardından işaretlemeyi kopyalayın veya bir .svg dosyası indirin.

Araç yükleniyor…

SVG Dalga Oluşturucu — Eğri yoğunluğunu ayarlayın, kaç dalga katmanını üst üste koyacağınızı seçin ve iki renkle düz bir dolgu ya da yukarıdan aşağıya dikey bir gradyan belirleyin. Denetimleri değiştirdikçe canlı önizleme yeniden çizilir, Yeniden Üret düğmesi dalga şeklini bir seed değerinden yeniden karar, tam SVG işaretlemesi ise istediğiniz an kopyalanmaya veya .svg dosyası olarak indirilmeye hazırdır. Her şey doğrudan tarayıcınızda üretilir; hiçbir ayar veya görsel asla bir sunucuya gönderilmez.

SVG Dalga Oluşturucu nedir?

SVG Dalga Oluşturucu, yolları elle çizmeden yumuşak, organik dalga ayırıcıları ve hero arka planları isteyen web tasarımcıları ve ön uç geliştiricileri için ücretsiz, tarayıcı içi bir araçtır. Eğri yoğunluğunu ayarlar, birden sekize kadar katman üst üste koyar, dalganın tepesi aşağı ya da yukarı bakacak şekilde çevirir ve onu tek renkli bir karışım veya iki HEX renk arasında dikey bir gradyanla doldurursunuz. Her dalga seed tabanlı bir sözde rastgele üreteçten oluşturulur, böylece Yeniden Üret'e basmak aynı ayarları korurken size yeni bir şekil verir ve çıktı, herhangi bir HTML sayfasına veya tasarım dosyasına yapıştırabileceğiniz kesin, ölçeklenebilir SVG'dir. Bölüm ayırıcıları, alt bilgiler, afişler ve dekoratif arka planlar için kullanın.

SVG Dalga Oluşturucu nasıl kullanılır

  1. Dalga tepelerinin ne kadar yüksek ve çarpıcı olacağını denetlemek için eğri yoğunluğunu 0 ile 100 arasında ayarlayın.
  2. Katman sayısını (1-8) seçin; daha fazla katman, derinlik için yarı saydam dalgaları üst üste koyar.
  3. Dalganın tepesini aşağı ya da yukarı baktırmak için Çevir'i kullanın.
  4. Düz bir dolgu ile dikey bir gradyan arasında geçiş yapmak ve başlangıç ile bitiş renklerini seçmek için Ayarlar'ı açın.
  5. Beğenene kadar dalga şeklini yeniden karmak için Yeniden Üret'e basın.
  6. SVG işaretlemesini kopyalayın veya bir wave.svg dosyası kaydetmek için İndir'e tıklayın.

Örnekler

Gradyanlı bölüm ayırıcısı

Yoğunluğu 50 dolayında ayarlayın, 3 katmanı koruyun, maviden mora bir gradyan dolgu seçin ve iki sayfa bölümü arasına yumuşak bir ayırıcı koymak için wave.svg dosyasını indirin.

Çarpıcı tek renkli hero dalgası

Yoğunluğu yükseltin, katmanları 1'e getirin, düz dolguya geçin ve bir hero başlığının arkasında büyük, çarpıcı bir tepe için dalgayı yukarı çevirin.

Katmanlı alt bilgi arka planı

Alt bilgi arka planı olarak iyi çalışan yumuşak, üst üste binmiş yarı saydam bir dalga oluşturmak için düşük-orta yoğunlukta 5-6 katman kullanın.

Sıkça sorulan sorular

Eğri yoğunluğu neyi değiştirir?
Yoğunluk (0-100), her dalga tepesinin ne kadar yükselip alçaldığını denetler. Düşük değerler hafif dalgalanmalar verir; yüksek değerler yüksek, çarpıcı zirveler verir. Önizleme ve SVG, siz değiştirdikçe anında güncellenir.
Yeniden Üret'e basmak neden şekli değiştiriyor?
Her dalga, seed tabanlı bir sözde rastgele üreteçten çizilir. Yeniden Üret, seed değerini artırır; böylece yoğunluk, katmanlar, renkler ve dolgu tam ayarladığınız gibi kalırken yeni bir tepe dizilimi elde edersiniz.
Düz ve gradyan dolgu arasındaki fark nedir?
Düz dolgu, üst üste binen her katmanı iki renginiz arasında harmanlar; gradyan ise tüm katmanlara üstteki ilk renkten alttaki ikinci renge tek bir dikey gradyan uygular. Geçiş yapmak ve iki rengi de seçmek için Ayarlar'ı açın.
İndirilen SVG'yi nasıl kullanırım?
Çıktı, standart ve ölçeklenebilir SVG işaretlemesidir. Doğrudan HTML'inize kopyalayın ya da wave.svg dosyasını indirip tasarım aracınıza alın veya bir görsel olarak referans gösterin. Vektörel olduğu için her boyutta net kalır.
Bir sunucuya bir şey yükleniyor mu?
Hayır. Dalga tamamen tarayıcınızda yerel matematikle üretilir ve .svg indirmesi bellekteki bir blob'dan oluşturulur. Hiçbir ayar, renk veya görsel cihazınızdan asla çıkmaz, bu yüzden çevrimdışı çalışır ve çalışmanızı gizli tutar.

İlgili araçlar

Koddan Görsele

Bir kod parçacığını tarayıcınızda söz dizimi vurgulu bir görsele dönüştürün; 20'den fazla dil, özel temalar ve arka planlar, satır numaraları ve PNG veya SVG dışa aktarma ile.

Renk Kontrastı Denetleyici

Metin ve arka plan rengi arasındaki WCAG 2.1 kontrastını ve APCA Lc puanını denetleyin, AA, AAA ve 3:1 rozetlerini görün ve en yakın geçen rengi uygulayın.

Renk Karıştırıcı

İki HEX rengi seçtiğiniz oranda RGB veya Lab renk uzayında harmanlayın ve ortaya çıkan ara rengi örnek ve kopyalanabilir HEX değeri olarak okuyun.

Renk Tonu Üretici

Tek bir temel HEX rengini ayarlanabilir adımlar, adım başına WCAG kontrast ipuçları ve CSS, Tailwind, JSON dışa aktarımıyla OKLCH, HSL veya RGB ölçeğine dönüştürün.