ما هو blob بصيغة SVG؟

الـblob هو شكل ناعم وعضوي بلا حواف مستقيمة، يقع في مكان ما بين الدائرة ورشة الماء. تُعد أشكال blob زينة شائعة في تصميم الويب الحديث: خلف الصور الرئيسية والرسومات التوضيحية، أو كإطارات للصور الرمزية، أو كخلفيات للأقسام، أو كأزرار وشارات مرحة. ولأنها رسومات متجهية، فإنها تظل واضحة بأي حجم ولا يتجاوز حجمها بضع مئات من البايتات.

وصف الأداة

تنشئ هذه الأداة أشكال blob عشوائية على هيئة كود SVG نظيف داخل المتصفح. اضغط على «عشوائي» حتى يعجبك الشكل، ثم اضبط بدقة عدد نتوءاته، ومدى عدم انتظامه، ومدى استدارة منحنياته. املأه بلون مصمت أو بتدرج لوني، أو ارسمه كمخطط خارجي، ويمكنك اختياريًا جعله يتحول بين الأشكال في حلقة سلسة. نزّل النتيجة بصيغة SVG أو PNG، أو انسخها كترميز SVG، أو كخلفية CSS، أو كـclip-path في CSS.

الميزات

  • أشكال blob عشوائية قابلة لإعادة الإنشاء: تمنح البذرة والإعدادات نفس الشكل دائمًا
  • إمكانية ضبط التعقيد والعشوائية والنعومة، من أشكال الحصى المستديرة إلى النجوم المدببة
  • تعبئة مصمتة أو متدرجة أو مخططة خارجية بأي لون
  • حركة تحول تتكرر بين الأشكال، مضمّنة داخل SVG من دون JavaScript
  • التنزيل بصيغة SVG أو PNG شفاف بالحجم الذي تختاره
  • كود SVG وخلفية CSS وclip-path في CSS جاهز للنسخ

آلية العمل

تضع الأداة نقاطًا حول دائرة، ثم تحرّك كل نقطة إلى الداخل بمقدار عشوائي، وترسم منحنى مغلقًا ناعمًا يمر عبرها. يُقاس المنحنى بدقة ويُكبَّر بحيث يملأ شكل blob الصورة من حافة إلى حافة. ويحدد مولّد أرقام عشوائية يعتمد على البذرة كل نقطة، لذلك يعيد رقم أو كلمة البذرة شكل blob نفسه لاحقًا. ولإنشاء الحركة، تُوضَع عدة أشكال blob لها العدد نفسه من النقاط داخل عنصر SVG واحد من نوع animate، ويمزج المتصفح بينها.

نصائح

  • تمنحك خمسة إلى ثماني نقاط مع عشوائية متوسطة أشكال blob كلاسيكية؛ أما العشوائية الأقل فتبدو أكثر هدوءًا واحترافية.
  • خفّض النعومة إلى 0% للحصول على مضلعات تشبه البلورات أو الأحجار الكريمة.
  • استخدم كود clip-path في CSS لاقتصاص صورة أو فيديو على هيئة شكل blob.
  • دوّن البذرة، أو اكتب كلمتك الخاصة كبذرة، لإعادة إنشاء شكل blob نفسه تمامًا لاحقًا.
  • اجعل حركة التحول بطيئة، بنحو 8 إلى 15 ثانية لكل حلقة، حتى تظل هادئة في الخلفية.