patterns.js

218 tileable SVG material patterns — install, import, and use in any project.

Install

npm install @maket/patterns

Quick start

import { build, patterns, categories, presets } from '@maket/patterns'

// Build a pattern — returns SVG, CSS, raw <pattern>, and unique ID
const { svg, css, pat, width, height, id } = build('parquet')

// With options
const { svg, css } = build('herringbone', {
  colors: ['#C8AA82', '#B8985A', '#8B6F47'],
  opacity: 80,    // 0–100, clamped (default 80)
  scale: 1.5,     // multiplier, min 0.01 (default 1)
  spacing: 0,     // extra px gap, min 0 (default 0)
  rotate: 0,      // degrees (default 0)
  id: 'my-pat',   // custom pattern ID (auto-generated if omitted)
})

Usage

As a CSS background

element.style.cssText = build('zellige').css

Embed SVG directly

container.innerHTML = build('carrara-marble', { scale: 2 }).svg

Inside your own SVG

const { pat, id } = build('herringbone')
svg.innerHTML = `<defs>${pat}</defs>
  <rect width="100%" height="100%" fill="url(#${id})"/>`

Vanilla JS — apply to a div

const el = document.getElementById('wall')
el.style.cssText = build('brick', { scale: 1.2, opacity: 90 }).css

Multiple patterns on one page

// Each build() auto-generates a unique ID (mk0, mk1, ...)
const floor = build('parquet')   // id: 'mk0'
const wall  = build('brick')     // id: 'mk1'
// Or pass your own:
const accent = build('zellige', { id: 'accent-tile' })

API reference

build(id, opts?)

Build a pattern by ID. Throws if the ID is invalid. Returns an object with:

Property	Type	Description
svg	string	Standalone 400x300 repeating SVG, ready to embed or save
css	string	Complete CSS background properties string
pat	string	Raw <pattern> element for use in your own SVG <defs>
width	number	Tile width in px at current scale
height	number	Tile height in px at current scale
id	string	The SVG pattern ID used — reference with fill="url(#id)"

Options:

Option	Type	Default	Description
colors	string[]	pattern defaults	Hex colour overrides
opacity	number	80	0–100 (clamped)
scale	number	1	Multiplier, min 0.01 (1.5 = 150%)
spacing	number	0	Extra px gap between tile repeats (min 0)
rotate	number	0	Rotate entire pattern in degrees
id	string	auto (mk0, mk1, ...)	Custom SVG pattern ID — required when using multiple patterns on one page

Validation: opacity is clamped to 0–100, scale has a minimum of 0.01, and spacing has a minimum of 0. Invalid pattern IDs throw an error listing all valid IDs.

patterns(category?)

List all patterns, optionally filtered by category. Returns an array of:

{ id, name, category, categoryLabel, defaultColors, colorNames }

colorNames maps 1:1 with defaultColors — use them as labels when building a colour picker (e.g. "Grain", "Base", "Edge" for a wood pattern).

categories()

List all 10 categories with pattern counts. Returns:

categories()
// [{ id: 'flooring', label: 'Flooring', count: 24 }, ...]

presets(category)

Get curated colour presets for a category. Throws if the category is invalid. Returns an array of:

presets('wood')
// [{ name: 'Cherry', colors: ['#8B3A2A', '#C87060', '#3A1008'] }, ...]

// Apply a preset:
const preset = presets('flooring')[0]
const { svg } = build('herringbone', { colors: preset.colors })

Error handling

Both build() and presets() throw descriptive errors for invalid inputs:

try {
  build('nonexistent')
} catch (e) {
  // '@maket/patterns: unknown id "nonexistent". Valid ids: parquet, ...'
}

try {
  presets('invalid')
} catch (e) {
  // '@maket/patterns: unknown category "invalid". Valid categories: flooring, ...'
}

Categories

ID	Label	Count	Example IDs
flooring	Flooring	24	parquet, herringbone, chevron, basketweave-floor, terrazzo-floor
wood	Wood & Furniture	24	cherry, maple, teak, rosewood, zebrawood
tile	Tile & Stone	24	subway, hexagon, terrazzo, zellige, scallop
fabric	Fabric & Upholstery	24	linen, velvet, houndstooth, chambray, dobby
upholstery	Upholstery & Leather	18	leather-smooth, suede, nubuck, woven-leather
drapery	Drapery & Curtains	16	sheer-voile, dupioni-silk, velvet-drape, organza
throw	Throws & Blankets	16	knit-throw, quilted, cable-knit-throw, fair-isle
wall	Wall Coverings	24	brick, shiplap, grasscloth, roman-clay, rattan-cane
stone	Natural Stone	24	marble, slate, calacatta, nero-marquina, soapstone
carpet	Carpet & Rugs	24	persian, kilim, seagrass, dhurrie, flokati

CommonJS

const { build, patterns, categories, presets } = require('@maket/patterns')

TypeScript

Full type definitions are included (src/index.d.ts). Import types directly:

import type { BuildOptions, BuildResult, PatternInfo, Category } from '@maket/patterns'

Notes

• Zero dependencies — pure SVG geometry, no canvas or DOM required
• Works in SSR / Node.js — no browser APIs needed
• Each build() call auto-generates a unique pattern ID to prevent SVG collisions
• All numeric options are validated and clamped to safe ranges
• ESM (src/index.js) and CJS (src/index.cjs) both included

License

MIT