انشئ موجات SVG ناعمة لفصل الاقسام
تعد الموجات من اكثر الطرق اناقة للفصل بين قسمين في الصفحة — فهي تضيف حركة وشخصية وعمقا دون الحاجة الى صورة. يُنشئ هذا المولد عنصر <path> بسيطا داخل <svg>، مضبوط الحجم ليمتد على اي حاوية بـ width: 100%.
التحكم
- المقاطع — عدد النتوءات في الموجة. مقطع واحد يعطي منحنى لطيفا واحدا؛ عشرة مقاطع تعطي نمطا حركيا مكثفا.
- السعة — التارجح العمودي لكل نتوء. سعة منخفضة تعطي تموجا خفيفا؛ سعة عالية تعطي موجة دراماتيكية.
- البذرة — عدد صحيح حتمي يتحكم في التباين العشوائي بين النتوءات. اضغط اعادة تشغيل لتجربة اشكال جديدة.
- قلب — يتنقل بين فاصل سفلي (موجة في الاعلى وتعبئة في الاسفل) وفاصل علوي (موجة في الاسفل وتعبئة في الاعلى).
- التعبئة — لون صلب او تدرج لوني خطي من نقطتين بأي زاوية.
استخدام المخرج
نظرا لان الـ SVG يستخدم preserveAspectRatio="none"، يمكنك مده الى اي عرض بتغليفه في حاوية لها width في CSS: ستتكيف الموجة مع الصفحة مع الحفاظ على ارتفاعها. الصق الـ SVG مباشرة في HTML او مكون React او نظام القوالب لديك.
<div style="width:100%"><!-- svg مولد --></div>
الاستخدامات الشائعة
- فواصل بين قسم البطل والكتلة التالية
- تذييلات مرحة
- منحنيات خلفية متحركة (يمكن تحريك المسار عبر CSS او SMIL)
- اشكال زخرفية خلف بطاقات الاسعار والشهادات واقسام الميزات
- مؤشرات التحميل وانتقالات الاقسام
المسار حتمي — تعطي نفس البذرة دائما نفس الموجة — لذا حين تعثر على شكل يعجبك يظل ثابتا. احفظ الـ SVG كملف اذا احتجت الى تعديله في محرر متجهات او ضبط الالوان يدويا.
Tiny Online Tools







