{"id":20687920,"url":"https://github.com/smolsoftboi/pattern-generator","last_synced_at":"2026-04-27T03:32:17.402Z","repository":{"id":251500860,"uuid":"837589943","full_name":"SmolSoftBoi/pattern-generator","owner":"SmolSoftBoi","description":"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.","archived":false,"fork":false,"pushed_at":"2026-01-16T22:58:46.000Z","size":480,"stargazers_count":2,"open_issues_count":11,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-22T03:33:55.631Z","etag":null,"topics":["colours","gradients","nextjs","pattern-generator","patterns","png","svg","web-app"],"latest_commit_sha":null,"homepage":"","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SmolSoftBoi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-08-03T12:25:07.000Z","updated_at":"2026-01-05T14:17:52.000Z","dependencies_parsed_at":"2025-01-21T10:35:10.474Z","dependency_job_id":null,"html_url":"https://github.com/SmolSoftBoi/pattern-generator","commit_stats":null,"previous_names":["smolsoftboi/pattern-generator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SmolSoftBoi/pattern-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmolSoftBoi%2Fpattern-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmolSoftBoi%2Fpattern-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmolSoftBoi%2Fpattern-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmolSoftBoi%2Fpattern-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SmolSoftBoi","download_url":"https://codeload.github.com/SmolSoftBoi/pattern-generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmolSoftBoi%2Fpattern-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32321445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"online","status_checked_at":"2026-04-27T02:00:06.769Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["colours","gradients","nextjs","pattern-generator","patterns","png","svg","web-app"],"created_at":"2024-11-16T22:58:37.205Z","updated_at":"2026-04-27T03:32:17.395Z","avatar_url":"https://github.com/SmolSoftBoi.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pattern Generator\n\nThis is a [Next.js](https://nextjs.org/) project.\n\n## Overview\n\nPattern 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.\n\n## Features\n\n- Generate patterns with customizable sizes.\n- Choose from different color options for X and Y axes.\n- Apply linear or radial gradients.\n- Download patterns in PNG or SVG formats.\n- Interactive UI for real-time pattern customization.\n\n## Getting Started\n\nFirst, clone the repository:\n\n```bash\ngit clone https://github.com/SmolSoftBoi/pattern-generator\ncd pattern-generator\n```\n\nInstall the dependencies:\n\n```bash\nyarn install\n```\n\nThis project uses **Yarn** as the canonical package manager and `yarn.lock` as the canonical lockfile.\n\nRun the development server:\n\n```bash\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Dependency maintenance\n\nThis repository uses Dependabot for predictable, low-noise dependency updates.\n\n- Config: `.github/dependabot.yml`\n- Cadence: weekly (Monday 07:30, Europe/London)\n- Ecosystems: npm (JavaScript deps at repo root) + GitHub Actions\n- Labels: `dependencies`\n- Commit prefixes: `deps` (JavaScript) and `ci` (GitHub Actions), both including scope\n- Grouping: JavaScript non-major updates are grouped into prod vs dev PRs\n\n## Usage\n\nYou can start editing the page by modifying `src/app/page.tsx`. The page auto-updates as you edit the file.\n\n## Project Structure\n\n- `src/app/components/Pattern.tsx`: Main component for pattern generation.\n- `src/app/pattern.ts`: Contains the logic for pattern generation and customization.\n- `src/app/page.tsx`: Entry point for the application.\n- `src/app/layout.tsx`: Layout component for the application.\n- `src/app/globals.scss`: Global styles for the application.\n- `src/app/page.module.css`: CSS module for the main page.\n\n## Customization\n\n### Color Options\n\n- **X Color Options**: Choose between random colors or a custom palette.\n- **Y Color Options**: Match X colors, use random colors, or a custom palette.\n- **Foreground Color**: Option to set a foreground color with minimum contrast.\n\n### Gradient Types\n\n- **X Gradient Type**: Linear or radial gradient for X axis.\n- **Y Gradient Type**: Match X gradient, linear, or radial gradient for Y axis.\n\n### Pattern Size\n\n- Customize the width and height of the pattern.\n- Set minimum width and height constraints.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request for any changes.\n\n## Acknowledgements\n\n- [trianglify](https://github.com/qrohlf/trianglify) for the pattern generation library.\n- [chroma-js](https://gka.github.io/chroma.js/) for color manipulation.\n- [react-bootstrap](https://react-bootstrap.github.io/) for UI components.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmolsoftboi%2Fpattern-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmolsoftboi%2Fpattern-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmolsoftboi%2Fpattern-generator/lists"}