A web-based Mondrian-style art generator inspired by the geometric abstract paintings of Piet Mondrian. Create unique compositions featuring rectangles, customizable colors, and bold lines.
- Interactive Art Generation: Create unique Mondrian-style compositions with adjustable parameters
- Customizable Settings:
- Complexity levels (2-15)
- Multiple color palettes with intelligent color generation
- Border width and color customization
- External border and corner radius controls
- Advanced split ratios and probability settings
- Paint Mode: Click rectangles to cycle through colors interactively
- Multiple Export Formats: Download as SVG, PNG, or WebP
- URL Sharing: Share your creations via URL with all settings preserved
- Fullscreen Mode: View your art in fullscreen with keyboard and touch controls
- Responsive Design: Works seamlessly on desktop and mobile devices
Visit getmondrian.com to try it out!
- Node.js 18+ and npm
npm installnpm run devOpen http://localhost:3000 to view the app.
npm run build
npm startThe generator uses a recursive subdivision algorithm with a seeded random number generator to create reproducible patterns. Parameters like complexity, split ratios, and probabilities control how the canvas is divided into rectangles, each filled with a color from your chosen palette.
- Framework: Next.js 15 with React 19
- Styling: Tailwind CSS 4
- Language: TypeScript
- Icons: Lucide React
- Deployment: Optimized for Vercel
npm run dev- Start development server with Turbopacknpm run build- Build for productionnpm start- Start production servernpm run lint- Run ESLintnpm run format- Format code with Prettiernpm run type-check- Run TypeScript type checking
Contributions are welcome! Please feel free to submit a Pull Request.
MIT
Created by Tim Mikeladze
If you enjoy this project, consider buying me a coffee!