مولد موج SVG والمقسم

مطور
إعلان · يزيل؟

نمط الموجة


أبعاد

بيكسل
بيكسل

تحويل


طبقات


خلفية


الرسوم المتحركة

إعلان · يزيل؟

مرشد

مولد موجات وفواصل SVG

مولد موج SVG والمقسم

أنشئ فواصل أقسام موجية جميلة بتنسيق SVG لموقعك. اختر من بين 6 أنماط للموجات — موجة جيبية سلسة، موجات متراكبة، متعرج حاد، تلال مستديرة، غير متماثل، وفقاعة عضوية — قم بتخصيص السعة والتردد والألوان والطبقات، ثم قم بالتصدير كرمز SVG، أو خلفية CSS، أو مقتطف HTML، أو ملف SVG قابل للتنزيل. رسوم متحركة CSS اختيارية لتأثيرات الموجات المتدفقة.

كيف تستعمل

حدد نمط موجة من القائمة المنسدلة واضبط عناصر التحكم. يتم تحديث المعاينة الحية فورًا عند تغيير السعة والتردد والعرض والارتفاع وعدد الطبقات والألوان والشفافية. اقلب عموديًا لفواصل سفلية أو أفقيًا لعكس الاتجاه. قم بتمكين الرسوم المتحركة لتأثيرات الموجات المتدفقة. عندما تكون راضيًا عن النتيجة، استخدم أزرار التصدير لنسخ رمز SVG، أو ترميز خلفية CSS، أو مقتطف HTML، أو تنزيل ملف SVG.

سمات

  • 6 أنماط للموجات — موجة جيبية سلسة (منحنى كلاسيكي)، موجات متراكبة (عمق متداخل)، متعرج حاد (أشكال V بزوايا)، تلال مستديرة (نتوءات نصف دائرية)، غير متماثل (إحساس طبيعي بالرياح)، فقاعة/عضوي (منحنيات عضوية عشوائية).
  • دعم الطبقات المتعددة — ما يصل إلى 4 طبقات مع عناصر تحكم فردية في اللون والشفافية. يتم إزاحة الطبقات طوريًا لإنشاء عمق طبيعي. مثالي لفواصل بأسلوب التدرج اللوني.
  • معاينة مباشرة — معاينة مرئية كبيرة تعرض الموجة كفاصل قسم. يتم التحديث في الوقت الفعلي أثناء ضبط أي عنصر تحكم. لون خلفية قابل للتكوين.
  • السعة والتردد — تحكم في ارتفاع الموجة (20-200 بكسل) وعدد القمم (1-10) للشكل الذي تحتاجه بالضبط.
  • عناصر التحكم بالقلب — اقلب عموديًا (لفواصل أسفل القسم) أو أفقيًا (لعكس اتجاه الموجة).
  • رسوم متحركة CSS — رسوم متحركة اختيارية للموجات المتدفقة مع التحكم في السرعة (بطيء/متوسط/سريع). يتم تضمين رمز الرسوم المتحركة في الصادرات عند تمكينه.
  • 4 خيارات تصدير — انسخ رمز SVG (مضمن)، انسخ خلفية CSS (URI للبيانات)، انسخ مقتطف HTML (فاصل قسم جاهز للصق)، قم بتنزيل ملف SVG.
  • أبعاد مخصصة — اضبط العرض والارتفاع لمطابقة تخطيطك. الافتراضي 1200 × 200 مناسب لمعظم أقسام مواقع الويب.

أنماط الموجات

موجة جيبية سلسة: منحنى جيبي كلاسيكي باستخدام تقريب بيزييه التكعيبي. نظيف وحديث.
موجات متراكبة: موجات جيبية متعددة مع إزاحات طورية تخلق عمقًا وتداخلاً. رائعة للأقسام الرئيسية.
متعرج حاد: قمم وقيعان بزوايا على شكل حرف V. جريء وهندسي.
تلال مستديرة: نتوءات نصف دائرية لإحساس بمناظر طبيعية ناعمة ومتدرجة.
غير متماثل: سعات صعود وهبوط مختلفة لمظهر طبيعي يشبه الرياح.
فقاعة/عضوي: تنوع عشوائي بذرة على المنحنيات لأشكال عضوية فريدة. المدخلات المتطابقة تنتج دائمًا نفس المخرجات.

إعلان · يزيل؟

ما هو فاصل القسم SVG؟

فاصل القسم SVG هو موجة أو شكل زخرفي يوضع بين أقسام المحتوى على صفحة ويب لإنشاء انتقالات بصرية سلسة بدلاً من الخطوط الأفقية الصلبة. يتم إنشاؤها باستخدام SVG (رسومات المتجهات القابلة للتطوير)، مما يعني أنها مستقلة عن الدقة — تبدو واضحة على أي حجم شاشة من الهاتف المحمول إلى 4K. فواصل SVG خفيفة الوزن (عادة أقل من 2 كيلوبايت)، ويمكن تنسيقها باستخدام CSS، وتعمل في جميع المتصفحات الحديثة. إنها نمط تصميم شائع لصفحات الهبوط، والحافظات، والمواقع الحديثة.

كيف أضيف فاصل موجة إلى موقعي؟

الطريقة الأبسط: انقر على ‘انسخ مقتطف HTML’ والصق الرمز بين قسمين في ملف HTML الخاص بك. يتضمن المقتطف تنسيق CSS للموضع. لمزيد من التحكم، استخدم ‘انسخ خلفية CSS’ وقم بتطبيقها كصورة خلفية على عنصر div. بالنسبة لأطر العمل مثل React أو Vue، استخدم ‘انسخ رمز SVG’ والصقه كـ SVG مضمن. ضع الفاصل بشكل مطلق في الجزء العلوي أو السفلي من القسم باستخدام CSS. استخدم تبديل القلب للتبديل بين اتجاه الجزء العلوي من القسم (الموجات تشير إلى الأعلى) والجزء السفلي من القسم (الموجات تشير إلى الأسفل).

هل يمكنني تحريك فاصل الموجة؟

نعم — قم بتمكين تبديل الرسوم المتحركة لإضافة انجراف أفقي متدفق إلى موجاتك. يمكنك الاختيار بين السرعات البطيئة والمتوسطة والسريعة. تستخدم الرسوم المتحركة @keyframes الخاصة بـ CSS وتعمل بسلاسة في جميع المتصفحات الحديثة. يتم تضمين رمز الرسوم المتحركة تلقائيًا عند تصدير SVG أو CSS. لاحظ أن الفواصل المتحركة تستهلك وحدة معالجة مركزية أكثر قليلاً من الفواصل الثابتة، لذا استخدمها باعتدال في الصفحات التي تحتوي على العديد من الأقسام أو في الصفحات المهمة للأداء.

لماذا استخدام SVG بدلاً من PNG لفواصل الأقسام؟

فواصل SVG متفوقة على PNG في كل جانب لهذا الاستخدام. إنها مستقلة عن الدقة (واضحة عند أي تكبير/DPI)، صغيرة الحجم (1-2 كيلوبايت مقابل 50-200 كيلوبايت لـ PNG)، قابلة للتطوير بشكل لا نهائي إلى أي عرض دون تشويش، يمكن تلوينها وتحريكها باستخدام CSS، وتحميلها بشكل أسرع. فاصل SVG واحد يعمل على الهواتف المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر المكتبية وشاشات Retina دون الحاجة إلى أحجام صور متعددة. كانت فواصل PNG شائعة قبل أن يصبح دعم SVG عالميًا، ولكن في عام 2024+ لا يوجد سبب لاستخدامها.

هل تريد حذف الإعلانات؟ تخلص من الإعلانات اليوم

تثبيت ملحقاتنا

أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع

أضف لـ إضافة كروم أضف لـ امتداد الحافة أضف لـ إضافة فايرفوكس أضف لـ ملحق الأوبرا

وصلت لوحة النتائج!

لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!

إعلان · يزيل؟
إعلان · يزيل؟
إعلان · يزيل؟

ركن الأخبار مع أبرز التقنيات

شارك

ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة

اشتري لي قهوة
إعلان · يزيل؟