تصميم / SVG

مولد موجات SVG لفواصل الأقسام

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

مولد موجات SVG لفواصل الأقسام: كل طبقة عبارة عن صف من النقاط يتناوب عشوائيًا فوق خط الأساس وتحته، ثم تُوصل النقاط بمنحنى ناعم ويُملأ الشكل حتى الحافة السفلية. تكون الطبقات الخلفية أفتح لونًا، ما يمنح الطبقات إحساسًا بالعمق. تمتد SVG إلى أي عرض، بينما يضمّن إصدار CSS الموجة كخلفية data URI. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.

مرات التشغيل
في المتصفح
التكلفة
مجاني · بلا تسجيل
التوفر
جاهز للاستخدام
مولّد موجات SVGمعالجة محلية

تعمل بالكامل في المتصفح

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

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

SVG أم CSS؟

يمكن تنسيق SVG المضمّن وتحريكه باستخدام CSS، كما يمكن أن يستخدم لون التعبئة currentColor. عند استخدام SVG كخلفية CSS، يكون SVG عبارة عن URI للبيانات: لا شيء إضافي لتحميله، لكن اللون يكون ثابتًا في الشيفرة. لا يتجاوز حجم الملف بضع مئات من البايتات في كلتا الحالتين؛ ويمكن تحسينه أكثر باستخدام منظّف SVG.

النعومة

المنحنى عبارة عن خط Catmull-Rom يتحول إلى مقاطع Bézier تكعيبية: عند أقصى نعومة، ينحني بسلاسة عبر كل نقطة، وعند الصفر يصبح خطوطًا مستقيمة تصل بينها، ما يعطي حافة جبلية مسننة.

طريقة الاستخدام

  1. حدّد الطبقات وعدد الموجات وارتفاعها.
  2. اختر لونًا، واقلب الموجة لاستخدامها أعلى القسم.
  3. انقر لإنشاء موجات عشوائية جديدة، ثم نزّل SVG أو انسخ CSS.

الخصوصية والقيود

تُرسم الموجات في المتصفح.

أدوات ذات صلة

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

كيف أستخدمها بين قسمين؟

امنح الموجة لون القسم الموجود أسفلها، وضعها في أسفل القسم العلوي بعرض كامل؛ واقلبها لاستخدامها أعلى قسم بدلًا من ذلك.

هل تمنح الإعدادات نفسها الموجة نفسها؟

نعم، إذ يأتي الشكل من قيمة عشوائية ابتدائية، ولا يتغير إلا عند النقر لإنشاء موجة جديدة.

هل يمكنني استخدام الموجات لأغراض تجارية؟

نعم، تُنشأ الأشكال لك ولا تخضع لقيود ترخيص.

أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا