Softonic

مولد نقوش نقاطية بصيغة SVG

خطوة 1 / 3
التالي

تُعد أنماط النقاط الركيزة الأساسية والمتواضعة في خلفيات الويب الحديثة؛ فكّر في الشبكة النقطية الدقيقة خلف صفحة Notion، أو النقاط المتقطعة في قسم البطل، أو النسيج الشبيه بالحبوب على البطاقة. يقوم هذا المولّد بإنشاء ملف SVG واحد باستخدام تعريف داخلي من نوع <pattern>، مما يجعل الملف صغير الحجم (عادةً أقل من 500 بايت) ويتناسق تمامًا مع أي حجم. يمكنك التحكم في القماش، ومسافة بين النقاط، ونصف قطرها، ولونها، والخلفية.

كيفية إنشاء نمط نقاطي

  1. 1

    قم بتعيين اللوحة

    العرض والارتفاع بوحدة البكسل؛ بالنسبة للخلفيات في لغة CSS، يمكن أن يظل هذا القيمة صغيرًا (مثلاً 800×600) ويمكن توزيعه على شكل بلاطات.

  2. 2

    اختر المسافة

    المسافة بين مراكز النقاط المجاورة: تتسم القيمة من 20 إلى 40 بكسل بوضوح واضح، بينما تبدو القيمة 10 بكسل غير واضحة أو مليئة بالضوضاء.

  3. 3

    حدد نصف قطر النقطة

    من 1 إلى 3 بيكسل للحصول على نسيج خفيف، ومن 4 إلى 8 بيكسل لإضافة نقاط بولكا بشكل متعمد.

  4. 4

    اختر الألوان

    ملء النقطة (في الطبقة الأمامية) وخلفية القماش؛ قم بتعيين الخلفية إلى `transparent` للحصول على نمط تغطية حقيقي.

  5. 5

    قم بنسخ ملف SVG.

    قم بلصقه في ملف HTML الخاص بك، أو استخدمه باسم `background-image: url("data:image/svg+xml,...")` في لغة CSS.

كيف يتم تعريف النمط

يُخرِج المولد عنصرًا من نوع <pattern> داخل عنصر <defs>، ويملأ الشاشة الكاملة من نوع <rect> باستخدام عنصر fill="url(#dots)".

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

يُقيّد patternUnits="userSpaceOnUse" حجم الشريحة إلى البكسلات، وبالتالي فإن تكبير ملف SVG الأصلي لا يؤدي إلى تشويه النقاط.

دليل موجز لضبط الأنماط

الرؤية المسافة بين النقاط نصف القطر التباين
ويسبر (نادر الظهور) 30–40 1–1.5 درجة شفافية تتراوح بين 5% و10%
خلفية خفيفة 25–30 2 درجة شفافية تتراوح بين 15% و20%
نمط نقطة صادق 20 2–3 بألوان كاملة
نقاط بولكا مُصممة متعمدة 40–60 8–15 بألوان كاملة
تأثير نصف اللون 10 1 ملء تدريجي

استخدامه كخلفية لـ CSS

قم بترميز ملف SVG كعنوان URL للبيانات وطبّقه على أي عنصر:

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

تجميع ملف SVG باستخدام CSS أسرع من إرسال ملف PNG؛ حيث يقوم المتصفح بتحويله إلى صورة راسترية بالحجم النهائي للعرض، مما يضمن وضوح الصورة على جميع أحجام العرض (1x، 2x، 3x).

عندما تؤثر النقاط سلبًا على قابلية القراءة

يمكن لنمط النقاط الموجود مباشرة خلف النص الرئيسي أن يخلق تأثيرًا بصريًا مبهرًا على النص الدقيق. وإذا كان لا بد من وضع نص فوقه، فيمكنك إما:

  • زد المسافة إلى أكثر من 40 بكسل بحيث تقع النقاط بين الخطوط، أو
  • اخفض شفافية النمط إلى أقل من 10%، أو
  • ضع النص داخل بطاقة صلبة فوق النمط.

الأسئلة الشائعة

قم بتعيين لون الخلفية إلى transparent، بحيث يكون اللون الوحيد هو النقاط نفسها. ثم ضع ملف SVG فوق أي لون أو صورة ترغب في عرضها فوقه.

ليس هذا المولد مناسبًا؛ فهو يُنتج شبكة مربعة. ولتصميم على شكل سداسي، تحتاج إلى قطعة نمطية يكون ارتفاعها ضعف عرضها بقيمة √3، مع وجود دائرةين في كل قطعة متباعدتين بمقدار نصف الارتفاع. يُنصح باستخدام أداة بناء المسارات في تنسيق SVG أو مولد متخصص للهكسادرونات.

ملف SVG نفسه يتمتع بوضوح تام بغض النظر عن الحجم، ولكن عند تحويله إلى صورة راسترية بدقة أقل من دقة خلية النمط، قد يحدث ظاهرة التهجئة (aliasing). لذا يُنصح بتصدير الملف بحجم يعادل ضعف أو ثلاثة أضعاف حجم العرض المخطط له.

استبدل القيمة fill="#hex" في الدائرة بـ fill="url(#gradient-id)"، ثم أضف تعريفًا لـ <linearGradient> داخل نفس القيمة <defs>. وسيتم عرض كل نقطة باستخدام هذا التدرج اللوني؛ وقد يكون ذلك مكلفًا إذا كان للقماش آلاف النقاط.

يرسل المحرر العادي حجم اللوحة والمسافة ونصف القطر والألوان إلى الخادم لعرض المعاينة. وفي التدفق الإرشادي تظهر هذه الإعدادات أيضًا في رابط الصفحة. لا تدخل معلومات حساسة؛ فالأداة لا تحفظ مشروع نمط قابلًا لإعادة الاستخدام.

أدوات ذات صلة

مولد الورق المسطر

أنشئ ورقًا مسطرًا قابلًا للطباعة مجانًا. اختر تسطيرًا جامعيًا أو واسعًا أو ضيقًا، واضبط تباعد الأسطر بالمليمتر وحجم الصفحة وخط هامش، ثم اطبع أو نزّل ملف SVG.

منتقي ألوان Material Design

تصفح لوحة ألوان Material Design وانسخ أي درجة (من 50 إلى A700) بصيغة HEX أو RGB أو HSL بنقرة واحدة.

مولّد ورق الرسم البياني

أنشئ ورق رسم بياني قابلاً للطباعة عبر الإنترنت: اختر شبكة مربّعات أو نقاطاً، واضبط التباعد بالمليمتر، وحدّد A4 أو Letter ولون خطوط مخصّصاً، ثم اطبع أو نزّل ملف SVG واضحاً.

صانع الأعلام

صمّم علماً مخصصاً بسيطاً بنسبة 3:2 في متصفحك باستخدام ستة تخطيطات وألوان ونص ورمز. نزّل SVG أو PNG، أو افتح مربع حوار الطباعة في المتصفح.

عكس ألوان الصورة

قم بعكس كل قناة من قنوات RGB في الصورة لإنتاج صورة سلبية، وهي مفيدة للتعديلات الإبداعية وعرض نسخ الأفلام المصورة.

منشئ قوائم التصنيف إلى مستويات

أنشئ قائمة تصنيف خاصة من نصوص وصور محلية، وخصص المستويات ورتب بالسحب أو لوحة المفاتيح، ثم صدّر JSON أو PNG أو SVG.

الأداة متاحة بلغات أخرى