@maket/patterns

218 tileable SVG material patterns for interior design applications. Zero dependencies. Works in any JS/TS project — React, Vue, Svelte, vanilla, Node.

Live demo & interactive browser

Install

npm install @maket/patterns

Or drop the folder directly into your project and import relatively:

import { build } from './patterns/src/index.js'
// CommonJS:
const { build } = require('./patterns/src/index.cjs')

Quick start

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

// Get a pattern as SVG + CSS
const { svg, css, width, height } = build('parquet')

// Apply as CSS background
document.body.style.cssText = build('carrara-marble', { opacity: 90 }).css

// Custom colours + scale
const { svg } = build('herringbone', {
  colors: ['#C8AA82', '#B8985A', '#8B6F47'],
  opacity: 80,
  scale: 1.5,
})

// Use the raw <pattern> element inside your own SVG
const { pat, id } = build('subway', { scale: 2 })
const mySvg = `
  <svg width="800" height="600">
    <defs>${pat}</defs>
    <rect width="800" height="600" fill="url(#${id})"/>
  </svg>
`

API

build(id, opts?) → BuildResult

Returns:

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

patterns(category?) → PatternInfo[]

List all patterns, optionally filtered by category.

patterns()              // all 218
patterns('flooring')    // 24 flooring patterns
patterns('upholstery')  // 18 upholstery patterns

Each entry: { id, name, category, categoryLabel, defaultColors, colorNames }

colorNames maps 1:1 with defaultColors — use them as labels in a colour picker UI (e.g. ['Grain', 'Base', 'Edge'] for a wood pattern).

categories() → CategoryInfo[]

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

presets(category) → Preset[]

Get curated colour presets for a category. Throws if the category is invalid.

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, ...'
}

Pattern catalogue

Usage examples

Vanilla JS

// Apply pattern as CSS background
const el = document.getElementById('wall')
el.style.cssText = build('brick', { scale: 1.2, opacity: 90 }).css

// Multiple patterns — each gets a unique ID automatically
const floor = build('parquet')   // id: 'mk0'
const wall  = build('brick')     // id: 'mk1'

React

import { build, patterns } from '@maket/patterns'
import { useMemo, useRef, useEffect } from 'react'

function MaterialSwatch({ patternId }: { patternId: string }) {
  const ref = useRef<HTMLDivElement>(null)
  const { css } = useMemo(() => build(patternId, { scale: 1.2 }), [patternId])
  useEffect(() => { if (ref.current) ref.current.style.cssText = css }, [css])
  return <div ref={ref} style={{ width: 120, height: 80, borderRadius: 8 }} />
}

function MaterialPicker() {
  return (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
      {patterns('flooring').map(p => (
        <MaterialSwatch key={p.id} patternId={p.id} />
      ))}
    </div>
  )
}

CSS background (inline)

const { css } = build('zellige', { colors: ['#2A7A8A', '#5AAABB', '#1A5A6A'] })
// css →
// background-color: #5AAABB;
// background-image: url("data:image/svg+xml,...");
// background-repeat: repeat;
// background-size: 40px 40px;

element.style.cssText = css

SVG embed

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

Notes for Claude Code

When uploading this package to implement in a project:

1. Copy the maket-patterns/ folder into your project (e.g. packages/patterns/ or src/lib/patterns/)
2. Import from ./src/index.js (ESM) or ./src/index.cjs (CommonJS)
3. No build step required — the source is the package
4. TypeScript types are in src/index.d.ts
5. All pattern geometry is pure SVG — no canvas, no DOM, works in SSR/Node

Tell Claude Code: "I've included @maket/patterns in [path]. Use build(id, opts) to generate SVG/CSS for any of the 218 patterns. Call patterns() to list all available IDs. Full API in README.md."