מחולל SVG Blob

מה זה SVG blob generator?

SVG blob generator יוצר צורות אורגניות סגורות: הוא דוגם נקודות סביב מעגל ומחבר אותן בעקומות Bézier חלקות. התוצאה היא צללית רכה וזורמת, מהסוג שרואים מאחורי hero שיווקי, מסביב לתמונת פרופיל או ככתם צבעוני ברקע של דף נחיתה.

Blobs נמצאים בנקודה המתוקה שבין גיאומטריה לאקראיות. שנו את מספר הנקודות כדי לקבל צורות של סוכריית ג'לי (3-4), חלוק נחל (5-6) או כאוס מוחלט (10+). הזיזו את מחוון האקראיות כדי לעבור מצורה כמעט עגולה לצורה מעוותת לגמרי. לחצו על כפתור הקובייה כדי להגריל seed חדש בכל רגע.

הכול רץ בדפדפן שלכם. אפשר לייצא כקטע SVG להעתקה, כקובץ .svg להורדה או כערך clip-path של CSS שאפשר להחיל ישירות על כל אלמנט HTML כדי לחתוך אותו לצורת ה-blob.

מה תלמדו תוך כדי יצירת blobs

• עקומות Bézier מעוקבות נותנות ל-blob את החלקות שלו: לכל זוג נקודות סמוכות יש שתי ידיות בקרה, שמחושבות כך שהמשיק רציף בכל נקודת חיבור.
• Splines מסוג Catmull-Rom (שבהם הכלי משתמש) גוזרים את הידיות האלה אוטומטית מהנקודות השכנות, כך שלא צריך לכוונן נקודות בקרה ידנית כדי לשמור על עקומה חלקה.
• clip-path: path(...) של CSS יכול להחיל צורת blob על כל אלמנט, תמונה, div או וידאו, בלי להשפיע על תיבת הפריסה שלו.
• Blob שמרונדר כ-SVG מתרחב בלי גבול ובלי פיקסלציה, בניגוד ל-PNG, ושוקל רק כמה מאות בתים.

איך יוצרים blob, שלב אחר שלב

1. 1

   בחרו את מספר הנקודות

   מעט נקודות (3-5) יוצרות blobs בצורת סוכריית ג'לי. יותר נקודות (8-12) יוצרות צורות לא סדירות, כמו חלוקי נחל.

2. 2

   קבעו את רמת האקראיות

   0% זה עיגול. 50% נותן עקומות עדינות בצורת blob. 100% נותן צלליות מעוותות ודרמטיות.

3. 3

   בחרו צבע או גרדיאנט

   השתמשו במילוי אחיד, או הפעילו גרדיאנט ובחרו שני צבעים וזווית. זה מתאים לדפוסים פופולריים של אזורי hero.

4. 4

   הגרילו וייצאו

   לחצו על הקובייה כדי להגריל seed חדש. כשאתם מרוצים, העתיקו את ה-SVG, העתיקו את ה-clip-path של CSS או הורידו את קובץ ה-.svg.

איפה blobs עובדים הכי טוב

דרכים נפוצות להשתמש ב-blob, ועל מה כדאי לשים לב.

דוגמאות blob לנסות

<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>

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

.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');}

<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>

.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 blobs

• שוכחים viewBox ונותנים ל-<svg> רוחב וגובה קבועים. הצורה לא תתרחב בצורה רספונסיבית: השתמשו ב-viewBox יחד עם width/height ב-CSS.
• מנפישים paths גדולים וממולאים בכל פריים. רסטריזציה של paths יקרה: השתמשו ב-transform/opacity או בטשטוש מראש עם filter של CSS כדי שה-GPU יטפל בזה.
• מעתיקים <svg> inline לתוך Tailwind/Bootstrap ויורשים display: inline במקום block. הרווח של קו הבסיס משאיר כמה פיקסלים מתחת לצורה.
• משתמשים ב-blob כצורה של כפתור ושוכחים שאירועי עכבר עדיין נורים על התיבה התוחמת ולא על קו המתאר המעוגל. אם צריך זיהוי לחיצה מדויק, עטפו בפנים <button> אמיתי.
• עורמים הרבה blobs אטומים עם טשטוש חזק במובייל. העלות המצטברת של הציור מחדש יכולה להוריד את קצב הפריימים בצורה מורגשת במכשירים חלשים.

שאלות נפוצות על SVG Blob Generator