Skip to content

Latest commit

 

History

History
86 lines (55 loc) · 2.55 KB

README.md

File metadata and controls

86 lines (55 loc) · 2.55 KB
Raw

Pattern Generator

This is a Next.js 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:

git clone https://github.com/SmolSoftBoi/pattern-generator
cd pattern-generator

Install the dependencies:

yarn install

Run the development server:

yarn dev

Open 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:

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any changes.

Acknowledgements