مولد تدرج شبكي (mesh)

تدرجات شبكية مُصاغة بـ SVG نقي

اصبحت التدرجات الشبكية — خلفيات ملونة متعددة النقاط تبدو كطلاء بالفرشاة — مميزة بفضل صفحات التسويق لشركات مثل Stripe و Linear. يُنتج هذا المولد التأثير نفسه كملف SVG صغير مستقل، دون الحاجة الى صورة او WebGL او canvas.

التقنية

بدلا من استخدام تدرج شبكي اصلي (الذي لا يدعمه CSS و SVG بالكامل بعد)، تكدس الاداة عدة تدرجات شعاعية ناعمة. يتلاشى كل تدرج من لون مختار عند نقطة (x, y) محددة نحو الشفافية. فوق خلفية صلبة، تنزف هذه البرك الشعاعية في بعضها لتحاكي شبكة مرسومة يدويا.

النهج محمول جدا: يستخدم الـ SVG الناتج فقط عناصر <radialGradient> و <rect> قياسية — بلا فلاتر او سكربتات — فيعمل في كل مكان يدعم SVG.

التحكم

• النقاط — من 2 الى 6 بقع لون. لكل نقطة لونها ومنزلقات X و Y.
• الليونة — نصف قطر كل تدرج شعاعي. ليونة منخفضة = الوان مضغوطة وقوية؛ ليونة عالية = باستيل خفيف.
• الخلفية — لون صلب خلف البقع.
• اعادة التشغيل — يعشّي المواقع للحصول على الهام فوري مع الابقاء على لوحتك.

الاستخدامات

• خلفيات ابطال لـ SaaS الحديثة
• شاشات بدء التطبيقات
• اغلفة البودكاست / الموسيقى
• نماذج المنتجات ولافتات التسويق
• خلفيات المدونات والوثائق

يتمدد الـ SVG الى اي حاوية بفضل preserveAspectRatio="none"، فيصلح ملف واحد كخلفية كاملة العرض في اي breakpoint. ادمج مع مولدي التدرج المحبب او نسيج الضوضاء لمظهر ملموس وعصري.