Generative SVG
patterns.

One function.

import { generate } from 'inkjet'

const { svg } = generate({ pattern: 'crosshatch', color: '#333', scale: 1.5 })

500 patterns, all live.

Every tile is a real SVG pattern rendered inline. Scroll through all 24 categories.

6 export formats.

import { exportPattern } from 'inkjet'

exportPattern({ pattern: 'halftone' }, 'svg')      // Full SVG string
exportPattern({ pattern: 'halftone' }, 'css')      // CSS background-image
exportPattern({ pattern: 'halftone' }, 'datauri')  // Data URI
exportPattern({ pattern: 'halftone' }, 'react')    // React component
exportPattern({ pattern: 'halftone' }, 'figma')    // Figma JSON
exportPattern({ pattern: 'halftone' }, 'tailwind') // Tailwind config

Every pattern is parametric.

generate({
  pattern: 'stipple',
  color: '#1a1a1a',       // primary color
  background: '#f5f5f0',  // fill behind pattern
  scale: 2,              // tile size multiplier
  rotation: 15,          // degrees
  density: 0.7,          // pattern-specific 0-1
  opacity: 0.6,          // overall opacity
  strokeWidth: 1,        // line weight
  seed: 42,              // reproducible randomness
})

Compose layers.

import { compose } from 'inkjet'

const svg = compose([
  { pattern: 'dots', color: '#000', opacity: 0.3 },
  { pattern: 'lines-diagonal', color: '#999', opacity: 0.15 },
])

Apply to any DOM element.

import { applyTo } from 'inkjet'

applyTo(document.querySelector('.hero'), {
  pattern: 'circuit',
  color: '#3b82f6',
  opacity: 0.08,
  scale: 1.5,
})

Experimental software. DYOR. Built by 0xDragoon.