Seamless Pattern Maker

Canvas-Based Tile Rendering

The tool uses the HTML5 Canvas API to draw your tile image repeatedly across a configurable canvas. Each tile is positioned and transformed individually for maximum control over the pattern layout.

Tiling Modes

• -Normal grid mode places tiles in a regular grid pattern with no offset.
• -Half-brick mode shifts every other row by half a tile width, creating a brickwork pattern.
• -Half-drop mode shifts every other column down by 50% of the tile height, creating the industry-standard textile repeat pattern.
• -Mirrored mode alternates horizontal and vertical flipping on neighboring tiles, creating symmetrical patterns.

Scale and Rotation

The scale control resizes each tile from 25% to 400% of its original size. Rotation applies a transformation around the center of each tile, allowing any angle from 0 to 360 degrees. Both transformations use canvas transform operations for crisp rendering.

CSS Export

The CSS export creates a single-tile canvas, renders the tile with current scale and rotation settings, converts it to a data URI, and generates a background-image CSS property with appropriate background-repeat and background-size values.

Client-Side Processing

All image processing happens entirely in your browser using the Canvas API. Your images are never uploaded to any server, ensuring complete privacy. The tool works offline once loaded.