Tasarım / SVG

Bölüm Ayırıcıları için SVG Dalga Oluşturucu

İki sayfa bölümü arasındaki kenar için pürüzsüz, katmanlı SVG dalgaları oluşturun: katman ve dalga sayısını, yüksekliği, pürüzsüzlüğü ve rengi seçin; ardından SVG'yi indirin veya CSS arka planı olarak kopyalayın.

Bölüm Ayırıcıları için SVG Dalga Oluşturucu: Her katman, bir temel çizginin üstünde ve altında rastgele miktarlarda dönüşümlü olarak yer alan noktalardan oluşan bir sıradır. Noktalar pürüzsüz bir eğriyle birleştirilir ve alt kenara kadar doldurulur. Arka katmanlar daha soluktur; böylece katmanlar derinlik hissi verir. SVG her genişliğe uyum sağlar; CSS sürümü ise SVG'yi data URI arka planı olarak içerir. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Kategori
Geliştirici araçları
Çalıştırma sayısı
Tarayıcınızda
Maliyet
Ücretsiz · kayıt gerekmez
Kullanılabilirlik
Kullanıma hazır
SVG dalga oluşturucuYerel işleme

Tamamen tarayıcınızda çalışır

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

SVG her genişliğe uzanır (preserveAspectRatio="none"); bu nedenle tam genişlikteki bölüm ayırıcılarına uygundur. Bir bölümün altına, sonraki bölümün arka plan rengiyle birlikte yerleştirin veya üst kısım için ters çevirin. Aynı rastgele başlangıç değeri her zaman aynı dalgayı çizer.

SVG mi, CSS mi?

Satır içi SVG, CSS ile biçimlendirilebilir ve canlandırılabilir; dolgu rengi için currentColor kullanılabilir. CSS arka planı olarak SVG bir veri URI'sidir: yüklenmesi gereken ek bir şey yoktur, ancak renk kod içinde sabittir. Her iki durumda da dosya birkaç yüz bayt boyutundadır; SVG temizleyici ile daha da düzenlenebilir.

Pürüzsüzlük

Eğri, kübik Bézier parçalarına dönüştürülmüş bir Catmull-Rom spline'ıdır: tam pürüzsüzlükte her noktadan nazikçe geçer, sıfırda ise noktalar arasında düz çizgilere dönüşerek keskin kenarlı bir dağ görünümü oluşturur.

Nasıl kullanılır?

  1. Katmanları, dalga sayısını ve yüksekliklerini ayarlayın.
  2. Bir renk seçin ve bölümlerin üst kısmında kullanmak için dalgayı ters çevirin.
  3. Yeni rastgele dalgalar oluşturmak için tıklayın; ardından SVG'yi indirin veya CSS'yi kopyalayın.

Gizlilik ve sınırlamalar

Dalgalar tarayıcınızda çizilir.

İlgili araçlar

SVG blobCSS deseniCSS Gradient

Sık sorulan sorular

İki bölüm arasında nasıl kullanılır?

Dalgaya alttaki bölümün rengini verin ve tam genişlikte, üstteki bölümün altına yerleştirin; dalgayı ters çevirerek bir bölümün üst kısmında kullanın.

Aynı ayarlar aynı dalgayı mı oluşturur?

Evet: şekil rastgele bir tohumdan oluşturulur; bu nedenle yalnızca yeni dalga oluşturmak için tıkladığınızda değişir.

Dalgaları ticari olarak kullanabilir miyim?

Evet: şekiller sizin için oluşturulur ve lisans kısıtlaması içermez.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez