Understanding the Patterns Module

---

What Is a Pattern?

A pattern in Konfiwear is an SVG file that tiles across a zone on the garment. When a customer selects a pattern for a zone (e.g., the sleeves), the SVG repeats across that zone's shape with configurable scale, rotation, and opacity. Customers can also recolor individual fills within the SVG to match their brand palette.

Patterns are lightweight assets compared to designs. Each pattern has just a few properties:

💡 Tip: Patterns are separate from the base design SVG and from the product's base pattern texture. The base pattern (in the product's assets) is a static texture baked into the garment model. Customizer patterns are interactive overlays that customers choose and configure.

---

How Patterns Work in the Customizer

When a customer opens the customizer, the Patterns panel lets them apply patterns zone-by-zone. Here's the flow:

1. The customer selects a zone (e.g., primary, secondary, sleeves) from the zone selector

2. They browse the pattern grid and click a pattern thumbnail to apply it

3. The pattern SVG tiles across the zone's exact shape — following contours, not just a bounding box

4. Controls appear for fine-tuning:

   • Scale — how large each tile renders (0.25× to 4.0×)

   • Rotation — tile angle from 0° to 360°

   • Opacity — how much the zone's base color shows through (0% to 100%)

   • Per-fill color pickers — each unique fill color in the SVG can be remapped to a different color

5. The result renders in real time on both the 2D canvas and the 3D model

⚠️ Important: Pattern overlays sit above the zone's base color or gradient fill. At full opacity, the pattern covers the zone color entirely. At lower opacities, the base color shows through the pattern's transparent areas. Colors and patterns are independent — changing a zone's color does not affect its pattern, and vice versa.

---

Patterns vs. Designs vs. Graphics

These three concepts are distinct in Konfiwear:

Layer order from bottom to top: Zone base color → Pattern overlay → Freeform graphics

---

Navigating the Patterns Module

The Patterns List

Navigate to Patterns under the Customizer section in your account sidebar. The list page shows all your patterns in a data table with:

• Search by pattern name

• Status filter (Enabled / Disabled)

• Column sorting and pagination (10 per page)

• Create dialog — add a new pattern directly from the list

• Row actions — Edit (open detail page), Copy ID, Delete

Caption: The Patterns list page with search, status filter, and pattern rows.

The Pattern Detail Page

Click any pattern to open a two-column detail view:

• Left column — Pattern info card with inline editing for name, image URL, and enabled status

• Right column — SVG preview card showing the pattern rendered at its natural aspect ratio

Each field on the info card opens a modal dialog for editing and saves via the update action.

Caption: The pattern detail page with editable info and a live SVG preview.

---

Pattern Categories

The Patterns module supports category assignments through a pattern_categories join table. Categories let you organize patterns into groups (e.g., "Stripes", "Geometric", "Camo", "Abstract") that can be used for filtering in the customizer.

💡 Tip: Category assignment UI is planned for a future update. Currently, category relationships can be managed via the database. The customizer's pattern panel already supports filtering by category when the data is present.

---

SVG Requirements for Patterns

For patterns to render correctly in the customizer, your SVGs should follow these guidelines:

⚠️ Important: The customizer detects fill colors using both fill="..." attributes and fill: ... CSS styles in the SVG. Make sure your fills use hex values (e.g., #FF5500) for reliable detection and recoloring.

---

How Patterns Connect to Other Modules

---

Delete Behavior

Deleting a pattern is a hard delete — the record and any associated category assignments are permanently removed. There is no soft-delete or recovery option.

⚠️ Important: Before deleting a pattern, consider disabling it instead. Disabled patterns are hidden from the customizer but retain their configuration in case you need them later.

---

Tips & Best Practices

• Name patterns descriptively — "Diagonal Stripes - Thick" is far more useful than "Pattern 001" for both your team and customers browsing the grid

• Test tileability — open the customizer and apply the pattern to a large zone at 1× scale to check for visible seam lines

• Use 3–5 distinct fills in your SVG for maximum customer flexibility — too many fills create a cluttered recoloring interface

• Disable rather than delete — you can always re-enable a pattern if a client requests it

• Pair with a good preview — the image URL is also the rendered preview, so make sure your SVG looks clear at thumbnail size

---

Related Articles

• Adding Patterns

• Understanding the Designs Module

• Understanding the Products Module