مولّد الموجات والكتل بـ CSS و SVG

لماذا لا توجد انكسارات في هذه المنحنيات

معظم المولّدات من هذا النوع تضع نقاط تحكّم بيزييه بالتقريب — عند ثلث المسافة إلى النقطة التالية عادةً — فينتج انكسار صغير عند كل نقطة أخذ عيّنة. لا تلاحظه في صورة مصغّرة، ولا يمكن أن يفوتك حين يصبح الشكل بعرض ثلاثة أمتار خلف صورة رئيسية. هذا المولّد يشتقّ كل نقطة تحكّم من مماس منحنى Catmull-Rom، فيحسب جزآ المنحنى الملتقيان عند نقطة ما الاتجاه *نفسه* من الجارين نفسيهما. النعومة هنا ليست إعدادًا، ولا شيئًا يُتحقق منه لاحقًا: إنها نتيجة الحساب، ومجموعة الاختبارات تؤكّد أنها قائمة عند كل وصلة في آلاف الأشكال المولَّدة.

ما تنسخه من CSS هو الشكل الذي رأيته

أمران عادةً ما ينكسران بين معاينة المولّد وبين الـ CSS الذي يسلّمه لك. الأول هو علامة المربع في اللون الست عشري: داخل عنوان بيانات، فإن `#` غير المرمَّز ينهي الرابط، فيقرأ المتصفح ما بعده بوصفه شذرة، ولا تُرسم الخلفية ببساطة — بلا خطأ في الطرفية ولا أثر في لوحة الشبكة. هنا يُرمَّز كل لون بالنسبة المئوية قبل أن يصل إلى ورقة الأنماط. أما الثاني فيخصّ كتل border-radius وحدها: إذا تجاوز مجموع نصفَي القطر الملتقيين على حافة واحدة 100%، فإن المتصفح يصغّر *كل* الزوايا للتعويض، فيرسم شكلًا أكثر تسطّحًا من الذي اخترته. القيم التي تخرجها هذه الأداة مولَّدة داخل ذلك الحد، فيتركها المتصفح كما هي.

البايتات، معروضة بدل أن تكون مخفية

الشكل الملصوق في ورقة أنماط هو وزن في كل تحميل للصفحة، لذا يقع عدّاد البايتات أسفل صندوق الناتج ويتحدّث أثناء سحبك للمؤشرات. تُقرَّب الإحداثيات إلى منزلتين عشريتين — جزء من مئة من البكسل على لوحة بعرض 1440 وحدة، أي أدنى بكثير مما تستطيع أي شاشة إظهاره — وهذا يحذف عادةً ثلث طول المسار أو أكثر دون أي تغيّر مرئي. وإن بدا الرقم كبيرًا فإن تقليل النقاط هو الحل في الغالب: وهو المؤشر الوحيد الذي يغيّر الحجم تغييرًا ذا بال.

بلا حساب، بلا رفع، بلا علامة مائية

لا يوجد خادم لإرسال أي شيء إليه. المولّد بضعة كيلوبايتات من جافاسكريبت تعمل داخل هذه الصفحة، وإعداداتك محفوظة في التخزين المحلي لهذا المتصفح، والأشكال التي تصنعها ملكك دون إسناد مطلوب. وبمجرد تحميل الصفحة تعمل دون اتصال، ما يعني أيضًا أنها تعمل خلف وكيل شركة يحجب نصف الإنترنت.