مولّد أشكال SVG العضوية

أنشئ أشكال SVG عضوية عشوائية ناعمة — انسخ SVG أو clip-path في CSS.

آخر تحديث 17 مايو 2026

النقاط6العشوائية50

تدرج

ترميز SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <path d="M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z" fill="#7fb2ff"/>
</svg>

CSS clip-path

clip-path: path('M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z');

ما هو مولّد أشكال SVG العضوية (blob)؟

ينشئ مولّد أشكال SVG العضوية أشكالًا عضوية مغلقة عبر أخذ عينات من نقاط حول دائرة وربطها بمنحنيات Bézier ناعمة. النتيجة صورة ظلية ناعمة ومائعة — النوع من الأشكال الذي تراه خلف hero تسويقي، أو حول صورة الملف الشخصي، أو كشكل ملوّن في خلفية صفحة هبوط.

تعيش الأشكال العضوية في النقطة المثالية بين الهندسة والعشوائية. اضبط عدد النقاط للحصول على أشكال شبيهة بحبة الفاصولياء (3-4)، أو الحصاة (5-6)، أو الأشكال الفوضوية (10+). حرّك شريط العشوائية للانتقال من شبه-دائري إلى مشوّه بشكل دراماتيكي. اضغط على الزر للحصول على بذرة جديدة في أي وقت.

كل شيء يعمل في متصفحك. صدّر كمقتطف SVG جاهز للصق، أو ملف .svg قابل للتنزيل، أو قيمة clip-path لـ CSS يمكنك تطبيقها مباشرة على أي عنصر HTML لقصّه إلى شكل العضوية.

ما الذي ستتعلمه أثناء صنع الأشكال العضوية

تمنح منحنيات Bézier التكعيبية الشكلَ العضويَّ نعومتَه — كل زوج من النقاط المتجاورة له مقبضا تحكم، يُحسبان بحيث يكون المماس مستمرًا في كل وصلة.
تستنبط splines من نوع Catmull-Rom (المستخدمة هنا) هذه المقابض تلقائيًا من النقاط المجاورة، فلا تحتاج لضبط نقاط التحكم يدويًا للحفاظ على نعومة المنحنى.
يمكن لـ clip-path: path(...) في CSS تطبيق شكل عضوي على أي عنصر — صورة، div، فيديو — دون التأثير على صندوق التخطيط الخاص به.

كيفية توليد شكل عضوي خطوة بخطوة

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

أين تعمل الأشكال العضوية أفضل

ثلاث طرق شائعة لاستخدام شكل عضوي وما يجب الانتباه له.

حالة الاستخدام	كيفية تطبيقه	احذر من
خلفية hero	ضمّن SVG، وضع مطلقًا خلف المحتوى	حافظ على التباين — النص فوق الشكل العضوي يحتاج لون مقروء
قناع صورة	طبّق CSS clip-path: path('…') على <img>	ما زال مصدر الصورة يُحمَّل — القص بصري فقط
شكل صورة رمزية	لفّ صورة الملف الشخصي في div مع clip-path	استخدم border-radius وحده إذا كانت الدائرة تكفي — clip-path أغلى في إعادة الرسم
فاصل قسم	مدّد شكلًا عضويًا عريضًا على طول الحافة السفلية للقسم	استخدم viewBox preserveAspectRatio لتبقى الصورة صحيحة على الشاشات العريضة
لمسة زخرفية	ضع عدة أشكال شبه شفافة بأحجام مختلفة	يجب أن تكون الحركة محدودة — تكرار رسم مسارات كبيرة يستهلك المعالج
رسم لعلامة تجارية	اجمع شكلًا عضويًا مع نص أو أيقونة فوقه	اختر نمط شكل ثابتًا حتى تتماسك هوية العلامة

أمثلة لتجربتها

ضع شكلًا عضويًا في قسم hero

HTML

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>مرحبًا بك في Coddy</h1></section>

CSS

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

يجلس SVG المحدد بشكل مطلق خلف العنوان. اخفض الشفافية حتى يبقى النص الذي فوقه قابلاً للقراءة دون الحاجة لـ backdrop-filter.

اقنع صورة بشكل عضوي

CSS

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

clip-path مدعوم في جميع المتصفحات الحديثة. تفترض إحداثيات المسار viewBox بحجم 400×400 — قس الصورة على ذلك الصندوق ليصطف القص بنظافة.

شكلان ناعمان كخلفية زخرفية

HTML

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

CSS

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

إن تكديس أشكال عضوية مع تمويه يعطي إحساسًا ناعمًا أشبه بـ "الشفق". أبقها خارج الحدود المرئية بإزاحات سالبة لتظهر فقط الحواف المستديرة.

أخطاء شائعة مع أشكال SVG العضوية

نسيان viewBox وإعطاء <svg> عرض/ارتفاع ثابتًا. لن يتمدد الشكل بشكل متجاوب — استخدم viewBox مع width/height في CSS.
تحريك مسارات معبّأة كبيرة في كل إطار. التنقيط مكلف؛ استخدم transform/opacity أو blur مسبق عبر CSS filter حتى تعالجه وحدة الرسوم.
نسخ <svg> المضمّن إلى Tailwind/Bootstrap ووراثة display: inline بدلاً من block. تترك فجوة الأساس الافتراضية بضع بكسلات تحت الشكل.

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

ما هو الشكل العضوي (blob) في التصميم؟

الشكل العضوي شكل مغلق عضوي غير متماثل مصنوع من منحنيات ناعمة. وهو شائع في تصميم الويب الحديث — خلفيات hero، الشارات، أقنعة الصور الرمزية — لأنه يبدو أكثر ترحيبًا من الدوائر وأكثر صقلًا من الأشكال المرسومة باليد.

هل SVG المُولَّد مجاني للاستخدام التجاري؟

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

هل يمكنني تحرير المسار بعد نسخه؟

نعم — الإخراج <path d="…"> SVG قياسي. افتحه في Figma أو Illustrator أو Inkscape أو أي محرر متجهي لتعديل نقاط التحكم. أو أعد التوليد هنا وانسخ شكلًا جديدًا.

كيف أستخدم إخراج CSS clip-path؟

طبّق clip-path: path('M … Z') على أي عنصر HTML. الإحداثيات في نفس فضاء SVG viewBox (400×400 افتراضيًا هنا)، لذا قِس العنصر المقصوص على ذلك الصندوق ليصطف القص — أو قِس إحداثيات المسار.

هل يعطي Math.random نفس الشكل في كل زيارة؟

لا، لكن هذه الأداة تستخدم مولّد أعداد عشوائية زائفة ببذرة. تنتج نفس البذرة دائمًا نفس الشكل العضوي — لذا يمكنك الضغط على "عشوائي" حتى تجد شكلًا يعجبك، وسيحتفظ إخراج SVG بهذا الشكل بالضبط للأبد.

هل ستبطئ الأشكال العضوية صفحتي؟

شكل عضوي SVG ساكن واحد مجاني فعليًا. قد تصبح عدة أشكال متحركة مع مرشحات تمويه مكلفة على الهاتف — قِس في DevTools وفضّل حركات transform/opacity على حركات سمات path.