مولد تدرج محبب

تدرجات محببة عصرية دون فوتوشوب

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

كيف تُطبق الحبيبات

داخليا، تركب الاداة طبقتين داخل SVG واحد. الطبقة الاساسية هي <rect> معبأ بتدرجك — خطي او شعاعي مع 2 الى 5 محطات. فوقها <rect> اخر تكون تعبئته نسيج ضوضاء احادي اللون مُنتَج بواسطة الفلتر SVG <feTurbulence type="fractalNoise">. تُرسم طبقة الضوضاء بعتامة قابلة للتحكم، وهي مصدر الاحساس "الغباري" الناعم في النتيجة النهائية.

بما ان كل شيء يمر عبر فلاتر SVG، يبقى نمط الحبيبات حادا وغير متكرر في اي حجم — على عكس ملف PNG مُكرر، لن ترى اي حدود واضحة عندما تتمدد الخلفية عبر منطقة بطولية كبيرة.

عناصر التحكم

• النوع — خطي (بزاوية قابلة للتعديل) او شعاعي.
• محطات اللون — من 2 الى 5 الوان مع منزلقات موقع للتحكم الدقيق في الانتقال.
• شدة الحبيبات — عتامة طبقة الضوضاء. القيمة 0 تعطل الحبيبات؛ كلما ارتفعت القيمة زاد الاحساس بالنسيج.
• مقياس الحبيبات — baseFrequency للاضطراب. مقياس منخفض يعطي حبيبات خشنة وملموسة؛ مرتفع يعطي ضوضاء ناعمة شبيهة بالفيلم.
• الاوكتافات — عدد طبقات الضوضاء المتراكمة. اوكتافات اكثر = تفاصيل اكثر.
• البذرة — عدد صحيح لقابلية التكرار. نفس البذرة = نفس نمط الحبيبات.

اين تستخدمه

• خلفيات بطولية بشعور ملموس بدلا من معقم
• شاشات بدء التطبيقات وبطاقات بنمط اجهزة iOS
• لافتات اطلاق بنمط Product Hunt
• اغلفة موسيقى وبودكاست
• بطاقات لوحات تحكم بعمق خفي

مخرج SVG دائما اكثر حدة من JPG بنفس الحجم، وفلاتره مسرعة بواسطة GPU في كل متصفح حديث. انسخ الكود والصقه في <div> ثم وسّعه حيث شئت — تبقى الحبيبات وفية على كل الاجهزة ومستويات التكبير.