https://github.com/smolsoftboi/pattern-generator
Pattern Generator is a Next.js web app for creating customizable patterns with various colors, gradients, and sizes. It supports real-time customization and pattern downloads in PNG or SVG formats.
https://github.com/smolsoftboi/pattern-generator
colours gradients nextjs pattern-generator patterns png svg web-app
Last synced: about 2 months ago
JSON representation
Pattern Generator is a Next.js web app for creating customizable patterns with various colors, gradients, and sizes. It supports real-time customization and pattern downloads in PNG or SVG formats.
- Host: GitHub
- URL: https://github.com/smolsoftboi/pattern-generator
- Owner: SmolSoftBoi
- Created: 2024-08-03T12:25:07.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-16T22:58:46.000Z (5 months ago)
- Last Synced: 2026-01-22T03:33:55.631Z (5 months ago)
- Topics: colours, gradients, nextjs, pattern-generator, patterns, png, svg, web-app
- Language: Shell
- Homepage:
- Size: 469 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pattern Generator
This is a [Next.js](https://nextjs.org/) project.
## Overview
Pattern Generator is a web application that allows users to generate and customize patterns using various color options, gradients, and sizes. The application leverages the `trianglify` library to create visually appealing patterns.
## Features
- Generate patterns with customizable sizes.
- Choose from different color options for X and Y axes.
- Apply linear or radial gradients.
- Download patterns in PNG or SVG formats.
- Interactive UI for real-time pattern customization.
## Getting Started
First, clone the repository:
```bash
git clone https://github.com/SmolSoftBoi/pattern-generator
cd pattern-generator
```
Install the dependencies:
```bash
yarn install
```
This project uses **Yarn** as the canonical package manager and `yarn.lock` as the canonical lockfile.
Run the development server:
```bash
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Dependency maintenance
This repository uses Dependabot for predictable, low-noise dependency updates.
- Config: `.github/dependabot.yml`
- Cadence: weekly (Monday 07:30, Europe/London)
- Ecosystems: npm (JavaScript deps at repo root) + GitHub Actions
- Labels: `dependencies`
- Commit prefixes: `deps` (JavaScript) and `ci` (GitHub Actions), both including scope
- Grouping: JavaScript non-major updates are grouped into prod vs dev PRs
## Usage
You can start editing the page by modifying `src/app/page.tsx`. The page auto-updates as you edit the file.
## Project Structure
- `src/app/components/Pattern.tsx`: Main component for pattern generation.
- `src/app/pattern.ts`: Contains the logic for pattern generation and customization.
- `src/app/page.tsx`: Entry point for the application.
- `src/app/layout.tsx`: Layout component for the application.
- `src/app/globals.scss`: Global styles for the application.
- `src/app/page.module.css`: CSS module for the main page.
## Customization
### Color Options
- **X Color Options**: Choose between random colors or a custom palette.
- **Y Color Options**: Match X colors, use random colors, or a custom palette.
- **Foreground Color**: Option to set a foreground color with minimum contrast.
### Gradient Types
- **X Gradient Type**: Linear or radial gradient for X axis.
- **Y Gradient Type**: Match X gradient, linear, or radial gradient for Y axis.
### Pattern Size
- Customize the width and height of the pattern.
- Set minimum width and height constraints.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
## Contributing
Contributions are welcome! Please open an issue or submit a pull request for any changes.
## Acknowledgements
- [trianglify](https://github.com/qrohlf/trianglify) for the pattern generation library.
- [chroma-js](https://gka.github.io/chroma.js/) for color manipulation.
- [react-bootstrap](https://react-bootstrap.github.io/) for UI components.