مولد موجات SVG

انشئ موجات SVG ناعمة لفصل الاقسام

تعد الموجات من اكثر الطرق اناقة للفصل بين قسمين في الصفحة — فهي تضيف حركة وشخصية وعمقا دون الحاجة الى صورة. يُنشئ هذا المولد عنصر <path> بسيطا داخل <svg>، مضبوط الحجم ليمتد على اي حاوية بـ width: 100%.

التحكم

• المقاطع — عدد النتوءات في الموجة. مقطع واحد يعطي منحنى لطيفا واحدا؛ عشرة مقاطع تعطي نمطا حركيا مكثفا.
• السعة — التارجح العمودي لكل نتوء. سعة منخفضة تعطي تموجا خفيفا؛ سعة عالية تعطي موجة دراماتيكية.
• البذرة — عدد صحيح حتمي يتحكم في التباين العشوائي بين النتوءات. اضغط اعادة تشغيل لتجربة اشكال جديدة.
• قلب — يتنقل بين فاصل سفلي (موجة في الاعلى وتعبئة في الاسفل) وفاصل علوي (موجة في الاسفل وتعبئة في الاعلى).
• التعبئة — لون صلب او تدرج لوني خطي من نقطتين بأي زاوية.

استخدام المخرج

نظرا لان الـ SVG يستخدم preserveAspectRatio="none"، يمكنك مده الى اي عرض بتغليفه في حاوية لها width في CSS: ستتكيف الموجة مع الصفحة مع الحفاظ على ارتفاعها. الصق الـ SVG مباشرة في HTML او مكون React او نظام القوالب لديك.

<div style="width:100%"><!-- svg مولد --></div>

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

• فواصل بين قسم البطل والكتلة التالية
• تذييلات مرحة
• منحنيات خلفية متحركة (يمكن تحريك المسار عبر CSS او SMIL)
• اشكال زخرفية خلف بطاقات الاسعار والشهادات واقسام الميزات
• مؤشرات التحميل وانتقالات الاقسام

المسار حتمي — تعطي نفس البذرة دائما نفس الموجة — لذا حين تعثر على شكل يعجبك يظل ثابتا. احفظ الـ SVG كملف اذا احتجت الى تعديله في محرر متجهات او ضبط الالوان يدويا.