Softonic

مولد كتلة SVG

خطوة 1 / 2
التالي

حلت أشكال الكتل المتجانسة محل الدوائر المثالية حوالي عام 2018، لتُشكل «خلفية مستديرة ودودة» للواجهات المستخدمية الحديثة؛ حيث تظهر خلف رسوم البطلين، أو كأقنعة للصور الشخصية، أو كبقع ملونة على صفحات الهبوط. يقوم هذا المولد بإنشاء كتلة من حركة عشوائية حول دائرة، ثم يُنعطف هذا المتعدد الأضلاع باستخدام منحنيات بيزير التربيعيّة ليأخذ الشكل العضوي والمتذبذب قليلاً الذي يسعى إليه المصممون. يمكنك التحكم بعدد نقاط التحكم (وهو ما يحدد درجة التعقيد)، ومدى تباين الحركة العشوائية، بالإضافة إلى قيمة البذرة العشوائية، ثم نسخ الملف بصيغة SVG.

كيف يتم بناء الكتلة (blob)؟

  1. 1

    اختر اللون والتعقيد

    تحدد درجة التعقيد عدد نقاط التحكم (من 3 إلى 12)؛ فكلما زاد عدد النقاط، زاد عدد التلال.

  2. 2

    قم بضبط التباين

    يُحدد التباين مدى انحراف كل نقطة عن نصف القطر الأساسي؛ حيث يشير التباين المنخفض إلى شكل شبه دائري، بينما يدل التباين العالي على وجود تفرعات واضحة ومكثفة في الشكل.

  3. 3

    اختر بذرة

    البذرة هي العدد العشوائي الذي يحدد شكل الكتلة (blob). نفس البذرة تؤدي إلى نفس الكتلة؛ أما عند استخدام بذرة مختلفة، فيتم توليد كتلة جديدة بشكل عشوائي.

  4. 4

    قم بنسخ ملف SVG.

    تحصل على ملف واحد من نوع `<path>` ضمن مربع عرض وارتفاع يبلغ 400×400، ويمكن وضعه في أي مكان يدعم تنسيق SVG فيه.

تشريح مسار الكتلة

يوزّع المولّد N نقطة بشكل متساوٍ حول مربع ذي أبعاد 400×400 (مركزه عند 200، 200؛ نصف قطر القاعدة 130)، ثم يُغيّر كل نصف قطر بمقدار ±contrast، وبعد ذلك يربط كل زوج من النقاط بمنحنى بيزييه التربيعي.

M x₀ y₀ Q x₁ y₁ midx midy Q x₂ y₂ midx midy ... Z

midx, midy يمثل النقطة الوسطى بين النقطة الحالية والنقطة التالية؛ ووضع نهاية كل منحنى عند هذه النقطة هو ما يحوّل المتعدد الأضلاع إلى شكل عضوي.

قائمة معايير المعلمات

الإعداد النطاق التأثير
التعقيد 3–12 عدد الفصوص؛ حيث يُعد التراوح بين 5 و7 هو المثالي لاستخدام واجهة المستخدم (UI).
المقارنة 0–100 سعة المشي العشوائي؛ القيم من 30 إلى 60 تبدو طبيعية.
# البذرة 1–9999 حتمي؛ نفس البذرة تؤدي إلى نفس النتيجة في جميع التجارب.
اللون القيمة السداسية ملء واحد، بدون خط رسم؛ قم بإضافة fill-opacity يدويًا عند الحاجة.

أين تعمل الكتل بشكل أفضل؟

  • ديكور الخلفية، خلف العناوين، وفي الزوايا الفارغة من الأقسام الرئيسية.
  • أقنعة الأفاتار: قم بتطبيق المسار كقيمة clip-path لإطارات الصور الشخصية العضوية.
  • التسليطات التوضيحية: بقعة من لون العلامة التجارية تحت الأيقونات أو الأرقام.
  • أقنعة الصور: باستخدام CSS mask-image، تقوم أداة “blob” بقطع الصور داخل فتحات عضوية.

نصائح

احتفظ بالعناصر غير المُرسومة بخطوط لخلفياتك؛ فالخطوط تجعلها تبدو كملصقات.

  • لعملية التحول المتحرك، قم بإنشاء نقطتين ذوات تعقيد متطابق ومختلفتي البذور، ثم حرك الخاصية d باستخدام مكتبة مثل flubber أو svg-morpheus. – قم بتوسيط ملف SVG بدلاً من استخدام <img src=blob.svg>؛ إذ يسمح لك هذا الخيار بتغيير لون التعبئة باستخدام متغيرات CSS أثناء تشغيل البرنامج. احتفظ بمجال الإطار (viewbox)، ولكن حذف العنصر width="400" height="400" بشكل صريح إذا كنت ترغب في أن يتكيف الشكل المدمج مع أي حاوية.

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

يقوم البذرة بتهيئة قيمة srand() الخاصة بلغة PHP قبل بدء المسيرة العشوائية؛ وبالتالي، فإن استخدام نفس البذرة يؤدي إلى تسلسل متطابق من استدعاءات rand()، مما ينتج عنه انحرافات متساوية في النقاط ومسارًا متماثلًا تمامًا.

نعم، ولكن فقط إذا كان كلا المسارين يحتويان على نفس عدد الأوامر وعدد النقاط. اجعل درجة التعقيد متساوية، واختلاف فقط قيمة البذرة للحصول على أزواج مناسبة للإدخال التدريجي. استخدم مكتبة تدرج مثل GSAP MorphSVG أو flubber لإنشاء الرسوم المتحركة الفعلية.

استبدل قيمة fill="#hex" في المسار بـ fill="url(#gradient-id)"، ثم أضف تعريفًا لـ <linearGradient> أو <radialGradient> داخل كتلة <defs>. كما تعمل خصائص CSS المخصصة بشكل صحيح إذا تم إدراج ملف SVG بشكل مباشر (inline).

الناتج نظيف، لكنه ليس مُختصرًا بشكل مفرط. إذا كنت تهتم بحجم البايتات، فقم بتشغيل البرنامج مرة واحدة باستخدام أداة SVGO؛ حيث يمكن عادةً إزالة ما بين 20 و30% من الحروف.

لا. يتم إنشاء ملف SVG في الوقت الفعلي بناءً على المعلمات الموجودة في نموذج الرابط (URL)، ولا يتم تسجيل أي بيانات.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

أداة إزالة التشفير في لغة جافا سكريبت (JavaScript Deobfuscator)

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

مولد تراخيص

قم بإنشاء النص الكامل لترخيصات المصدر المفتوح مع إدخال اسمك والسنة المقابلة، ويشمل ذلك تراخيص MIT وApache 2.0 وGPLv3 وBSD-3 وMPL-2.0 وCC.

الأداة متاحة بلغات أخرى