مُولِد الكتلة CSS إنشاء أشكال كتلة عضوية كـ SVG مع ملء تدرجي وتصادفي.
مُولِد الكتلة CSS
إنشاء أشكال كتلة عضوية كـ SVG مع ملء تدرجي وتصادفي.
أعِد تشكيل الشكل
انقر على خيار العشوائية لتوليد أشكال كتلة عضوية جديدة.
تخصيص المظهر
عدل التعقيد والحجم والألوان وافعل أو أطفئ ملء التدرج.
نسخ SVG
معاينة الكتلة ونسخ كود SVG الكامل.
What Is مُولِد الكتلة CSS?
مُولِد أشكال Blob بالسي إس إس يخلق أشكالاً عضوية غير منتظمة كمسارات SVG. Blobs هي أشكال متدفقة وملساء تضيف趣اً بصرياً وشعوراً طبيعياً وعضوياً إلى تصاميم الويب. غالباً ما تُستخدم كزخارف خلفية وقوالب صور وزخارف زينية. هذا الأداة يولد Blobs برمجياً باستخدام منحنيات بيزير مع تعقيد قابل للتعديل (عدد نقاط التحكم). كل نقرة على زر العشوائية tạo شكل فريد عن طريق تغيير مواضع نقاط التحكم. يمكنك تخصيص حجم Blob وعدد نقاط التعقيد والاختيار بين ملء اللون الصلب أو التدرج. الإخراج هو رمز SVG نظيف مع تعريفات تدرج اختيارية، جاهز للاستخدام مباشرة أو كصورة خلفية.
Why Use مُولِد الكتلة CSS?
-
تعشية عشوائية بلمسة واحدة لأشكال كتلة فريدة من نوعها لا نهاية لها
-
تعقيد قابل للتعديل من البسيط إلى العضوي جداً
-
خيار ملء تدرجي مع لونين يمكن تعديلهما
-
إخراج SVG نظيف جاهز للاستخدام المباشر أو خلفيات CSS
Common Use Cases
التزيينات الخلفية
أضف أشكال كتلة عضوية كعناصر تزيين خلفية.
مasks الصور
استخدم أشكال الكتلة كمasks قص لصور والمحتوى.
النقاط البارزة في القسم الرئيسي
وضع كتل تدرجية خلف المحتوى الرئيسي للحصول على عمق مرئي.
الرسومات المجردة
دمج عدة كتلات لإنشاء رسومات مجردة وعضوية.
Technical Guide
مُولِد Blob يخلق عناصر مسار SVG باستخدام منحنيات بيزير المكعبة (الأمر C). يتم توزيع النقاط حول دائرة بفترات زاوية متساوية، مع قيم نصف قطر عشوائي tạo العضوية الغير منتظمة. يتم حساب نقاط التحكم في بيزير لإنشاء منحنيات ملساء بين كل نقطة، مما يضمن أن تشكل Blob بشكل طبيعي دون زوايا حادة. 매араметر التعقيد يتحكم في عدد النقاط - أكثر النقاط تُخلق أشكالاً معقدة ومفصلة أكثر. لملء التدرج، يتم تضمين تعريف SVG linearGradient في قسم defs من SVG. يمكن استخدام Blob مباشرة كعنصر SVG أو تحويله إلى خلفية سي إس إس باستخدام تقنية URI البيانات. للرسوم المتحركة، يمكن تحريك سمة d للمسار SVG بين أشكال Blob مختلفة لتحقيق تأثير مورفينغ. استخدم نفس عدد نقاط التحكم لمعابر مورفينغ سلسة.
Tips & Best Practices
-
1استخدم 5-7 نقاط تعقيد للحصول على أشكال الكتلة التي تبدو طبيعية
-
2تطبيق ملء التدرج للحصول على أشكال أكثر إثارة للاهتمام مرئياً
-
3دمج عدة كتلات بحجمات وشفافيات مختلفة
-
4تحويل إلى صورة خلفية CSS لاستخدامها بدون SVG مباشر
Related Tools
مُحول مسار قص CSS
أنشئ أشكالًا لمسار القص CSS باستخدام مسابقة متعددة الزوايا والدوائر والأشكال البيضاوية.
🎨 CSS & Design
مُحول موجات سي إس إس
إنشاء مقسمات أقسام SVG بموجات قابلة للتعديل وارتفاع وألوان.
🎨 CSS & Design
مُولِد قَسْم CSS
إنشاء أقسام منفصلة في CSS بطرق متعددة تشمل التدرج والظل والزغب.
🎨 CSS & Design
مُولِد نَمَطات SVG
انشئ نمطات متكررة مبنية على SVG لخلفيات CSS مع أشكال متنوعة.
🎨 CSS & DesignFrequently Asked Questions
Q هل يمكنني تحريك أشكال الكتلة؟
Q كيف أستخدم كتلة كماسك قص؟
Q هل يمكنني استخدام الكتلة كخلفية CSS؟
Q لماذا تظهر أشكال الكتل مختلفة كل مرة؟
Q هل يمكنني إنشاء كتل متناظرة؟
About This Tool
مُولِد الكتلة CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.