{"id":28444245,"url":"https://github.com/bence-toth/triangle-mosaic","last_synced_at":"2025-07-22T19:05:30.131Z","repository":{"id":46225785,"uuid":"285890281","full_name":"bence-toth/triangle-mosaic","owner":"bence-toth","description":"Generate colorful triangle-based SVG patterns with ease.","archived":false,"fork":false,"pushed_at":"2021-11-05T11:28:54.000Z","size":5021,"stargazers_count":6,"open_issues_count":28,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-07T12:48:56.875Z","etag":null,"topics":["pattern-generation","svg","triangles"],"latest_commit_sha":null,"homepage":"http://bence-toth.github.io/triangle-mosaic","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bence-toth.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-07T17:55:50.000Z","updated_at":"2024-02-02T03:38:07.000Z","dependencies_parsed_at":"2022-08-31T02:41:41.498Z","dependency_job_id":null,"html_url":"https://github.com/bence-toth/triangle-mosaic","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/bence-toth/triangle-mosaic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bence-toth%2Ftriangle-mosaic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bence-toth%2Ftriangle-mosaic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bence-toth%2Ftriangle-mosaic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bence-toth%2Ftriangle-mosaic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bence-toth","download_url":"https://codeload.github.com/bence-toth/triangle-mosaic/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bence-toth%2Ftriangle-mosaic/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266554324,"owners_count":23947309,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["pattern-generation","svg","triangles"],"created_at":"2025-06-06T09:08:17.693Z","updated_at":"2025-07-22T19:05:30.102Z","avatar_url":"https://github.com/bence-toth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Triangle mosaic\n\nGenerate colorful triangle-based SVG patterns (like this 👇) with ease.\n\n\u003cimg src=\"https://raw.githubusercontent.com/bence-toth/triangle-mosaic/master/readme-assets/header.jpg\" alt=\"Example output with triangles\" style=\"width: 100%\" /\u003e\n\n## Demo\n\nYou can try Triangle mosaic [on the demo page](http://bence-toth.github.io/triangle-mosaic).\n\n\n## Installation\n\nTo install `triangle-mosaic`, run:\n\n```sh\nnpm install triangle-mosaic\n```\n\n\n## Quick start\n\nYou can import `TriangleMosaic` like this:\n\n```js\nimport TriangleMosaic from 'triangle-mosaic'\n```\n\n`TriangleMosaic` is a class and it can be instantiated like this:\n\n```js\nconst myMosaic = new TriangleMosaic(options)\n```\n\nThen you can call the `render` method which returns the SVG code as a string:\n\n```js\nconst mySvgCode = myMosaic.render()\n```\n\nYou can also change the options without losing the random-generated variance by calling the `rehydrate` method with the new options. This will also return the new SVG code as a string:\n\n```js\nconst myNewSvgCode = myMosaic.rehydrate(newOptions)\n```\n\n\n## Options\n\nThe `options` parameter of both the constructor and the `rehydrate` method is an object with various options that influence the outcome.\n\nIf you haven’t yet, maybe it’s a good time to check out [the demo page](http://bence-toth.github.io/triangle-mosaic) to get a good overview of the features.\n\n\n### Dimensions and number of tiles\n\n| Member name    | Description                        |\n|----------------|------------------------------------|\n| `width`        | The width of the output in pixels  |\n| `height`       | The height of the output in pixels |\n| `xResolution`  | The number of tiles horizontally   |\n| `yResolution`  | The number of tiles vertically     |\n\nFor example:\n\n```js\nconst options = {\n  ...,\n  width:  640,\n  height: 480,\n  xResolution: 16,\n  yResolution: 12,\n  ...\n}\n```\n\nThe options `xResolution` and `yResolution` are the only options which cannot be rehydrated without losing the random-generated variance of tiles.\n\n\n### Variance\n\n| Member name            | Description                                                 |\n|------------------------|-------------------------------------------------------------|\n| `shapeFuzz`            | Variance factor of grid points (0-1)                        |\n| `colorFuzz.hue`        | Variance factor of triangle color hue (0-1)                 |\n| `colorFuzz.saturation` | Variance factor of triangle color saturation (0-1)          |\n| `colorFuzz.lightness`  | Variance factor of triangle color lightness (0-1)           |\n| `colorFuzz.alpha`      | Variance factor of triangle color alpha (0-1)               |\n| `diagonals`            | Either `'nw-se'`, `'ne-sw'`, `'alternating'`, or `'random'` |\n\nVariance options control how the triangles can deviate from their original shape and coloring.\n\nThe option `shapeFuzz` controls how far the grid points may venture from their original location.\n\nParameters that belong the object `colorFuzz` control how much the triangle colors may deviate from their original color. This can be controlled along all four axes of the HSLA color representation.\n\nThe option `diagonals` controls which diagonals of the squares of the grid are used:\n- `'nw-se'` draws the diagonals from the top left corners to the bottom right corners (North-West - South-East)\n- `'ne-sw'` draws the diagonals from the top right corners to the bottom left corners (North-East - South-West)\n- `'alternating'` draws diagonals alternating, so that no two neighboring squares have the same diagonal\n- `'random'` draws diagonals randomly\n\nFor example:\n\n```js\nconst options = {\n  ...,\n  shapeFuzz: 0.65,\n  colorFuzz: {\n    hue:        0.1,\n    saturation: 0.1,\n    lightness:  0.1,\n    alpha:      0\n  },\n  diagonals: 'nw-se',\n  ...\n}\n```\n\n\n### Coloring\n\nThe option `coloring` will decide the original color of the triangles. There are various possibilities here.\n\n\n#### Coloring mode\n\n| Member name     | Description   |\n|-----------------|---------------|\n| `coloring.mode` | Coloring mode |\n\nThe option `coloring.mode` will decide how the rest of the `coloring` object is interpreted.\n\nThe following coloring modes are supported:\n- Single color (`single`)\n- Linear gradient (`linearGradient`)\n- Radial gradient (`radialGradient`)\n- Color spots (`spots`)\n\nTheir additional options of the `coloring` object are detailed below for each of the coloring modes.\n\n\n#### Single color\n\n| Member name      | Description                     |\n|------------------|---------------------------------|\n| `coloring.color` | Base color (hexadecimal format) |\n\nThe single color mode only takes a color in hexadecimal color format:\n\n```js\nconst options = {\n  ...,\n  coloring: {\n    mode:  'single',\n    color: '#ffc107'\n  },\n  ...\n}\n```\n\n\n#### Linear and radial gradient\n\n| Member name      | Description                                                                       |\n|------------------|-----------------------------------------------------------------------------------|\n| `coloring.start` | An object with the location of the gradient’s starting point                      |\n| `coloring.end`   | An object with the location of the gradient’s end point                           |\n| `coloring.stops` | An array describing all stops of the gradient.                                    |\n\nThe linear and radial gradient color modes require three additional options in the `coloring` object:\n\nThe options `coloring.start` and `coloring.end` are object that have members `x` and `y` containing the horizontal and vertical coordinates of the gradient’s starting and end points.\n\nThe `coloring.stops` option is an array of arrays, where the elements have two items: a location (0-1) and a color (in hexadecimal color format). The locations of the first and the last spot must always be 0 and 1, respectively.\n\nFor example:\n\n```js\nconst options = {\n  ...,\n  coloring: {\n    mode: 'linearGradient', // or 'radialGradient'\n    start: {\n      x: 0,\n      y: 0\n    },\n    end: {\n      x: 1280,\n      y: 720\n    },\n    stops: [\n      [0,    '#9c27b0'],\n      [0.25, '#03a9f4'],\n      [0.5,  '#8bc34a'],\n      [0.75, '#ffc107'],\n      [1,    '#f44336']\n    ]\n  },\n  ...\n}\n```\n\n\n#### Spots\n\n| Member name              | Description                                    |\n|--------------------------|------------------------------------------------|\n| `coloring.spots`         | An array of objects describing all color spots |\n| `coloring.spotIntensity` | The default intensity of spots                 |\n\n\nThe `coloring.spots` option is an array of color spots, where the elements have four members:\n\n- `x` and `y` containing the horizontal and vertical coordinates of the color spot\n\n- `color` containing the spot’s color in hexadecimal color format\n\n- `intensity` which represents how much this light spot contributes to individual triangle colors as compared to other spots (0-1)\n\nThe `coloring.spotIntensity` (0-1) option sets the intensity for spots that don’t have their individual intensity specified.\n\nFor example:\n\n```js\nconst options = {\n  ...,\n  coloring: {\n    mode: 'spots',\n    spotIntensity: 0.5,\n    spots: [\n      {\n        x: 0,\n        y: 0,\n        color: '#ffc107',\n        intensity: 0.65\n      },\n      {\n        x: 1280,\n        y: 0,\n        color: '#f44336'\n        // intensity falls back to 0.5\n      },\n      {\n        x: 640,\n        y: 720,\n        color: '#2196f3',\n        intensity: 0.6\n      }\n    ]\n  },\n  ...\n}\n```\n\n\n### Full example\n\n```js\nimport TriangleMosaic from 'triangle-mosaic'\n\nlet options = {\n  width:  640,\n  height: 480,\n  xResolution: 12,\n  yResolution: 8,\n  shapeFuzz: 0.65,\n  colorFuzz: {\n    hue:        0.1,\n    saturation: 0.1,\n    lightness:  0.1,\n    alpha:      0\n  },\n  diagonals: 'nw-se',\n  coloring: {\n    mode: 'linearGradient',\n    start: {\n      x: 0,\n      y: 0\n    },\n    end: {\n      x: 640,\n      y: 480\n    },\n    stops: [\n      {\n        id: 0,\n        location: 0,\n        color: '#9c27b0'\n      },\n      {\n        id: 1,\n        location: 0.25,\n        color: '#03a9f4'\n      },\n      {\n        id: 2,\n        location: 0.5,\n        color: '#8bc34a'\n      },\n      {\n        id: 3,\n        location: 0.75,\n        color: '#ffc107'\n      },\n      {\n        id: 4,\n        location: 1,\n        color: '#f44336'\n      }\n    ]\n  }\n}\n\n// Render SVG\nconst myMosaic = new TriangleMosaic(options)\nconst mySvgCode = myMosaic.render()\n\nconsole.log(mySvgCode)\n\n// Change options and render SVG again\noptions.width = 720\noptions.coloring.end.x = 720\noptions.shapeFuzz = 0.5\noptions.colorFuzz.hue = 0\n\nconst myNewSvgCode = myMosaic.rehydrate(options)\n\nconsole.log(myNewSvgCode)\n```\n\n\n## License\n\nTriangle Mosaic is [licensed under MIT](./LICENSE).\n\nThe images you create with the library or web-based tool are yours and you may license them in any way you see fit.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbence-toth%2Ftriangle-mosaic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbence-toth%2Ftriangle-mosaic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbence-toth%2Ftriangle-mosaic/lists"}