מחולל רקע דפוסי CSS
בנה פסים, נקודות, לוח דמקה, רשת, צלבים אלכסוניים ורקעים משולשים הניתנים לאריחים משכבות CSS אמיתיות - אפס תמונות - או ייצא את אותה תבנית כמו SVG <pattern> לשימוש בתוך מסמכי SVG.
תוצאה
רוב הכלים של "מחולל דפוסים" עושים שימוש חוזר בשקט באותה נוסחה חוזרת-לינארית-שיפוע עבור כל אפשרות ופשוט משנים את המספרים. זה לא: כל אחד מששת סוגי הדפוסים כאן בנוי מטכניקת ה-CSS הספציפית שמייצרת למעשה את הצורה הזו. פסים משתמשים בשיפוע אחד חוזר-ליניארי עם שתי פסי צבע. נקודות משתמשות בדרגת שיפוע רדיאלי אחד המצופה אך ורק בגודל הרקע - הטריק הקלאסי של נקודות CSS - במקום בשיפוע רדיאלי חוזר, שאינו יכול לרצף נקודה עגולה בצורה נקייה על רשת מלבנית. לוח דמקה משתמש בנוסחה האמיתית של דרגת רביעייה חרוטית: שיפוע חרוטי שבמרכזו אריח מרובע מתפצל באופן טבעי לארבעה ריבועים בגבולות של 90 מעלות, ומחליף שני צבעים על פני אריחי הרבעים הללו ללוח דמקה אמיתי, לא קירוב.
הרשת והאלכסון מצטלבים שניהם שכבות שני מעברי-הדרגות-לינאריות חוזרות ככניסות נפרדות של תמונת רקע במקום לזייף את הכיוון השני עם תעלולי גבול. רשת משלבת שיפוע חוזר "לימין" ו"למטה" עבור קווי כלל אופקיים ואנכיים חדים. Crosshatch משכב שיפוע חוזר של +45 מעלות ו-45 מעלות עבור אריגה אלכסונית בסגנון סלים - שווה לדייק לגביו: זהו צולב כנה, לא גיאומטריה אמיתית של אדרה, והכלי מתייג את זה כך במקום לטעון יתר על המידה. משולשים עושים שימוש חוזר בטכניקת שיפוע חרוטי של ארבעת הטריזים של לוח השחמט אך מתחילים את השיפוע מסובב ב-45 מעלות, מה שמעביר את גבולות הטריז מנקודות האמצע של קצה האריח לפינותיו והופך את אותם ארבעת טריזים לארבעה משולשים מפינה לפינה במקום ארבעה ריבועים.
כל סוג דפוס חושף רק את הפקדים שחלים עליו בפועל - מחוון זווית מופיע עבור פסים, רדיוס נקודות ומרווח מופיעים עבור נקודות, עובי קווים מופיע עבור רשת וחתך - ותיבת התצוגה המקדימה הגדולה עם אריחים צובעת מחדש בכל שינוי, כך שתוכל לראות מספר חזרות מלאות לפני התחייבות לערך. הפוך את מצב הפלט ל-SVG ואותה תבנית תופיע שוב כאלמנט <pattern> הבנוי מפרימיטיבים רגילים של rect, מעגל, נתיב או מצולע, מוכן להדבקה בתוך <defs> של כל מסמך SVG, עם הורדה בלחיצה אחת לקובץ .svg עצמאי.
הכל פועל באופן מקומי בדפדפן שלך: אין העלאות תמונות, אין שרת הלוך ושוב, אין חשבון. למילוי מוצק או שיפוע ללא חזרה, מחולל שיפוע CSS באתר זה הוא הכלי הנכון במקום זאת; זה מיועד במיוחד עבור רקעים גיאומטריים הניתנים לאריח הבנויים מאפס נכסי תמונה.