Softonic

SVG Blob Oluşturucu

Adım 1 / 2
Sonraki

Blob şekilleri, modern UI’ın “dostça yuvarlatılmış arka planı” olarak 2018 civarında mükemmel daireleri tahtından indirdi, hero illüstrasyonlarının arkasında, avatar maskeleri olarak ve açılış sayfalarında renk lekeleri olarak görünürler. Bu oluşturucu, bir blob’u bir dairenin etrafındaki rastgele yürüyüşten kurar, ardından çokgeni ikinci dereceden Bézier eğrileriyle tasarımcıların aradığı organik, hafif dalgalı şekle yumuşatır. Kaç kontrol noktası olacağını (karmaşıklık), yürüyüşün ne kadar çılgın olacağını (kontrast) ve rastgele tohumu kontrol eder, sonra SVG’yi kopyalarsınız.

Blob nasıl kurulur

  1. 1

    Renk ve karmaşıklığı seçin

    Karmaşıklık, kontrol noktalarının sayısını belirler (3-12). Daha fazla nokta daha fazla çıkıntı demektir.

  2. 2

    Kontrastı ayarlayın

    Kontrast, her noktanın temel yarıçaptan ne kadar saptığını kontrol eder. Düşük kontrast = neredeyse dairesel; yüksek = agresif loblu.

  3. 3

    Bir tohum seçin

    Tohum, blob şeklini kilitleyen rastgele sayıdır. Aynı tohum, aynı blob; yeni bir tane almak için rastgeleleştir'e basın.

  4. 4

    SVG'yi kopyalayın

    Bir 400×400 viewBox içinde tek bir `<path>` alırsınız. SVG'nin desteklendiği her yere bırakın.

Blob yolunun anatomisi

Oluşturucu, N noktayı bir 400×400 viewBox etrafına eşit aralıklarla dağıtır (merkez 200, 200; temel yarıçap 130), her yarıçapı ±contrast kadar saptırır, ardından her çifti ikinci dereceden bir Bézier eğrisiyle birleştirir:

M x₀ y₀ Q x₁ y₁ midx midy Q x₂ y₂ midx midy ... Z

midx, midy, mevcut ve sonraki noktanın orta noktasıdır, her eğrinin sonunu oraya yerleştirmek, çokgeni organik bir şekle yuvarlayan şeydir.

Parametre kopya kâğıdı

Ayar Aralık Etki
Karmaşıklık 3-12 Lob sayısı. UI için en uygun nokta 5-7’dir.
Kontrast 0-100 Rastgele yürüyüşün genliği. 30-60 doğal görünür.
Tohum 1-9999 Belirleyici; aynı tohum = çalıştırmalar arası aynı blob.
Renk hex Tek dolgu, kenarlık yok. Gerekirse fill-opacity’yi elle ekleyin.

Blob’ların en iyi çalıştığı yerler

  • Arka plan dekorasyonu, başlıkların arkasında, hero bölümlerinin boş köşelerinde.
  • Avatar maskeleri, organik portre çerçeveleri için yolu bir clip-path olarak uygulayın.
  • İllüstrasyon vurguları, simgelerin veya sayıların altında marka rengi lekesi.
  • Görsel maskeleri, CSS mask-image ile bir blob, fotoğrafları organik kesik şekillere kırpar.

İpuçları

  • Arka planlar için kenarlıksız blob’lar tutun; bir kenarlık onları çıkartma gibi gösterir.
  • Animasyonlu morphing için aynı karmaşıklıkta ve farklı tohumlarla iki blob oluşturun, sonra d özniteliğini flubber veya svg-morpheus gibi bir kütüphaneyle canlandırın.
  • <img src=blob.svg> kullanmak yerine SVG’yi satır içine alın, bu, çalışma zamanında dolgu rengini CSS değişkenleriyle değiştirmenizi sağlar.
  • Blob’un herhangi bir kapsayıcıya ölçeklenmesini istiyorsanız viewBox’ı tutun ama açık width="400" height="400" değerini kaldırın.

Sık Sorulan Sorular

Tohum, rastgele yürüyüşten önce PHP’nin srand() fonksiyonunu başlatır. Aynı tohum = aynı rand() çağrıları dizisi = aynı nokta sapmaları = aynı yol.

Evet, ama yalnızca her iki yolun da aynı sayıda komuta ve nokta sayısına sahip olması durumunda. Karmaşıklığı aynı tutun ve interpolasyona uygun çiftler almak için yalnızca tohumu değiştirin. Asıl animasyon için GSAP MorphSVG veya flubber gibi bir tweening kütüphanesi kullanın.

Yoldaki fill="#hex" ifadesini fill="url(#gradient-id)" ile değiştirin ve bir <defs> bloğunun içine bir <linearGradient> veya <radialGradient> tanımı ekleyin. SVG’yi satır içine alırsanız CSS özel özellikleri de çalışır.

Temizdir ama küçültülmemiştir (minified). Bayt boyutu önemliyse bir kez SVGO’dan geçirin; tipik olarak karakterlerin %20-30’unu çıkarabilirsiniz.

Hayır. SVG, URL formundaki parametrelerden anında oluşturulur ve hiçbir şey kaydedilmez.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Araç diğer dillerde mevcuttur