Getting Started
The Moiré Pattern Generator is a powerful tool for creating complex geometric patterns and visual effects. This guide will help you master all its features.
Quick Start Guide
- Choose Canvas Format: Select Mobile, Tablet, or Desktop size, and choose Portrait or Landscape orientation
- Add Your First Layer: Select a pattern type (Lines, Circles, Sine Waves, Radial Lines, or Image) and click "Add Layer"
- Customize the Pattern: Adjust line spacing, width, color, and other properties using the sliders
- Transform the Layer: Use mouse/touch to move, scale, and rotate your pattern
- Add More Layers: Create multiple layers to build complex moiré effects
- Export Your Work: Save as PNG, SVG, HTML, or CSS data
Pattern Types
Parallel Lines
Classic moiré pattern with evenly spaced parallel lines. Perfect for creating interference effects.
Concentric Circles
Circular patterns that create stunning radial moiré effects when overlapped.
Sine Waves
Wavy lines that create organic, flowing moiré patterns with adjustable frequency and amplitude.
Radial Lines
Lines radiating from a center point, creating dynamic star-like moiré effects.
Image Layer
Import your own images to create unique moiré effects with custom artwork.
Interaction Controls
Mouse Controls (Desktop)
| Action | Mouse Control | Description |
|---|---|---|
| Move Layer | Click & Drag | Drag to move the selected layer around the canvas |
| Rotate Layer | Shift + Click & Drag | Hold Shift while dragging to rotate the layer |
| Scale Layer | Cmd/Ctrl + Click & Drag | Hold Cmd (Mac) or Ctrl (Windows) while dragging to scale |
| Select Layer | Click on Layer Pill | Click the floating layer pills to select different layers |
Touch Controls (Mobile/Tablet)
| Action | Touch Gesture | Description |
|---|---|---|
| Move Layer | Single Finger Drag | Drag with one finger to move the selected layer |
| Scale Layer | Two Finger Pinch | Pinch in/out with two fingers to scale the layer |
| Rotate Layer | Two Finger Rotate | Rotate two fingers to rotate the layer |
| Select Layer | Tap Canvas | Tap anywhere on the canvas to cycle through layers |
Keyboard Shortcuts
Layer Management
Layer Pills
The floating layer pills on the left side of the canvas show all your layers. Each pill displays:
- Layer Preview: Small preview of the pattern
- Layer Name: Type and number of the layer
- Active State: Highlighted when selected
- Visibility: Grayed out when hidden
Layer Controls
Visibility Toggle
Click the eye icon to show/hide layers. Hidden layers don't appear in exports.
Layer Reordering
Drag the ⋮⋮ handle to reorder layers. Use Ctrl+↑/↓ for keyboard shortcuts.
Layer Deletion
Click the trash icon to delete layers. This action cannot be undone.
Layer Selection
Click on layer pills or tap the canvas to select different layers for editing.
Transform Controls
Position Controls
Use the X and Y position sliders to precisely position your layers:
- Center Point: (0, 0) represents the center of the canvas
- Range: -1000 to +1000 pixels in both directions
- Reset Buttons: Click "Reset" to center the layer instantly
- Number Input: Type exact values for precise positioning
Scale Controls
Control the size of your patterns with multiple scaling options:
- Scale Slider: 10% to 500% with 1% increments
- Fit Mode: Scale to fit within canvas bounds
- Fill Mode: Scale to fill entire canvas
- Scale to Fit Button: Automatically scale to optimal size
Fill Frame Option
When enabled, patterns extend beyond canvas edges, allowing you to pan around larger patterns:
- On: Pattern extends beyond canvas, move to pan
- Off: Pattern is clipped to canvas boundaries
Export Options
Export Formats
PNG Export
High-quality raster image with transparency support. Perfect for web and print.
SVG Export
Scalable vector graphics. Great for logos and graphics that need to scale.
HTML Export
Complete HTML file with embedded patterns. Share as standalone web pages.
CSS Data
CSS code for patterns. Use in web development and design projects.
Export Settings
- Export Size: Choose from Screen, Letter, Legal, Tabloid, or Custom dimensions
- Print Resolution: Select DPI (96, 150, 300, or 600) for print quality
- Export Layers: Export all layers or just the selected layer
- Print Margins: Set margins for print-ready exports
Advanced Features
Canvas Background Options
- Color: Solid color background with color picker
- Transparent: Transparent background for overlays
- Checkerboard: Visual transparency indicator
Image Layer Features
- File Support: PNG, JPG, GIF, WebP with alpha channel
- Opacity Control: Adjust transparency from 0% to 100%
- Blend Modes: Normal, Multiply, Darken for different effects
- Color Inversion: Reverse colors for unique effects
Pattern-Specific Options
- Radial Patterns: Tapered lines, center/outer width controls
- Sine Waves: Adjustable frequency and amplitude
- Circle Patterns: Diameter control and spacing options
Tips & Best Practices
Troubleshooting
Common Issues
- Pattern Not Moving: Make sure you have a layer selected (highlighted in the layer pills)
- Slow Performance: Reduce the number of layers or lower pattern density for better performance
- Touch Not Working: Ensure you're using a touch-enabled device and try refreshing the page
- Export Issues: Try a different export format or reduce canvas size for large exports
Performance Tips
- Use fewer layers for complex patterns
- Lower line density (frequency) for better performance
- Close other browser tabs to free up memory
- Use smaller canvas sizes for mobile devices
About Moiré Patterns
Moiré patterns are interference patterns that occur when two or more regular patterns overlap. They're commonly used in:
- Art & Design: Creating visual interest and optical illusions
- Printing: Quality control and color separation
- Science: Measuring small displacements and deformations
- Technology: Anti-counterfeiting and security features
This generator makes it easy to experiment with moiré effects by providing intuitive controls for creating and manipulating geometric patterns.