مولّد خلفيات متدرّجة متحركة — 11 نمط WebGL، معاينة مباشرة
استعرض أحد عشر خلفية متدرّجة وتجريدية متحركة تُرسم مباشرةً باستخدام WebGL: كتل سائلة، وضوء محيط، وتدرّجات متدرّجة، ونقاط ضبابية، وشبكات، ومكعبات، وموجات، وفسيفساء من المثلثات. بدّل النمط وست لوحات ألوان مدمجة فورًا، من دون رفع ملفات ومن دون خادم — هذه أداة معاينة مباشرة، لا مُصدِّر CSS أو صور.
ما يوفره مولّد الخلفيات هذا فعليًا
أحد عشر نمط خلفية مدعومًا بالـ shader
AbstractShape وAestheticFluid وAmbientLight وBigBlob وBlurDot وBlurGradient وGridArray وRandomCubes وStepGradient وTrianglesMosaic وWavyWaves — جميعها تتحرّك باستمرار على لوحة رسم بارتفاع 600 بكسل.
تبديل النمط ولوحة الألوان فورًا
قائمتان منسدلتان تتحكّمان في كل شيء: واحدة لنمط الخلفية وأخرى للوحة الألوان. أي تغيير يعيد بناء الحركة على الفور، من دون زر توليد ومن دون إعادة تحميل الصفحة.
ست لوحات ألوان مدمجة
Monochrome وRed وGreen وBlue وYellow وPurple، كل واحدة قائمة ثابتة من ستة ألوان سداسية عشرية. الأنماط ذات الأربعة ألوان تستخدم أول أربع قيم فقط، والأنماط ذات الستة ألوان تستخدم الست جميعًا؛ والألوان الزائدة تُقتطع.
يعمل محليًا على وحدة معالجة الرسوميات لديك
تُرسم كل إطار عبر WebGL في المتصفح. لا يُرفع أي شيء، ولا يُرسل أي طلب إلى خادم، وتستمر الحركة من دون حركة شبكة.
ساحة معاينة، لا أداة تصدير
لا يوجد إخراج CSS، ولا تنزيل PNG أو SVG، ولا زر عشوائي، ولا مفتاح للضوضاء أو الملمس، ولا إعدادات محفوظة. كما أن الزاوية ومواضع الألوان والتراكب والسرعة غير متاحة.
أسئلة شائعة حول مولّد الخلفيات
ما أنواع التدرّج المدعومة — خطي أو شعاعي أو مخروطي أو mesh؟
لا شيء من أنواع CSS، بالمعنى الدقيق. ترسم هذه الصفحة أحد عشر خلفية بـ shader WebGL: AbstractShape وAestheticFluid وAmbientLight وBigBlob وBlurDot وBlurGradient وGridArray وRandomCubes وStepGradient وTrianglesMosaic وWavyWaves. بعضها يبدو كتدرّجات سائلة بأسلوب mesh، لكنها حركات على لوحة رسم وليست تدرّجات background-image.
ما الذي يمكنني ضبطه؟
شيئان فقط: القائمة المنسدلة للنمط والقائمة المنسدلة للوحة الألوان. لا توجد عناصر تحكّم للزاوية أو موضع توقف اللون أو الطبقات أو منتقي الألوان أو السرعة أو الإيقاف المؤقت أو التكرار. لوحات الألوان ستّ عينات ثابتة، وكل نمط يستخدم منها أربع قيم أو ستًا.
هل يمكنني تصدير الخلفية كصورة؟
لا. لا يوجد في الصفحة أي toDataURL أو toBlob أو منطق تنزيل، لذا لا يمكن إلا عرض لوحة الرسم — لا يمكن حفظها بصيغة PNG أو JPEG أو SVG.
هل ينتج كود CSS يمكنني نسخه؟
لا. لا يوجد إخراج CSS ولا زر نسخ. هذه الخلفيات لوحات رسم WebGL وليست تدرّجات background-image، لذلك لا يمكن اختصارها إلى مقتطف CSS؛ تحتاج لذلك إلى أداة منفصلة لتدرّجات CSS.
هل توجد إعدادات مسبقة أو توليد عشوائي أو ضوضاء أو إعدادات محفوظة؟
الإعدادات المسبقة الوحيدة هي لوحات الألوان الست المدمجة. لا يوجد زر عشوائي (البذرة ثابتة عند 1000)، ولا خيار ضوضاء أو ملمس، ولا حفظ في التخزين المحلي — إعادة تحميل الصفحة تعود بك إلى AbstractShape مع لوحة الألوان الأولى.
ماذا يحدث عند تبديل النمط أو لوحة الألوان؟
كل تبديل ينشئ نسخة خلفية جديدة ويضيف لوحة رسم أخرى إلى الحاوية نفسها؛ ولا تُدمَّر النسخة القديمة أبدًا، لذا تتراكم عدة لوحات رسم بالمعرّف نفسه، والذي تراه هو الأحدث. أعِد تحميل الصفحة إذا بدّلت كثيرًا.
هل كل شيء محلي؟
نعم. يتم الرسم بالكامل في متصفحك وعلى وحدة معالجة الرسوميات لديك عبر WebGL، من دون رفع ومن دون طلب إلى خادم. العيب هو أن المتصفح غير الداعم لـ WebGL لا يحصل على رسم بديل.
