Softonic

مولد موجات SVG

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

الموجات المنحنية هي فواصل الأقسام التي تلجأ إليها كل صفحة هبوط عاجلا أم آجلا. يأخذ هذا المولّد عينات من منحنى جيبي ناعم ليكوّن <path> واحدا مملوءا، ويتيح لك ضبط السعة والتردد والموضع العمودي، ويلوّنه بأي لون صلب، جاهزا للوضع بين قسمين دون أي CSS إضافي. انسخ كود SVG المضمّن والصقه مباشرة في صفحتك.

كيفية إنشاء موجة SVG

  1. 1

    اضبط اللون

    اختر أي لون تعبئة صلب للموجة باستخدام منتقي الألوان.

  2. 2

    اضبط السعة

    ارفع السعة (من 0 إلى 150) للحصول على منحنى أعمق، أو اخفضها للحصول على تموّج خفيف.

  3. 3

    اضبط التردد

    اختر من 1 إلى 8 دورات عبر العرض. المزيد من الدورات يعني نمطا أكثر ازدحاما وتموّجا.

  4. 4

    اختر أعلى أو أسفل

    ثبّت التعبئة عند الحافة السفلية لموجة تذييل، أو عند الحافة العلوية لموجة عنوان.

  5. 5

    انسخ SVG

    انسخ كود SVG المضمّن والصقه في HTML أو في خلفية CSS.

أين تفيد الموجات فعلا

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

تشريح المسار

يأخذ المولّد عينات من منحنى جيبي ليكوّن <path> واحدا مملوءا داخل viewBox بقياس 1440 x 320:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" width="100%" height="320"><path d="M 0,160 L 24,180 L 48,199 ... L 1440,320 L 0,320 Z" fill="#6366F1"/></svg>

يعبر المسار العرض بمقاطع مستقيمة قصيرة تتتبع الموجة الجيبية، ثم ينغلق نحو الحافة السفلية (أو العلوية) ليشكّل التعبئة الصلبة. رفع السعة يوسّع القمم والقيعان؛ وإضافة الدورات تحشر المزيد منها عبر العرض.

جعله متجاوبا

  • يضبط SVG مسبقا preserveAspectRatio="none"، لذا تتمدد الموجة لتملأ أي عرض.
  • يأتي بـ width="100%"؛ تحكّم في الارتفاع عبر CSS (height: auto أو قيمة ثابتة) كما يحلو لك.
  • لتكديس الموجات لإضافة عمق، ضع نسختين في CSS الخاص بك، وحدّد موضعهما بشكل مطلق، وأعطِ كلا منهما لونا وشفافية مختلفين.

إمكانية الوصول

الموجات زخرفية. أضف aria-hidden="true" وrole="img" كي تتخطى برامج قراءة الشاشة العنصر، واحتفظ بكل المحتوى المهم في عناصر HTML شقيقة حقيقية.

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

أدمج SVG داخل HTML عندما تريد أن تتفاعل التعبئة مع متغيرات CSS (الوضع الداكن، تخصيص السمات). استخدم background-image عندما تكون الموجة زخرفية بحتة وتريد أن يخزّنها المتصفح في الذاكرة المؤقتة بشكل منفصل.

نعم. إنها <path> متجهية مع preserveAspectRatio="none"، لذا تتحجّم إلى أي عرض دون أن تصبح مسنّنة، بخلاف الصورة النقطية التي تتشوّش عند التكبير.

نعم. غلّف المسار داخل SVG وحرّك خاصيته d أو transform: translateX() عبر إطارات CSS المفتاحية. أبقِ الحركة خفيفة؛ فرسوم الموجات التي تعمل تلقائيا تصبح قديمة سريعا.

عادة أقل بكثير من 1 كيلوبايت، لأنه مسار واحد بلون تعبئة واحد. وهذا جزء ضئيل من أي مكافئ بصيغة PNG.

أدوات ذات صلة

مرجع جدول 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.

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