@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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

| Preview | 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)

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

Scale (4)

| Preview | 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)

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

Ethnic (6)

| Preview | 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 153 .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

Related Packages

| 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 — [email protected] or open an issue.

License

MIT