Menu

SVG Blob Üretici

Yumuşak, rastgele organik SVG şekilleri üret — SVG'yi veya CSS clip-path'i kopyala.

Son güncelleme

SVG kodu
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <path d="M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z" fill="#7fb2ff"/>
</svg>
CSS clip-path
clip-path: path('M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z');

SVG blob üretici nedir?

SVG blob üretici, bir dairenin etrafından nokta örnekleyip onları yumuşak Bézier eğrileriyle birleştirerek kapalı organik şekiller oluşturur. Sonuç, yumuşak, akışkan bir siluet — bir pazarlama hero'sunun arkasında, bir profil fotoğrafının etrafında veya bir landing page'de renkli arka plan blob'u olarak gördüğün türden bir şekil.

Blob'lar geometri ve rastgelelik arasındaki tatlı noktada yaşar. Nokta sayısını ayarlayarak jelibon (3-4), çakıl taşı (5-6) veya kaotik (10+) şekiller elde et. Rastgelelik kaydırıcısını oynatarak neredeyse dairesel'den vahşi bozulmuş'a kadar git. Yeni bir seed döndürmek için zar düğmesine her an basabilirsin.

Her şey tarayıcında çalışır. Kopyala-yapıştır SVG snippet'i, indirilebilir .svg dosyası veya herhangi bir HTML öğesine doğrudan uygulayabileceğin CSS clip-path değeri olarak dışa aktar — öğeyi blob şekline maskelemek için.

Blob yaparken öğrenecekleriniz

  • Kübik Bézier eğrileri blob'a yumuşaklığını verir — komşu nokta çiftinin her birinde iki kontrol tutamacı vardır ve her birleşim noktasında teğet süreklilik sağlayacak şekilde hesaplanır.
  • Burada kullanılan Catmull-Rom spline'ları bu tutamaçları komşu noktalardan otomatik türetir, böylece eğriyi yumuşak tutmak için kontrol noktalarını elle ayarlamak zorunda kalmazsın.
  • CSS clip-path: path(...) herhangi bir öğeye — resim, div, video — düzen kutusunu etkilemeden blob şekli uygulayabilir.

Adım adım blob üretme

  1. Nokta sayısını seç

    Daha az nokta (3-5) jelibon blob'lar yapar. Daha fazla nokta (8-12) çakıl taşı görünümlü düzensiz şekiller yapar.

  2. Rastgeleliği ayarla

    %0 dairedir. %50 yumuşak blob şeklinde eğriler verir. %100 vahşi bozulmuş, dramatik siluetler verir.

  3. Renk veya gradyan seç

    Düz dolgu kullan veya Gradyan'ı aç ve iki renk artı bir açı seç. Popüler hero bölümü desenleriyle eşleşir.

  4. Rastgele üret ve dışa aktar

    Yeni bir seed döndürmek için zara bas. Beğendiğinde SVG'yi kopyala, CSS clip-path'i kopyala veya .svg dosyasını indir.

Blob'lar nerede en iyi çalışır

Bir blob kullanmanın üç yaygın yolu ve nelere dikkat etmen gerektiği.

KullanımNasıl uygulanırDikkat
Hero arka planSVG'yi göm, içeriğin arkasına mutlak konumlandırKontrastı koru — blob üzerindeki metnin okunabilir renge ihtiyacı var
Görüntü maskesi<img>'a CSS clip-path: path('…') uygulaGörsel kaynağı yine indirilir — kesim yalnızca görseldir
Avatar şekliProfil fotoğrafını clip-path ile bir div'e sarDaire yeterliyse yalnızca border-radius kullan — clip-path repaint için daha pahalı
Bölüm ayracıBir bölümün alt kenarı boyunca geniş bir blob uzatviewBox preserveAspectRatio kullan ki şekil geniş ekranlarda doğru kalsın
Dekoratif aksanFarklı boyutlarda birkaç yarı saydam blob yerleştirAnimasyon az olmalı — büyük doldurulmuş path'leri repaint etmek CPU yakar
Marka illüstrasyonuBir blob'u üstte metin veya simge ile birleştirMarka kimliği tutması için tutarlı bir şekil stili seç

Denenecek blob örnekleri

Hero bölümüne bir blob ekle

HTML
<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Coddy'ye Hoş Geldin</h1></section>
CSS
.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

Mutlak konumlandırılmış bir SVG, başlığın arkasında durur. Opacity'yi düşür ki üstteki metin backdrop-filter olmadan okunabilir kalsın.

Görseli blob içine maskele

CSS
.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

clip-path tüm modern tarayıcılarda desteklenir. Path koordinatları 400×400 viewBox'a göredir — kesimin temiz hizalanması için görseli o kutuya ölçekle.

Dekoratif arka plan olarak iki yumuşak blob

HTML
<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400"></svg>  <svg class="blob blob-b" viewBox="0 0 400 400"></svg></div>
CSS
.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

Bulanıklaştırılmış blob'ları katmanlamak yumuşak "aurora" hissi verir. Sadece yuvarlatılmış kenarlar görünürken kalsın diye negatif offset'lerle görünür sınırların dışında tut.

SVG blob ile sık hatalar

  • viewBox'ı unutup <svg>'ye sabit width/height vermek. Şekil duyarlı şekilde ölçeklenmez — viewBox artı CSS'te width/height kullan.
  • Her karede büyük dolu path'ler animasyonlamak. Path rasterleştirme pahalıdır; transform/opacity kullan veya CSS filter ile önceden blur uygula ki GPU işlesin.
  • Inline <svg>'yi Tailwind/Bootstrap'a kopyalayıp block yerine display: inline miras almak. Varsayılan baseline boşluğu şeklin altında birkaç piksel bırakır.

Sık sorulan sorular

Tasarımda blob nedir?
Blob, yumuşak eğrilerden yapılmış organik, asimetrik kapalı bir şekildir. Modern web tasarımında popülerlerdir — hero arka planları, rozetler, avatar maskeleri — çünkü dairelerden daha samimi, freehand şekillerden daha gösterişli hissettirirler.
Üretilen SVG ticari olarak ücretsiz mi?
Evet. Çıktı, kendi ürettiğin SVG markup'ı — ekli lisans yok ve atıf gerekmez. Ticari sitelerde, uygulamalarda, sunumlarda, her yerde kullan.
Kopyaladıktan sonra path'i düzenleyebilir miyim?
Evet — çıktı standart bir SVG <path d="…">. Figma, Illustrator, Inkscape veya herhangi bir vektör düzenleyicide aç ve kontrol noktalarını ayarla. Ya da burada yeniden üret ve yeni bir şekil kopyala.
CSS clip-path çıktısını nasıl kullanırım?
clip-path: path('M … Z')'yi herhangi bir HTML öğesine uygula. Koordinatlar aynı SVG viewBox uzayında (burada varsayılan 400×400), bu yüzden klipsenmiş öğeyi o kutuya boyutlandır ki klips sıraya girsin — veya path koordinatlarını ölçekle.
Math.random her ziyarette aynı şekli mi verir?
Hayır, ama bu araç seed'li bir pseudo-random üretici kullanır. Aynı seed her zaman aynı blob'u üretir — yani beğendiğin bir şekil bulana kadar Rastgele Üret'e basabilirsin ve SVG çıktısı o şekli sonsuza kadar koruyacaktır.
Blob'lar sayfamı yavaşlatır mı?
Tek bir statik SVG blob esasen bedavadır. Bulanıklık filtreli çoklu animasyonlu blob'lar mobilde pahalı olabilir — DevTools'ta profil çıkar ve path-attribute animasyonları yerine transform/opacity animasyonlarını tercih et.

Daha fazla bilgi

Diğer geliştirici araçları

Coddy programming languages illustration

Coddy ile kodlamayı öğren

BAŞLA