مولّد أشكال Blob SVG

أنشئ أشكال blob عضوية ناعمة بصيغة SVG بنقاط وعشوائية وseed قابلة للضبط. تعبئة صلبة أو متدرجة أو حدود، ونزّل .svg أو انسخ CSS data URI.

إعدادات الشكل العضوي

التعبئة

الإعدادات نفسها مع البذرة نفسها تنتج دائمًا الشكل نفسه.

معاينة

معاينة
كود SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path fill="#8a3ffc" d="M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z"/></svg>
خلفية CSS (data URI)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cpath fill='%238a3ffc' d='M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z'/%3E%3C/svg%3E");

أدوات ذات صلة

عرض الكل
مولّد ظل الصندوق CSS مولّد تدرج CSS مولّد Flexbox CSS مولّد Grid CSS مولّد نصف قطر الحدود مولّد Glassmorphism مولّد Neumorphism مولّد ظل النص CSS

ما هو مولّد أشكال Blob SVG؟

يولّد أشكال blob عضوية ناعمة بصيغة SVG. تحكم في عدد نقاط الارتكاز ومدى عدم انتظام الشكل وحجمه، واختر تعبئة صلبة أو متدرجة أو حدوداً، وصدّر كملف .svg أو CSS data URI.

كيفية استخدام مولّد أشكال Blob SVG

  1. اختر التعبئة (صلبة أو متدرجة أو حدود) واللون أو الألوان.
  2. اضبط نقاط الارتكاز والعشوائية والحجم.
  3. انقر عشوائي أو أدخل Seed لشكل محدد.
  4. نزّل .svg أو انسخ كود SVG.
  5. أو انسخ خلفية CSS (data URI).

مثال

الإدخال
Points 4, randomness 0, size 100, solid #8a3ffc
الإخراج
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path fill="#8a3ffc" d="M50,5C65,5 95,35 95,50C95,65 65,95 50,95C35,95 5,65 5,50C5,35 35,5 50,5Z"/></svg>

متى تستخدم مولّد أشكال Blob SVG

استخدم أشكال blob خلفيات زخرفية أو أقنعة صور أو إطارات صور رمزية أو لمسات في الرسوم التوضيحية. مع عشوائية 0 تحصل على شكل شبه دائري؛ وللأشكال الهندسية الدقيقة استخدم CSS border-radius أو clip-path بدلاً من ذلك.

كيف يعمل مولّد أشكال Blob SVG

تُوزَّع نقاط الارتكاز بالتساوي حول دائرة (نصف قطرها 45% من الحجم). تُخفَّض مسافة كل نقطة من المركز بمقدار شبه عشوائي ببذرة يصل إلى 60% × العشوائية. يُحوَّل منحنى Catmull-Rom مغلق عبر النقاط إلى أوامر Bézier التكعيبية، مما يضمن حداً ناعماً بلا زوايا حادة. تستخدم التعبئة المتدرجة linearGradient في SVG من أعلى اليسار إلى أسفل اليمين.

حالات الاستخدام الشائعة

  • أشكال خلفية زخرفية في صفحات الهبوط
  • أقنعة صور للصور الشخصية
  • لمسات وملصقات للرسوم التوضيحية
  • أشكال blob متحولة متحركة (ولّد عدة أشكال ببذور مختلفة)
  • عناصر نائبة في العروض التقديمية

الأسئلة الشائعة

هل يمكنني إعادة إنشاء blob أعجبني؟

نعم. احتفظ بـ Seed مع النقاط والعشوائية والحجم؛ فهي تنتج المسار نفسه دائماً.

كيف أستخدم blob كقناع صورة؟

ضع المسار داخل <clipPath> في SVG أو استخدم ملف SVG المنزَّل مع mask-image في CSS.

لماذا لا يلامس الشكل الحواف أبداً؟

أقصى نصف قطر هو 45% من الحجم، مما يترك هامشاً صغيراً كي لا تُقطع الحدود وتنعيم الحواف.

استكشف المزيد من الفئات

CRC
خوارزميات التحقق من التكرار الدوري لاكتشاف الأخطاء
MD
خوارزميات ملخص الرسالة (MD2، MD4، MD5)
SHA-1
خوارزمية التجزئة الآمنة 1 - دالة تجزئة 160 بت
SHA-2
عائلة خوارزمية التجزئة الآمنة 2 (SHA-224، SHA-256، SHA-384، SHA-512)