Tessera

Browser based tool for generating unique mosaic patterns using Perlin noise.

Generate your own designs here: https://grid-tool-vanilla.vercel.app. Be careful while exporting large and details patterns, they can get more complex than your vector program can handle 💣

Features

• Interactive Grid Controls: Manipulate X-axis, Y-axis, and color parameters in real-time
• Shape Options
• SVG Export
• Real-time Preview

Setup

Try it now: https://grid-tool-vanilla.vercel.app

Or run locally:

# Clone the repository
git clone https://github.com/yourusername/tessera.git

# Navigate to project directory
cd tessera

# Install dependencies
npm install

# Start development server
npm run dev

Export Notes

Be mindful when exporting large or detailed patterns - complex SVGs can be demanding on vector editing software. Consider these guidelines:

Technical Details

• Built with vanilla JavaScript
• Uses Perlin noise algorithms for pattern generation
• SVG-based rendering system
• 98.css for retro UI styling

Examples