مولّد أشكال البلوب SVG

أنشئ أشكال بلوب SVG عضوية وعشوائية انطلاقًا من إعدادات التعقيد والتباين، وأعد توليد التنويعات باستخدام بذرة، وعاينها مباشرة، وانسخ كود SVG أو CSS clip-path.

جارٍ تحميل الأداة…

مولّد أشكال البلوب SVG — حدّد عدد النقاط في الشكل (التعقيد) ومدى عدم انتظام حوافه (التباين)، ثم اضغط على إعادة التوليد للحصول على تنويعة عشوائية جديدة من البذرة التالية. تعرض المعاينة المباشرة البلوب أثناء ضبطه، وتحصل على كل من كود SVG الكامل وقاعدة CSS clip-path جاهزة للصق في ورقة الأنماط. يُحسب كل شيء في متصفحك باستخدام مولّد أرقام عشوائية قائم على بذرة؛ ولا تغادر أي أشكال أو ألوان أو إعدادات جهازك أبدًا.

ما هي مولّد أشكال البلوب SVG؟

مولّد أشكال البلوب SVG أداة مجانية تعمل داخل المتصفح موجّهة للمصممين ومطوّري الواجهات الأمامية الذين يريدون أشكال بلوب ناعمة وعضوية للخلفيات وأقسام الـ hero والصور الرمزية أو اللمسات الزخرفية دون رسمها يدويًا. تتحكم في قيمتين: التعقيد (عدد نقاط الارتساء حول الشكل) والتباين (مدى ابتعاد كل نقطة عن دائرة مثالية). تتيح لك بذرة محفوظة في الحالة، تزيد بضغطة زر إعادة التوليد، التنقل بين تنويعات لا حصر لها مع إبقاء التعقيد والتباين ثابتين. يُرسم الناتج كمسار بيزييه واحد مغلق وسلس، فتستطيع نسخ كود SVG نظيف، أو الحصول على قاعدة CSS clip-path() لإخفاء أي عنصر، أو تنزيل ملف .svg جاهز للاستخدام. استخدمها لإنشاء زخارف متوافقة مع هوية علامتك بسرعة أو لتتعلّم كيف تُبنى مسارات البلوب من نقاط حول دائرة.

كيفية استخدام مولّد أشكال البلوب SVG

  1. افتح الإعدادات وحدّد التعقيد (عدد النقاط، 3-16) للشكل.
  2. اضبط التباين (0-100) للتحكم في مدى عدم انتظام الحواف وتموّجها.
  3. اختر لون التعبئة من خلال رقاقة اللون أو بكتابة قيمة HEX.
  4. انقر على إعادة التوليد للحصول على تنويعة عشوائية جديدة من البذرة التالية حتى يعجبك الشكل.
  5. انسخ كود SVG أو قاعدة CSS clip-path، أو انقر على تنزيل لحفظ ملف .svg.

أمثلة

بلوب خلفية ناعم

اضبط التعقيد على 6 والتباين على نحو 40 للحصول على بلوب ناعم ومستدير، ثم أعد التوليد عدة مرات حتى تجد شكلًا مناسبًا لخلفية hero أو بطاقة.

شكل عضوي مدبّب

ارفع التعقيد إلى 12 والتباين إلى 80 للحصول على شكل ظلّي أكثر تسنينًا وحيوية، مفيد للشارات أو الرسوم التوضيحية المرحة.

قناع CSS clip-path

انسخ قاعدة clip-path: path('...') المُولّدة وطبّقها على صورة أو div ليُقصّ العنصر وفق محيط البلوب.

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

ماذا يتحكّم به كل من التعقيد والتباين؟
التعقيد هو عدد نقاط الارتساء الموزّعة بانتظام حول دائرة (من 3 إلى 16) — كلما زادت النقاط أصبح المحيط أكثر تفصيلًا. التباين هو مدى دفع كل نقطة عشوائيًا إلى الداخل أو الخارج عن نصف القطر الأساسي (من 0 إلى 100)، فالقيمة 0 قريبة من دائرة بسيطة و100 شديدة عدم الانتظام.
كيف يعمل زر إعادة التوليد؟
يُبنى كل بلوب من بذرة رقمية إضافةً إلى التعقيد والتباين اللذين تحدّدهما. تزيد إعادة التوليد البذرة بمقدار واحد وتعيد حساب الشكل، فتحصل على تنويعة عشوائية جديدة في كل نقرة بينما يبقى التعقيد والتباين واللون كما هي.
ما الفرق بين ناتج SVG وناتج clip-path؟
ناتج SVG هو ملف <svg> كامل ومستقل يمكنك تضمينه أو تنزيله. أما ناتج clip-path فهو قاعدة CSS واحدة تستخدم path() يمكنك تطبيقها على أي عنصر HTML لقصّه وفق محيط البلوب نفسه.
هل يمكنني تغيير اللون وتنزيل الملف؟
نعم. اضبط لون التعبئة من خلال رقاقة اللون أو قيمة HEX؛ تستخدمه المعاينة وSVG والتنزيل جميعًا. انقر على تنزيل لحفظ ملف blob.svg المُولّد بالكامل داخل متصفحك.
هل تُرسَل أشكالي أو إعداداتي إلى خادم؟
لا. يُولّد البلوب بدالة أرقام عشوائية محلية قائمة على بذرة، وتُبنى كل سلاسل SVG وclip-path داخل متصفحك. لا يُرفع أي شيء، لذا تعمل الأداة دون اتصال ويبقى عملك خاصًا.

أدوات ذات صلة

تحويل الكود إلى صورة

حوّل مقتطف كود إلى صورة بإبراز لتركيب الجملة داخل متصفحك، مع أكثر من 20 لغة وسمات وخلفيات مخصّصة وأرقام أسطر وتصدير PNG أو SVG.

أداة فحص تباين الألوان

افحص تباين WCAG 2.1 ودرجة APCA Lc بين لون النص ولون الخلفية، وشاهد شارات AA وAAA و3:1، وطبّق أقرب لون ناجح.

خالط الألوان

امزج لونين بصيغة HEX بنسبة تختارها في فضاء RGB أو Lab، واقرأ اللون الوسطي الناتج كعينة وقيمة HEX قابلة للنسخ.

مولّد درجات الألوان

حوّل لونًا أساسيًا واحدًا بصيغة HEX إلى مقياس OKLCH أو HSL أو RGB بخطوات قابلة للتعديل، وتلميحات تباين WCAG لكل خطوة، وتصدير إلى CSS وTailwind وJSON.