اختر مولّدًا، اضبط المتحكمات، شاهد المعاينة تُعاد رسمها، ثم سلّم الأصل بالصيغة التي يحتاجها مشروعك — هذه هي دورة عمل مولّد SVG كاملةً. تسعة عشر مولّدًا تغطي الأصول التي يطلبها مصممو الويب أكثر من غيرها: أنماط خلفيات سلسة، وأشكال عضوية للأقسام الرئيسية، وفواصل موجية طبقية، وتدرّجات mesh وحبيبية، وأصول واجهة جاهزة من صور placeholder إلى مؤشرات التحميل المتحركة. كل شيء يُنتَج بواسطة محرك نقي صغير يعيش في الصفحة، وكل شيء حتمي عندما تثبّت البذرة، ولا يُرفع أي شيء إلى أي خادم.
أربع عائلات، تسعة عشر مولّدًا
الأنماط تُبلَّط بسلاسة عبر عنصر <pattern> في SVG مع patternUnits="userSpaceOnUse" — نقاط، وشبكات، وخطوط مائلة، وزجزاج، وتظليل متقاطع، وخلايا سداسية على شكل خلية النحل، وتناثر مثلثات low-poly، ونمط الدوائر المتشابكة الكلاسيكي. تحكّم في حجم البلاطة وشفافية المقدمة وسماكة الخط والدوران، ويبقى النمط سلسًا عند كل تركيبة. الأشكال تولّد مجموعة عناصر الرسوم الرئيسية: الشكل العضوي على طريقة blobmaker (منحنيات تمرّ عبر نقاط مضطربة على دائرة)، والنجوم بعدد رؤوس ونصف قطر داخلي قابلين للضبط، والأشعة الشمسية مع تفاوت طول كل شعاع، والموجات المفردة أو الطبقية المُدرَّجة بين لونين — ملسّنة بخوارزمية Catmull-Rom مع تجاوزٍ بمقدار بكسل واحد كي لا تظهر أي فجوة عند الحواف.
التدرّجات والأنسجة تمنحك صانعات المظهر العصري: تدرّج خطي أو شعاعي متعدد المحطات مع قرص زاوية، وتقريب تدرّج الـ mesh (دوائر ملونة ضبابية مركّبة عبر مرشّح sRGB — تمامًا كما تحاكي أدوات التصميم تدرّجات mesh الحقيقية، لأن عنصر <mesh> في SVG 2 غير مدعوم في أي متصفح)، والتدرّج الحبيبي — سلسلة ضجيج feTurbulence من أربع مراحل مع متحكمات وضع المزج. أصول الواجهة تُكمل المجموعة: صور placeholder بالأبعاد مع خطوط متقاطعة وتسمية مركزية، وأفاتار identicon متناظر (خوارزمية غيت هب بالشبكة المرآتية)، ومؤشرات تحميل متحركة — حلقة أو نقاط أو أشرطة — مبنية على SMIL التي ما تزال تعمل في كل المتصفحات الحالية، بل وداخل وسم <img> وخلفيات CSS.
عشوائية مُبذّرة يمكنك الوثوق بها
كل مولّد عشوائي يعمل بمولّد أرقام شبه عشوائي mulberry32 مثبَّت البذرة. ثبّت البذرة يكن المخرَج متطابقًا بايتًا بايتًا على كل الأجهزة، للأبد — وهذا بالضبط ما تريده عندما يفتح زميلك رابط المشاركة من جديد أو يعيد البناء توليدَ أصلٍ ما. اضغط عشوائي لبذرة جديدة، أو اكتب رقمًا واستكشف جوار شكلٍ يكاد يعجبك. البذرة تنتقل داخل رابط المشاركة مع بقية المتحكمات كلها في جزء الـ URL.
مساحة عمل مصمَّمة للاستكشاف
مكتبة المولّدات بصرية: تسع عشرة بطاقة مجمَّعة في العائلات الأربع، كل بطاقة تحمل صورة مصغّرة حية يرسمها المحرك نفسه الذي يرسم المعاينة — فتختار المظهر لا الاسم. البطاقات أزرار حقيقية بتنقّل بالأسهم من لوحة المفاتيح، وكل صف عائلة يمرّر أفقيًا. تحتها اثنتا عشرة لوحة ألوان منتقاة: نقرة واحدة تعيد تلوين الخلفية واللون الأساسي واللون المكمل معًا، واختيار لون مخصص يلغي تحديد اللوحة ببساطة. وللمولّدات المُبذّرة، تعرض شريط التنويعات بجوار المعاينة ست بذرات مجاورة كصور مصغّرة — انقر واحدة لتبنّيها فيتقدّم الإطار منحًا اتجاهًا لفضاء البذرات.
التصاميم التي تريد مقارنتها أو إبقاءها يمكن حفظها في معرض صغير (حتى اثني عشر تصميمًا، محفوظة في هذا المتصفح فقط) واستعادتها بنقرة واحدة. المعاينة نفسها اكتسبت شريط أدوات: أسطح قابلة للتبديل (رقعة شطرنج، فاتح، داكن)، وتكبير بالملاءمة أو 1:1 بسلّم درجات مع عجلة Ctrl، وملء الشاشة لفحص عن قرب. توسّعت إعدادات الكانفس لتشمل المقاسات الاجتماعية — Open Graph بمقاس 1200 × 630 وFull HD بمقاس 1920 × 1080 ومربع HD بمقاس 1080 × 1080 وأيقونة 256 × 256 — إضافة إلى زر يبدّل العرض والارتفاع بنقرة، وزر فاجئني الذي يُجري قرعة المولّد واللوحة والبذرة معًا.
صدّر بالصيغة التي تحتاجها فعلًا
لوحة الشيفرة تعرض المستند الحيّ بتنسيق مقروء أو مضغوط بالإعدادات الآمنة لـ SVGO v4: أرقام مقرَّبة مع حذف الأصفار البادئة، وألوان hex مختصرة، ولا إصدار لخصائص العرض الافتراضية أصلًا، مع الاحتفاظ دائمًا بـ viewBox وبيانات الوصولية. انسخ أية صيغة كترميز نظيف. وإلى جانب SVG الخام، تمنحك مصفوفة التصدير Data URI بترميز URL الأدنى (أصغر من base64 وصديقة لـ gzip)، وbase64 للسياقات القديمة، وقصة CSS جاهزة للصق مع background-size المناسب للأنماط المبلَّطة أو التغطية الكاملة، ومكوّن React JSX بمطابقة SVGR الدقيقة — يصبح stroke-width هو strokeWidth، وclass هو className، وسلاسل style تصبح كائنات style.
تصدير PNG يجسّد عند 1× أو 2× أو 3× عبر واجهة canvas، كليًا داخل متصفحك، بأبعاد صريحة كي يضبط Firefox وSafari حجم الصورة النقطية. مفتاح الخلفية الشفافة يصدّر ملفات PNG بشفافية حقيقية — ولأن المحرك لا يُصدر <foreignObject> أبدًا، لا يُلوَّث canvas أبدًا.
تفاصيل تهمّ المصممين
تجلس المعاينة على سطح رقعة شطرنج أو فاتح أو داكن قابل للتبديل لفحص الشفافية والتباين في الوضع الداكن قبل التسليم. مفتاح التكيّف يحذف width/height الثابتة ويُبقي viewBox، فينتج تضمينًا سائلًا يتمدد مع حاويته. حقل النص البديل يصبح عنصر <title> حقيقيًا داخل المستند، والجذر يحمل role="img" — الأصول المولَّدة تصل إلى ترميزك وهي أصلًا مهيّأة للوصولية. الإعدادات المسبقة تغطي 3:2 و16:9 و1:1 و4:3 و9:16، مع وضع مخصص لأبعاد دقيقة من 16 إلى 4000 بكسل.
تُحفظ إعداداتك في localStorage بين الزيارات، وتحمل روابط المشاركة الحالة الكاملة في جزء الـ URL (الذي لا ترسله المتصفحات إلى الخوادم أبدًا)، وMod/Ctrl + Enter يعيد التوليد من أي مكان في الأداة.
أسئلة شائعة
هل هذا محرّر «رسم بالفأرة» آخر؟ لا — إنه مولّد معامِلي. تصف الأصل بمتحكمات وبذرة؛ ويُصدر المحرك SVG نظيفًا أدنى. وهو يتكامل طبيعيًا مع التحرير اليدوي: انسخ الترميز وواصل في محرّرك.
لماذا نثق بالمخرَج المضغوط؟ يعكس المُحسِّن قرارات الإعداد الافتراضي لـ SVGO v4 مطبَّقةً وقت التوليد: أرقام مدمجة (0.5 لا 0.500)، وألوان مختصرة، ولا خصائص زائدة، ولا يحذف viewBox أو <title> أبدًا — وهما التحسينان اللذان عطّلهما SVGO نفسه افتراضيًا لأنهما يضرّان القابلية للتحجيم والوصولية.
أيمكنني تحرير الـ SVG المولَّد؟ نعم — انسخ الصيغة المنسّقة إلى أي محرّر. المخرَج مقروء عمدًا: إزاحة بمسافتين، وعنصر واحد في كل سطر، ومعرّفات مشتقة من البذرة.
هل تعمل مؤشرات التحميل المتحركة كملفات؟ نعم. تعمل حركة SMIL من ملفات .svg محمّلة عبر <img> وbackground-image في CSS والتضمين المباشر. أما تصدير PNG فيلتقط إطارًا واحدًا بطبيعته.
ما الحدود؟ أبعاد من 16 إلى 4000 بكسل، وحتى 48 شعاعًا، و24 مستوى تعقيد، و8 طبقات موجات، و6 محطات تدرّج. المحرك نفسه يعمل في ميكروثوانٍ — بلا انتظار.
ما الفرق بين عشوائي والتنويعات وفاجئني؟ عشوائي يسحب بذرة جديدة بالمولّد واللوحة الحاليين. شريط التنويعات يعرض ست بذرات مجاورة مسمّاة تتبنّاها عمدًا. أما فاجئني فيُجري قرعة المولّد واللوحة والبذرة معًا — نقطة بداية جديدة لا مجرّد دفعة صغيرة.
أين تعيش التصاميم المحفوظة؟ في localStorage متصفحك، بحد أقصى اثنا عشر، الأحدث أولًا. لا تغادر الجهاز أبدًا ولا تدخل روابط المشاركة أبدًا — استعادة تصميم تُعيد تطبيق حالة متحكماته كاملة على الأداة.