Blob Oluşturucu

Özel Bezier eğrileriyle güzel organik SVG şekilleri üret.

Ayarlar

Blob kenarları (köşeler)6

Sivrilik (karmaşıklık)60%

Dolgu modu

DüzDoğrusalRadyal

Başlangıç rengi

Bitiş rengi

Ham SVG XML kodu

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
  <defs>
    <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff6b35" />
      <stop offset="100%" stop-color="#dd2c00" />
    </linearGradient>
  </defs>
  <path d="M 290.9 154.0 Q 328.6 200.0 292.2 248.2 Q 255.7 296.4 194.1 306.7 Q 132.4 317.0 108.4 258.5 Q 84.3 200.0 110.7 145.5 Q 137.1 91.1 195.1 99.5 Q 253.2 107.9 290.9 154.0 Z" fill="url(#blob-grad)" />
</svg>

React JSX bileşeni

export const Blob = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
    <defs>
      <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stopColor="#ff6b35" />
        <stop offset="100%" stopColor="#dd2c00" />
      </linearGradient>
    </defs>
    <path d="M 290.9 154.0 Q 328.6 200.0 292.2 248.2 Q 255.7 296.4 194.1 306.7 Q 132.4 317.0 108.4 258.5 Q 84.3 200.0 110.7 145.5 Q 137.1 91.1 195.1 99.5 Q 253.2 107.9 290.9 154.0 Z" fill="url(#blob-grad)" />
  </svg>
);

Reklam

Nasıl çalışır

Organik bir blob şekillendirmek için rastgelelik ve karmaşıklığı ayarlayın.
Dolgu için renkler ve bir gradyan seçin.
Beğendiğiniz bir şekli bulana kadar yeniden üretin.
Ham SVG kodu ya da kullanıma hazır bir React JSX bileşeni dışa aktarın.

Ne için kullanılır

Bir açılış sayfasına organik bir arka plan şekli eklemek.
Bir tasarım sistemi için dekoratif bloblar oluşturmak.
Bir SVG blobu doğrudan bir React projesine bileşen olarak eklemek.

Reklam

Bilmekte fayda var

Bloblar prosedürel olarak üretilir; tek tek noktaları düzenlemek yerine varyasyonları keşfetmek için yeniden üretin.
Çok yüksek karmaşıklık daha uzun yol verisi üretir; daha basit bloblar SVG'yi hafif tutar.

Sıkça sorulan sorular

Blobu doğrudan React'te kullanabilir miyim?

Evet; bir JSX bileşeni olarak dışa aktarıp projenize ekleyin ya da başka herhangi bir yapı için ham SVG'yi alın.

Şekiller sonradan düzenlenebilir mi?

Dışa aktarılan SVG, herhangi bir düzenleyicide ince ayar yapabileceğiniz standart vektördür, ancak aracın kendisi nokta düzenlemesi yerine yeniden üretimle çalışır.

Herhangi bir şey yükleniyor mu?

Hayır. Üretim ve dışa aktarma tamamen tarayıcınızda gerçekleşir.

İlgili araçlar

DXF Görüntüleyici

Renk Paleti

Renk Dönüştürücü

CSS Kutu Gölgesi Oluşturucu

Kontrast Kontrolcüsü