SVG blob nedir?

Blob, düz kenarları olmayan, daire ile sıçrama şekli arasında kalan yumuşak ve organik bir şekildir. Blob’lar modern web tasarımında popüler bir dekorasyon unsurudur: hero görsellerinin ve illüstrasyonların arkasında, avatar çerçevesi olarak, bölüm arka planlarında ya da eğlenceli düğmeler ve rozetler olarak kullanılır. Vektör grafikleri oldukları için her boyutta netliklerini korur ve yalnızca birkaç yüz bayt yer kaplarlar.

Araç açıklaması

Bu araç, tarayıcınızda temiz SVG kodu olarak rastgele blob şekilleri oluşturur. Şekli beğenene kadar Rastgeleleştir düğmesine basın; ardından şeklin kaç çıkıntıya sahip olacağını, ne kadar düzensiz olacağını ve eğrilerinin ne kadar yuvarlak olacağını ince ayarlayın. Şekli düz bir renkle veya degradeyle doldurun ya da dış çizgi olarak çizin; isterseniz şekiller arasında yumuşak bir döngüyle dönüşüm yapmasını sağlayın. Sonucu SVG veya PNG olarak indirin ya da SVG işaretlemesi, CSS arka planı veya CSS clip-path olarak kopyalayın.

Özellikler

  • Yeniden oluşturabileceğiniz rastgele blob’lar: aynı seed ve ayarlar her zaman aynı şekli verir
  • Yuvarlak çakıl taşlarından sivri yıldızlara kadar ayarlanabilir karmaşıklık, rastgelelik ve yumuşaklık
  • Her renkle düz, degrade veya dış çizgi dolgusu
  • JavaScript olmadan SVG içine yerleştirilmiş, şekiller arasında döngüsel geçiş yapan morph animasyonu
  • Seçtiğiniz boyutta SVG veya şeffaf PNG olarak indirme
  • Kopyalamaya hazır SVG, CSS arka planı ve CSS clip-path kodu

Nasıl çalışır?

Araç, bir dairenin çevresine noktalar yerleştirir, her birini rastgele bir miktarda içeri taşır ve bu noktaların içinden geçen yumuşak, kapalı bir eğri çizer. Blob’un görüntüyü kenardan kenara doldurması için eğri tam olarak ölçülür ve ölçeklendirilir. Seed tabanlı bir rastgele sayı üreteci her noktayı belirlediğinden, bir seed numarası veya kelimesi daha sonra aynı blob’u yeniden oluşturmanızı sağlar. Animasyon için aynı sayıda noktaya sahip birkaç blob tek bir SVG animate öğesine yerleştirilir ve tarayıcı bunlar arasında geçiş yapar.

İpuçları

  • Orta düzeyde rastgelelikle birlikte beş ila sekiz nokta, klasik blob şekilleri oluşturur; daha düşük rastgelelik daha sakin ve profesyonel bir görünüm sağlar.
  • Kristal veya mücevher benzeri çokgenler için yumuşaklığı %0’a düşürün.
  • Bir fotoğrafı veya videoyu blob şekliyle kırpmak için CSS clip-path kodunu kullanın.
  • Blob’u daha sonra tam olarak yeniden oluşturmak için seed değerini not edin veya seed olarak kendi kelimenizi yazın.
  • Arka planda sakin kalması için morph animasyonunu yavaş tutun; döngü başına yaklaşık 8–15 saniye uygundur.