SVG Blob Üretici

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. 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. 2

   Rastgeleliği ayarla

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

3. 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. 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.

Denenecek blob örnekleri

<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>

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

.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');}

<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>

.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%; }

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