مولّد أنماط SVG
أنشئ نمط خلفية SVG قابلاً للتكرار بشكل متجانب باستخدام شكل مختار وألوان للمقدمة والخلفية ومقياس قابل للضبط، ثم انسخ SVG أو CSS ونزّل الملف.
مولّد أنماط SVG — اختر شكل نمط مثل النقاط أو الشبكة أو الخطوط أو الخطوط القُطرية أو رقعة الشطرنج، وحدّد ألوان المقدمة والخلفية، واضبط مقياس البلاطة وسماكة الخطوط. تعرض معاينة مباشرة النمط مكرراً عبر مربع، ويُعرض ترميز SVG الجاهز للاستخدام أو قاعدة background في CSS لنسخها بنقرة واحدة أو تنزيلها. كل شيء يعمل بالكامل داخل متصفحك؛ ولا تُرسَل أي ألوان أو شيفرة أو ملفات إلى أي خادم على الإطلاق.
ما هي مولّد أنماط SVG؟
مولّد أنماط SVG أداة مجانية تعمل داخل المتصفح لمصممي الويب ومطوري الواجهات الأمامية الذين يحتاجون إلى خلفية خفيفة وقابلة للتكرار دون فتح محرر رسوميات. تختار نمطاً من قائمة منسدلة (نقاط، شبكة، خطوط، قُطري، رقعة شطرنج)، وتحدّد لون مقدمة للأشكال ولون خلفية للبلاطة، وتستخدم حقلي المقياس والسماكة الرقميين للتحكم في حجم البلاطة وسماكة الخط. الناتج بلاطة واحدة مرسومة بصيغة SVG حادة، مصممة للتكرار بسلاسة، فتبقى أحجام الملفات صغيرة جداً ويتدرج النمط دون أن يصبح ضبابياً. استخدم مفتاح التبديل Format لتبديل الناتج القابل للنسخ بين ترميز SVG الخام وقاعدة background-image في CSS، ثم انسخه أو نزّل ملف .svg لاستخدامه في المواقع والبطاقات وأقسام الواجهة الرئيسية ونماذج الواجهة الأولية.
كيفية استخدام مولّد أنماط SVG
- اختر نمطاً من القائمة المنسدلة: نقاط، شبكة، خطوط، قُطري، أو رقعة شطرنج.
- اكتب أو اختر لون مقدمة للأشكال ولون خلفية للبلاطة.
- اضبط حقلي المقياس (حجم البلاطة بالبكسل) والسماكة (نصف قطر النقطة أو سماكة الخط) الرقميين.
- افتح الإعدادات واستخدم مفتاح التبديل Format لتبديل الناتج بين SVG و CSS.
- راقب المعاينة المباشرة وهي تكرّر النمط، ثم انسخ SVG أو CSS، أو انقر على تنزيل لحفظ ملف .svg.
أمثلة
خلفية منقّطة
اختر النقاط، واضبط مقياساً صغيراً مثل 24px وسماكة 3، مع لون نقطة فاتح فوق خلفية بلاطة داكنة للحصول على نسيج منقّط متساوي التباعد.
شبكة مخطط هندسي
اختر الشبكة بمقياس 40px وسماكة رفيعة 1px، ولون خط خافت فوق خلفية زرقاء داكنة، للحصول على خلفية صفحة بأسلوب المخطط الهندسي.
خطوط CSS قُطرية
اختر القُطري، وبدّل مفتاح Format إلى CSS، وانسخ قاعدة background-image المُنشأة مع background-repeat: repeat مباشرة إلى ورقة الأنماط لديك.
الأسئلة الشائعة
- ما الأنماط التي يمكنني إنشاؤها؟
- خمسة أنماط قابلة للتكرار: نقاط، شبكة، خطوط، خطوط قُطرية، ورقعة شطرنج. يُرسم كل منها كبلاطة SVG صغيرة واحدة تتكرر بسلاسة، فيبقى حاداً عند أي حجم ويُبقي الملف صغيراً جداً.
- ماذا يتحكم المقياس والسماكة؟
- المقياس هو حجم البلاطة الواحدة بالبكسل، وهو يحدّد مدى تباعد الأشكال المتكررة. السماكة هي نصف قطر النقطة أو سماكة الخط داخل البلاطة. تُحدَّد السماكة تلقائياً بحدّ أقصى نسبةً إلى المقياس بحيث لا يملأ النمط البلاطة أبداً بشكل مفرط.
- ما الفرق بين ناتج SVG وناتج CSS؟
- يمنحك SVG الترميز الخام لملف .svg مستقل أو للاستخدام المضمّن. ويمنحك CSS قاعدة background-image تستخدم data URI إضافةً إلى background-repeat: repeat، جاهزة للصق في ورقة الأنماط. استخدم مفتاح Format في الإعدادات للتبديل بينهما.
- هل يمكنني اختيار الألوان بصرياً بدلاً من كتابة HEX؟
- نعم. انقر على رقاقة اللون بجوار حقل المقدمة أو الخلفية لفتح منتقي الألوان الأصلي في متصفحك، أو اكتب قيمة HEX مثل #4f86f7 مباشرة. تتحدّث المعاينة والناتج أثناء تغييرك لها.
- هل تُرفع ألواني أو ملفاتي إلى أي مكان؟
- لا. يُبنى النمط بالكامل داخل متصفحك كسلسلة نصية SVG، ويُنشأ التنزيل محلياً ككائن Blob. ولا تُرسَل أي ألوان أو شيفرة أو ملفات إلى أي خادم على الإطلاق، لذا يعمل دون اتصال ويحافظ على خصوصية عملك.
أدوات ذات صلة
تحويل الكود إلى صورة
حوّل مقتطف كود إلى صورة بإبراز لتركيب الجملة داخل متصفحك، مع أكثر من 20 لغة وسمات وخلفيات مخصّصة وأرقام أسطر وتصدير PNG أو SVG.
أداة فحص تباين الألوان
افحص تباين WCAG 2.1 ودرجة APCA Lc بين لون النص ولون الخلفية، وشاهد شارات AA وAAA و3:1، وطبّق أقرب لون ناجح.
خالط الألوان
امزج لونين بصيغة HEX بنسبة تختارها في فضاء RGB أو Lab، واقرأ اللون الوسطي الناتج كعينة وقيمة HEX قابلة للنسخ.
مولّد درجات الألوان
حوّل لونًا أساسيًا واحدًا بصيغة HEX إلى مقياس OKLCH أو HSL أو RGB بخطوات قابلة للتعديل، وتلميحات تباين WCAG لكل خطوة، وتصدير إلى CSS وTailwind وJSON.