Package Exports

@genart-dev/plugin-patterns

Readme

@genart-dev/plugin-patterns

Decorative pattern fills as design layers for genart.dev — 153 presets across 28 layer types, from geometric tessellations to cultural motifs. Renders with Canvas2D primitives — no brush engine dependency.

Part of genart.dev — a generative art platform with an MCP server, desktop app, and IDE extensions.

Install

npm install @genart-dev/plugin-patterns

Usage

import patternsPlugin from "@genart-dev/plugin-patterns";
import { createDefaultRegistry } from "@genart-dev/core";

const registry = createDefaultRegistry();
registry.registerPlugin(patternsPlugin);

// Or access individual exports
import {
  GEOMETRIC_PRESETS,
  PATTERN_PRESETS,
  getGeometricPreset,
  getPatternPreset,
} from "@genart-dev/plugin-patterns";

const awning = getGeometricPreset("awning");
// { layerType: "patterns:stripe", angle: 90, spacing: 30, lineWidth: 30, colors: ["#c0392b", "#ffffff"] }

const hatchLight = getPatternPreset("hatch-light");
// { strategy: { type: "hatch", angle: 45, spacing: 12 }, lineWidth: 2 }

Layer Types (29)

Type	Category	Presets	Description
`patterns:fill`	Illustration fills	11	Hatch, crosshatch, stipple, scumble, contour
`patterns:stripe`	Core geometric	8	Parallel lines/bands at any angle
`patterns:dot`	Core geometric	8	Regular/offset dot grids
`patterns:checker`	Core geometric	7	Alternating squares, optionally rotated
`patterns:wave`	Core geometric	9	Sine, triangle, square, sawtooth rows
`patterns:crosshatch-geo`	Core geometric	6	Clean geometric crosshatch
`patterns:herringbone`	Core geometric	7	Interlocking V-pattern / zigzag blocks
`patterns:tile`	Core geometric	8	Seamless repeating tiles (brick, hex, moroccan, etc.)
`patterns:triangle`	Geometric	6	Equilateral, pinwheel, arrow, kaleidoscope
`patterns:diamond`	Geometric	5	Simple, argyle, nested, adjointed, lattice
`patterns:hexagon`	Geometric	5	Honeycomb, interlocked, flower, grid
`patterns:star`	Geometric	5	Six-pointed, eight-pointed, plus-grid
`patterns:circle`	Geometric	6	Concentric, overlapping, packed, semicircle
`patterns:square`	Geometric	5	Nested, rotated, offset, stars-and-squares
`patterns:octagon`	Geometric	2	Octagon-square, outline
`patterns:scale`	Geometric	4	Fishscale, scallop, overlapping, pointed
`patterns:chainlink`	Geometric	3	Circle, oval, double
`patterns:japanese`	Cultural	6	Asanoha, seigaiha, shippo, bishamon-kikko, yagasuri, kumiko
`patterns:lattice`	Cultural	5	Greek key, Chinese fret, double meander
`patterns:plaid`	Cultural	4	Tartan, buffalo plaid, madras, windowpane
`patterns:cube`	Cultural	3	Isometric, stacked, tumbling blocks
`patterns:ethnic`	Cultural	6	Tribal zigzag, kente, lotus, step, songket, arrow
`patterns:leaf`	Organic	4	Simple leaf, fern row, tropical scatter, vine trail
`patterns:floral`	Organic	5	Daisy, rosette, cherry blossom, sunflower
`patterns:memphis`	Organic	4	Classic, confetti, geometric, squiggle
`patterns:eye`	Organic	4	Vesica, pointed, almond, double
`patterns:spiral`	Organic	4	Archimedean, logarithmic, scroll, double
`patterns:terrazzo`	Organic	3	Classic, bold, blob
`patterns:custom`	Custom	—	Agent-created from drawing commands

All layer types support region (JSON clip region), opacity, and standard layer transform properties.

Presets (153)

Fill (11)

Fill gallery

ID	Name	Strategy
`hatch-light`	Light Hatch	hatch 45° sp:12
`hatch-medium`	Medium Hatch	hatch 45° sp:8
`hatch-dense`	Dense Hatch	hatch 45° sp:4
`crosshatch-light`	Light Crosshatch	crosshatch 45°/135° sp:12
`crosshatch-dense`	Dense Crosshatch	crosshatch 45°/135° sp:5
`crosshatch-triple`	Triple Crosshatch	crosshatch 3-angle sp:6
`stipple-light`	Light Stipple	stipple density:15
`stipple-dense`	Dense Stipple	stipple density:60
`stipple-gradient`	Gradient Stipple	stipple density:gradient
`scumble`	Scumble	scumble density:12
`contour`	Contour	contour sp:6 smooth:0.3

Stripe (8)

Stripe gallery

ID	Name	Angle	Spacing	Colors
`pinstripe`	Pinstripe	90	12	navy / white
`ticking`	Ticking	90	20	dark blue / light grey
`awning`	Awning	90	30	red / white
`nautical`	Nautical	0	16	dark blue / white
`candy`	Candy	45	14	red / white (4-color)
`barber-pole`	Barber Pole	30	12	red / white / blue / white
`railroad`	Railroad	0	8	black / white
`diagonal-stripe`	Diagonal Stripe	45	10	black / white

Dot (8)

Dot gallery

ID	Name	Spacing	Hex Offset	Colors
`polka-small`	Small Polka	20	no	dark / white bg
`polka-large`	Large Polka	40	no	red / white bg
`halftone`	Halftone	8	yes	black / white bg
`hex-dot`	Hex Dot	24	yes	purple / light bg
`confetti`	Confetti	16	yes	orange / cream bg
`sprinkle`	Sprinkle	12	no	green / mint bg
`bubble`	Bubble	28	yes	blue / light bg
`ring-dot`	Ring Dot	20	no	dark / cream bg

Checker (7)

Checker gallery

ID	Name	Cell Size	Angle	Colors
`checker-small`	Small Checker	16	0	black / white
`checker-large`	Large Checker	48	0	black / white
`gingham`	Gingham	20	0	blue / light blue
`buffalo-check`	Buffalo Check	36	0	red / dark
`houndstooth`	Houndstooth	12	45	dark blue / light
`checkerboard-diagonal`	Diagonal Checker	24	45	black / white
`pixel-grid`	Pixel Grid	8	0	grey / white

Wave (9)

Wave gallery

ID	Name	Waveform
`gentle-wave`	Gentle Wave	sine
`choppy`	Choppy	sine
`zigzag`	Zigzag	triangle
`scallop`	Scallop	sine
`ogee`	Ogee	sine
`deep-wave`	Deep Wave	sine
`nested-wave`	Nested Wave	sine
`square-wave`	Square Wave	square
`sawtooth-wave`	Sawtooth Wave	sawtooth

Crosshatch (6)

Crosshatch gallery

ID	Name	Description
`fine-crosshatch`	Fine Crosshatch	Tight clean crosshatch
`bold-crosshatch`	Bold Crosshatch	Heavy weight crosshatch
`diamond-mesh`	Diamond Mesh	Diamond-angle crosshatch
`screen`	Screen	Fine screen pattern
`triple-crosshatch`	Triple Crosshatch	Three-angle crosshatch
`wide-mesh`	Wide Mesh	Wide-spaced mesh

Herringbone (7)

Herringbone gallery

ID	Name	Description
`classic-herringbone`	Classic Herringbone	Traditional V-pattern
`chevron`	Chevron	Wide chevron
`twill`	Twill	Diagonal twill weave
`parquet`	Parquet	Parquet flooring
`wide-chevron`	Wide Chevron	Extra-wide chevron
`thin-chevron`	Thin Chevron	Narrow chevron
`double-chevron`	Double Chevron	Nested chevron

Tile (8)

Tile gallery

ID	Name	Description
`brick`	Brick	Offset brick wall
`basketweave`	Basketweave	Woven basket pattern
`hexagonal`	Hexagonal Tile	Hex tile grid
`fish-scale`	Fish Scale	Overlapping scales
`moroccan`	Moroccan	Moroccan tile
`ogee-tile`	Ogee Tile	Ogee shape tiles
`lantern-tile`	Lantern Tile	Lantern shape
`basketweave-tight`	Basketweave Tight	Tight basketweave

Triangle (6)

Triangle gallery

ID	Name	Description
`equilateral-grid`	Equilateral Grid	Tessellating equilateral triangles
`pinwheel`	Pinwheel	Rotating triangle pinwheel
`arrow-tessellation`	Arrow Tessellation	Arrow-shaped triangle tiling
`kaleidoscope`	Kaleidoscope	Kaleidoscope symmetry
`inverted-triangles`	Inverted Triangles	Alternating up/down
`triangle-strip`	Triangle Strip	Horizontal triangle strip

Diamond (5)

Diamond gallery

ID	Name	Description
`simple-diamond`	Simple Diamond	Basic diamond grid
`argyle`	Argyle	Classic argyle
`nested-diamond`	Nested Diamond	Concentric diamonds
`adjointed-diamonds`	Adjointed Diamonds	Interlocking diamonds
`diamond-lattice`	Diamond Lattice	Open diamond lattice

Hexagon (5)

Hexagon gallery

ID	Name	Description
`honeycomb`	Honeycomb	Classic honeycomb
`interlocked-hex`	Interlocked Hex	Interlocking hexagons
`hex-flower`	Hex Flower	Flower-shaped hex cluster
`hex-grid`	Hex Grid	Regular hex grid
`overlapping-hex`	Overlapping Hex	Overlapping hexagons

Star (5)

ID	Name	Description
`six-pointed`	Six-Pointed Star	Star of David pattern
`eight-pointed`	Eight-Pointed Star	Compass rose style
`plus-grid`	Plus Grid	Plus sign grid
`plus-offset`	Plus Offset	Offset plus signs
`star-lattice`	Star Lattice	Connected star lattice

Circle (6)

Circle gallery

ID	Name	Description
`concentric-rings`	Concentric Rings	Nested circles
`overlapping-circles`	Overlapping Circles	Overlapping transparent circles
`packed-circles`	Packed Circles	Tightly packed circles
`semicircle-row`	Semicircle Row	Alternating semicircle rows
`quarter-turn`	Quarter Turn	Quarter-circle arcs
`bullseye`	Bullseye	Target/bullseye pattern

Japanese (6)

Japanese gallery

ID	Name	Description
`asanoha`	Asanoha	Hemp leaf star pattern
`seigaiha`	Seigaiha	Blue ocean waves
`shippo`	Shippo	Seven treasures / interlocking circles
`bishamon-kikko`	Bishamon Kikko	Tortoiseshell armor
`yagasuri`	Yagasuri	Arrow feather fletching
`kumiko`	Kumiko	Woodwork lattice

Lattice (5)

Lattice gallery

ID	Name	Description
`greek-key`	Greek Key	Meander / Greek fret
`chinese-fret`	Chinese Fret	Chinese window fret
`double-meander`	Double Meander	Interlocking meanders
`chinese-window`	Chinese Window	Ornate window lattice
`interlocking-fret`	Interlocking Fret	Interlocking L-shapes

Plaid (4)

Plaid gallery

ID	Name	Description
`tartan`	Tartan	Scottish tartan
`buffalo-plaid`	Buffalo Plaid	Classic buffalo plaid
`madras`	Madras	Madras cotton plaid
`windowpane`	Windowpane	Windowpane check

Cube (3)

Cube gallery

ID	Name	Description
`isometric-cube`	Isometric Cube	3D isometric cubes
`stacked-cubes`	Stacked Cubes	Stacked cube illusion
`tumbling-blocks`	Tumbling Blocks	Classic tumbling blocks

Leaf (4)

Leaf gallery

ID	Name	Description
`simple-leaf`	Simple Leaf	Repeating leaf motif
`fern-row`	Fern Row	Alternating fern fronds
`tropical-scatter`	Tropical Scatter	Scattered tropical leaves
`vine-trail`	Vine Trail	Trailing vine pattern

Floral (5)

Floral gallery

ID	Name	Description
`daisy`	Daisy	Simple daisy repeat
`rosette`	Rosette	Geometric rosette
`cherry-blossom`	Cherry Blossom	Delicate blossom scatter
`sunflower`	Sunflower	Bold sunflower grid
`abstract-flower`	Abstract Flower	Abstract floral motif

Memphis (4)

Memphis gallery

ID	Name	Description
`memphis-classic`	Memphis Classic	80s Memphis style
`confetti-burst`	Confetti Burst	Scattered confetti
`geometric-scatter`	Geometric Scatter	Mixed geometric shapes
`squiggle-field`	Squiggle Field	Random squiggle fill

Eye (4)

Eye gallery

ID	Name	Description
`vesica-piscis`	Vesica Piscis	Vesica eye shape
`evil-eye`	Evil Eye	Nested eye motif
`almond-lattice`	Almond Lattice	Almond-shaped lattice
`nested-eyes`	Nested Eyes	Concentric eye shapes

Spiral (4)

Spiral gallery

ID	Name	Description
`tight-spiral`	Tight Spiral	Dense Archimedean spiral
`scrollwork`	Scrollwork	Ornamental scroll
`double-spiral`	Double Spiral	Mirrored double spiral
`batik-swirl`	Batik Swirl	Batik-style swirl

Terrazzo (3)

Terrazzo gallery

ID	Name	Description
`terrazzo-classic`	Terrazzo Classic	Classic terrazzo chips
`terrazzo-bold`	Terrazzo Bold	Large bold chips
`blob-scatter`	Blob Scatter	Organic blob scatter

Square (5)

Square gallery

ID	Name	Description
`nested-squares`	Nested Squares	Concentric squares
`rotated-squares`	Rotated Squares	45° rotated square grid
`squares-and-stars`	Squares & Stars	Alternating squares and stars
`squares-and-circles`	Squares & Circles	Mixed square/circle grid
`offset-squares`	Offset Squares	Half-step offset

Octagon (2)

Octagon gallery

ID	Name	Description
`octagon-square`	Octagon & Square	Classic octagon-square tiling
`octagon-outline`	Octagon Outline	Outlined octagon grid

Scale (4)

Scale gallery

ID	Name	Description
`fishscale-classic`	Fishscale Classic	Overlapping fishscales
`scallop-shell`	Scallop Shell	Shell-shaped scallop
`overlapping-scales`	Overlapping Scales	Layered scale pattern
`pointed-scales`	Pointed Scales	Pointed scale variant

Chainlink (3)

Chainlink gallery

ID	Name	Description
`chainlink-fence`	Chainlink Fence	Classic chainlink
`chain-mail`	Chain Mail	Interlocking rings
`interlocking-rings`	Interlocking Rings	Decorative ring links

Ethnic (6)

Ethnic gallery

ID	Name	Description
`tribal-zigzag`	Tribal Zigzag	Bold zigzag bands
`african-kente`	African Kente	Kente cloth stripes
`egyptian-lotus`	Egyptian Lotus	Lotus motif repeat
`mexican-step`	Mexican Step	Stepped geometric
`songket-diamond`	Songket Diamond	Woven diamond brocade
`tribal-arrow`	Tribal Arrow	Arrow point rows

MCP Tools (7)

Exposed to AI agents through the MCP server when this plugin is registered:

Tool	Description
`list_pattern_presets`	List all presets grouped by category
`add_pattern`	Add a pattern layer (by type + preset or manual properties)
`update_pattern`	Update pattern layer properties by layer ID
`set_pattern_region`	Set clip region (bounds, rect, ellipse, polygon)
`set_pattern_shading`	Set value-based shading (patterns:fill only)
`tile_pattern`	Configure tile layer (shape, size, gap, rotation, colors)
`create_pattern`	Create custom pattern from drawing commands

Custom Patterns

The patterns:custom layer type lets agents create entirely new patterns from drawing commands:

import { patternMcpTools } from "@genart-dev/plugin-patterns";

// DrawCommand types: line, circle, rect, arc, path, polygon
// Stored in sketch thirdParty, resolved at render time
// Tiles the unit cell with scale/rotation/color override

Examples

The examples/ directory contains 151 .genart files (one per preset) with matching .png thumbnails. Open examples/patterns-gallery.genart-workspace to view all presets in a grid layout.

To re-render thumbnails:

node render-examples.cjs

To regenerate gallery images:

bash generate-galleries.sh

Package	Purpose
`@genart-dev/core`	Plugin host, layer system (dependency)
`@genart-dev/mcp-server`	MCP server that surfaces plugin tools to AI agents

Support

Questions, bugs, or feedback — support@genart.dev or open an issue.

License

MIT