مولّد موجات SVG

ولّد موجات SVG ناعمة أو مدببة أو متدرجة بطبقات وسعة وseed. نزّل ملف .svg أو انسخه كخلفية CSS بصيغة data URI لفواصل الأقسام.

إعدادات الموجة

نمط الموجة
الموضع

الإعدادات نفسها مع البذرة نفسها تنتج دائمًا الشكل نفسه.

معاينة

معاينة
كود SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z"/></svg>
خلفية CSS (data URI)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z'/%3E%3C/svg%3E");

أدوات ذات صلة

عرض الكل
مولّد ظل الصندوق CSS مولّد تدرج CSS مولّد Flexbox CSS مولّد Grid CSS مولّد نصف قطر الحدود مولّد Glassmorphism مولّد Neumorphism مولّد ظل النص CSS

ما هو مولّد موجات SVG؟

ينشئ أشكال موجات بصيغة SVG لفواصل الأقسام والخلفيات. اختر منحنيات ناعمة أو قمماً حادة أو درجات، وكدّس حتى خمس طبقات، واقلب الموجة إلى الأعلى، وصدّر كملف .svg أو كـ background-image بصيغة data URI جاهزة للصق في CSS.

كيفية استخدام مولّد موجات SVG

  1. اختر اللون ونمط الموجة (Smooth أو Peaks أو Steps) والموضع (أسفل أو أعلى).
  2. اضبط التعقيد والسعة والطبقات والشفافية والعرض والارتفاع.
  3. انقر عشوائي أو اكتب Seed للحصول على موجة مختلفة لكنها قابلة لإعادة الإنتاج.
  4. نزّل .svg أو انسخ كود SVG.
  5. أو انسخ خلفية CSS (data URI) لاستخدام الموجة دون ملف منفصل.

مثال

الإدخال
Complexity 2, amplitude 0, 1440×320, color #0099ff
الإخراج
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,160C120,160 480,160 720,160C960,160 1320,160 1440,160L1440,320L0,320Z"/></svg>

تعطي السعة 0 خطاً مسطحاً، وهذا يُظهر بناء Bézier بدقة.

متى تستخدم مولّد موجات SVG

استخدمه لفواصل الأقسام الموجية والتذييلات وخلفيات الواجهة الرئيسية. يجعل preserveAspectRatio="none" الموجة تمتد لأي عرض، وهذا يناسب الفواصل بعرض كامل؛ أما الرسوم التي يجب أن تحافظ على النسب فعدّل SVG في محرر متجهات.

كيف يعمل مولّد موجات SVG

يُقسَّم العرض إلى مقاطع متساوية؛ وارتفاع كل نقطة هو خط الأساس مضافاً إليه إزاحة شبه عشوائية ببذرة (mulberry32) مضروبة في السعة. تمرر الموجات الناعمة منحنى Catmull-Rom عبر النقاط محوّلاً إلى أوامر Bézier التكعيبية C؛ وتستخدم القمم خطوطاً مستقيمة والدرجات خطوطاً أفقية/رأسية. يُغلق المسار إلى الحافة السفلية (أو العلوية). تستخدم الطبقات المتعددة خطوط أساس وبذوراً مختلفة مع شفافية تزداد نحو الأمام. يُبقي data URI شيفرة SVG مقروءة ويرمّز بالنسبة المئوية الأحرف غير الآمنة فقط.

حالات الاستخدام الشائعة

  • فواصل موجية بين أقسام صفحة الهبوط
  • خلفيات تذييل متعددة الطبقات
  • أسفل أقسام الواجهة الرئيسية
  • صور خلفية عبر CSS data URI
  • أشكال زخرفية قابلة لإعادة الإنتاج في أنظمة التصميم

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

هل سأحصل على الموجة نفسها مجدداً؟

نعم. الإعدادات نفسها وSeed نفسها تولّدان دائماً شيفرة SVG مطابقة.

SVG مضمّن أم data URI؟

يمكن تنسيق SVG المضمّن وتحريكه بـ CSS؛ أما data URI في background-image فيُبقي HTML نظيفاً لكن لا يمكن إعادة تنسيقه بعد الترميز.

كيف أضع موجة في أعلى قسم؟

اضبط الموضع على أعلى؛ يُغلق المسار إلى الحافة العلوية فيملأ إلى الأعلى.

استكشف المزيد من الفئات

CRC
خوارزميات التحقق من التكرار الدوري لاكتشاف الأخطاء
MD
خوارزميات ملخص الرسالة (MD2، MD4، MD5)
SHA-1
خوارزمية التجزئة الآمنة 1 - دالة تجزئة 160 بت
SHA-2
عائلة خوارزمية التجزئة الآمنة 2 (SHA-224، SHA-256، SHA-384، SHA-512)