מחולל רקעים עם תבניות CSS
בנו רקעים של פסים, נקודות, לוח שחמט, רשת, שתי-וערב אלכסוני ומשולשים הניתנים לריצוף משכבות CSS gradients אמיתיות – ללא תמונות כלל – או ייצאו את אותה תבנית כהגדרת <pattern> של SVG לשימוש בתוך מסמכי SVG.
🔒 מעובד כולו בדפדפן שלך - שום דבר שתזין כאן לא יועלה לעולם.
תוצאה
רוב כלי "מחולל התבניות" עושים שימוש חוזר בנוסחת repeating-linear-gradient זהה לכל אפשרות ורק משנים את המספרים. הכלי הזה לא: כל אחד מששת סוגי התבניות כאן בנוי מהטכניקה הספציפית של-CSS שבאמת מפיקה את הצורה הזו. פסים משתמשים ב-repeating-linear-gradient בודד עם שני טווחי צבע. נקודות משתמשות ב-radial-gradient אחד המרוצף אך ורק דרך background-size – הטריק הקלאסי של נקודות ב-CSS – ולא ב-repeating-radial-gradient, שאינו יכול לרצף נקודה עגולה בצורה נקייה על גבי רשת מלבנית. לוח שחמט משתמש בנוסחת conic-gradient האמיתית של ארבעה רבעים: gradient קוני שממורכז באריח ריבועי מתפצל באופן טבעי לארבעה ריבועי רבע ב-90° מתחלפים, והחלפת שני צבעים בין הרבעים האלה יוצרת ריצוף של לוח שחמט אמיתי, לא קירוב.
רשת ושתי-וערב אלכסוני בונות שתיהן שכבות של שני repeating-linear-gradients כרשומות background-image נפרדות, במקום לזייף את הכיוון השני עם טריקים של border. רשת משלבת gradient חוזר "לימין" ו gradient חוזר "למטה" ליצירת קווי תיחום אופקיים ואנכיים חדים. שתי-וערב מייצר שכבות של gradient חוזר ב-+45° וב--45° ליצירת מארג אלכסוני בסגנון קליעה – כדאי לדייק: זהו שתי-וערב כן, לא גאומטריית אדרה אמיתית, והכלי מציין זאת במפורש במקום להצהיר הצהרות מוגזמות. משולשים עושים שימוש חוזר בטכניקת conic-gradient של לוח השחמט עם ארבעת הטריזים אך מתחילים את ה-gradient בסיבוב של 45°, מה שמזיז את גבולות הטריזים מנקודות האמצע של צלעות האריח לפינותיו והופך את אותם ארבעה טריזים לארבעה משולשים מפינה-לפינה במקום ארבעה ריבועי רבע.
כל סוג תבנית חושף רק את הפקדים שבאמת רלוונטיים לו – סליידר זווית מופיע עבור פסים, רדיוס נקודה ומרווח מופיעים עבור נקודות, עובי קו מופיע עבור רשת ושתי-וערב – ותיבת התצוגה המרוצפת הגדולה מציירת מחדש בכל שינוי כך שתוכלו לראות מספר מחזורי ריצוף מלאים לפני שאתם מחליטים על ערך סופי. החליפו את מצב הפלט ל-SVG ואותה תבנית מופיעה מחדש כאלמנט <pattern> הבנוי מפרימיטיבים פשוטים של rect, circle, path או polygon, מוכן להדבקה בתוך <defs> של כל מסמך SVG, עם הורדה מיידית לקובץ .svg עצמאי.
הכל רץ מקומית בדפדפן שלכם: ללא העלאת תמונות, ללא שליחה הלוך-חזור לשרת, ללא חשבון. למילוי צבע אחיד או gradient ללא חזרה, מחולל ה-gradient של CSS באתר הזה הוא הכלי המתאים; הכלי הזה מיועד במיוחד לרקעים גאומטריים ברי-ריצוף הבנויים מאפס נכסי תמונה.