Draw grid based patterns and see how they look when they repeat. Try Motif at motif.works.
- Live tiled preview: See customisable repeats as you draw
- Flexible grid: Create grids from 2×2 to 100×100 cells
- Custom aspect ratios: Square cells or custom dimensions for crafts like knitting
- Multi-colour support: Work with up to 20 colours per pattern
- Export options: Save your work as PNG, SVG, or JSON
See the Help page and About page to learn more about Motif.
Screenshots & Demos (click to expand)
Drawing a pattern
Adding to a pattern
Working with colour palettes
Built with vanilla JavaScript, HTML, and CSS using a modular ES6 architecture. The codebase is organized into focused modules for configuration, utilities, state management, canvas rendering, and core business logic.
Build system: Vite for fast development and optimized production builds
Testing: Vitest for unit tests, Playwright for end-to-end testing
Project structure:
src/
├── config.js # Configuration constants and UI constants
├── utils.js # Utility functions
├── managers/ # Storage, history, and canvas management
├── core/ # Grid operations and export/import
├── ui/ # UI modules (handlers, menus, palette, etc.)
├── utils/ # Specialized utilities (validation, error handling)
└── main.js # Application initialization
See CONTRIBUTING.md for development setup and guidelines.
MIT License - see LICENSE for details.