Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 16 hours 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 (4 months ago)
- Default Branch: main
- Last Pushed: 2024-11-04T18:16:14.000Z (13 days ago)
- Last Synced: 2024-11-04T19:25:38.368Z (13 days ago)
- Topics: colours, gradients, nextjs, pattern-generator, patterns, png, svg, web-app
- Language: TypeScript
- Homepage:
- Size: 360 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
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
```
Run the development server:
```bash
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## 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.