مولد موجات SVG
أنشئ أشكال موجات SVG متعددة الطبقات مع شدة منحنى وعدد طبقات وتعبئة لون خالص أو متدرج قابلة للتعديل، ثم انسخ الكود أو نزّل ملف .svg.
مولد موجات SVG — اضبط شدة المنحنى، واختر عدد طبقات الموجة التي تريد تكديسها، وحدد تعبئة بلون خالص أو تدرّجًا رأسيًا من الأعلى إلى الأسفل بلونين. تُعاد المعاينة المباشرة رسمها أثناء تعديلك لعناصر التحكم، ويعيد زر إعادة التوليد ترتيب شكل الموجة انطلاقًا من بذرة، ويكون كود SVG الكامل جاهزًا للنسخ أو التنزيل كملف .svg. يتم توليد كل شيء مباشرةً في متصفحك؛ ولا تُرسَل أي إعدادات أو صور إلى أي خادم على الإطلاق.
ما هي مولد موجات SVG؟
مولد موجات SVG أداة مجانية تعمل في المتصفح لمصممي الويب ومطوري الواجهات الأمامية الذين يريدون فواصل موجية ناعمة وعضوية وخلفيات رئيسية دون رسم المسارات يدويًا. تضبط شدة المنحنى، وتكدّس من طبقة واحدة حتى ثماني طبقات، وتقلب الموجة لتتجه قمتها للأسفل أو للأعلى، وتملؤها بمزيج لون واحد أو تدرّج رأسي بين لونين HEX. تُبنى كل موجة من مولّد شبه عشوائي قائم على بذرة، لذا فإن الضغط على إعادة التوليد يمنحك شكلًا جديدًا مع الحفاظ على الإعدادات نفسها، والمخرجات هي SVG دقيق وقابل للتحجيم يمكنك لصقه في أي صفحة HTML أو ملف تصميم. استخدمه لفواصل الأقسام والتذييلات واللافتات والخلفيات الزخرفية.
كيفية استخدام مولد موجات SVG
- اضبط شدة المنحنى من 0 إلى 100 للتحكم في مدى ارتفاع قمم الموجة وقوتها.
- اختر عدد الطبقات (1-8)؛ كلما زادت الطبقات تكدّست موجات شبه شفافة لإضفاء العمق.
- استخدم القلب لجعل قمة الموجة تتجه للأسفل أو للأعلى.
- افتح الإعدادات للتبديل بين تعبئة لون خالص أو تدرّج رأسي واختيار لوني البداية والنهاية.
- اضغط إعادة التوليد لإعادة ترتيب شكل الموجة حتى ينال إعجابك.
- انسخ كود SVG أو انقر تنزيل لحفظ ملف wave.svg.
أمثلة
فاصل قسم متدرج
اضبط الشدة على نحو 50، وأبقِ 3 طبقات، واختر تعبئة متدرّجة من الأزرق إلى البنفسجي، ونزّل wave.svg لإدراج فاصل ناعم بين قسمين في الصفحة.
موجة رئيسية جريئة بلون واحد
ارفع الشدة، واضبط الطبقات على 1، وبدّل إلى تعبئة لون خالص، واقلب الموجة للأعلى للحصول على قمة كبيرة لافتة خلف عنوان رئيسي.
خلفية تذييل متعددة الطبقات
استخدم 5-6 طبقات بشدة منخفضة إلى متوسطة لبناء موجة شبه شفافة ناعمة ومتراكمة تصلح جيدًا كخلفية للتذييل.
الأسئلة الشائعة
- ماذا تغيّر شدة المنحنى؟
- تتحكم الشدة (0-100) في مدى ارتفاع وانخفاض كل قمة موجة. القيم المنخفضة تعطي تموجات لطيفة؛ والقيم المرتفعة تعطي قممًا عالية ولافتة. تتحدث المعاينة وكود SVG فورًا عند تغييرها.
- لماذا يغيّر الضغط على إعادة التوليد الشكل؟
- تُرسم كل موجة من مولّد شبه عشوائي قائم على بذرة. تزيد إعادة التوليد البذرة لتحصل على ترتيب جديد للقمم مع الإبقاء على الشدة والطبقات والألوان والتعبئة تمامًا كما ضبطتها.
- ما الفرق بين التعبئة الخالصة والمتدرجة؟
- التعبئة الخالصة تمزج كل طبقة مكدّسة بين لونيك، بينما يطبّق التدرّج تدرّجًا رأسيًا واحدًا من اللون الأول في الأعلى إلى الثاني في الأسفل عبر كل الطبقات. افتح الإعدادات للتبديل واختيار اللونين معًا.
- كيف أستخدم ملف SVG المنزَّل؟
- المخرجات كود SVG قياسي وقابل للتحجيم. انسخه مباشرةً في HTML الخاص بك، أو نزّل wave.svg واستورده إلى أداة التصميم لديك أو أشِر إليه كصورة. ولأنه متجهي، يظل واضحًا عند أي حجم.
- هل يُرفع أي شيء إلى خادم؟
- لا. تُولَّد الموجة بالكامل في متصفحك عبر حسابات محلية، ويُبنى تنزيل .svg من كائن blob في الذاكرة. ولا تغادر أي إعدادات أو ألوان أو صور جهازك أبدًا، لذا تعمل الأداة دون اتصال وتحافظ على خصوصية عملك.
أدوات ذات صلة
تحويل الكود إلى صورة
حوّل مقتطف كود إلى صورة بإبراز لتركيب الجملة داخل متصفحك، مع أكثر من 20 لغة وسمات وخلفيات مخصّصة وأرقام أسطر وتصدير PNG أو SVG.
أداة فحص تباين الألوان
افحص تباين WCAG 2.1 ودرجة APCA Lc بين لون النص ولون الخلفية، وشاهد شارات AA وAAA و3:1، وطبّق أقرب لون ناجح.
خالط الألوان
امزج لونين بصيغة HEX بنسبة تختارها في فضاء RGB أو Lab، واقرأ اللون الوسطي الناتج كعينة وقيمة HEX قابلة للنسخ.
مولّد درجات الألوان
حوّل لونًا أساسيًا واحدًا بصيغة HEX إلى مقياس OKLCH أو HSL أو RGB بخطوات قابلة للتعديل، وتلميحات تباين WCAG لكل خطوة، وتصدير إلى CSS وTailwind وJSON.