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-patternsUsage
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 overrideExamples
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.cjsTo regenerate gallery images:
bash generate-galleries.shRelated 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 — support@genart.dev or open an issue.
License
MIT