{"id":13700370,"url":"https://github.com/mistic100/tinygradient","last_synced_at":"2025-05-16T00:06:23.609Z","repository":{"id":415620,"uuid":"20960509","full_name":"mistic100/tinygradient","owner":"mistic100","description":"Fast and small gradients manipulation, built on top of TinyColor","archived":false,"fork":false,"pushed_at":"2025-02-18T18:14:47.000Z","size":115,"stargazers_count":232,"open_issues_count":0,"forks_count":24,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-11T14:01:44.572Z","etag":null,"topics":["colors","gradient"],"latest_commit_sha":null,"homepage":"https://mistic100.github.io/tinygradient","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/mistic100.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2014-06-18T12:00:51.000Z","updated_at":"2025-03-27T15:42:46.000Z","dependencies_parsed_at":"2024-01-03T06:49:23.580Z","dependency_job_id":"74499b04-9dde-4793-9276-4f22a0caea2a","html_url":"https://github.com/mistic100/tinygradient","commit_stats":{"total_commits":64,"total_committers":14,"mean_commits":4.571428571428571,"dds":0.546875,"last_synced_commit":"4ddacc7428c084f4ce9bb892ad9ecefe72359cc1"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mistic100%2Ftinygradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mistic100%2Ftinygradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mistic100%2Ftinygradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mistic100%2Ftinygradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mistic100","download_url":"https://codeload.github.com/mistic100/tinygradient/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254442854,"owners_count":22071878,"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","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":["colors","gradient"],"created_at":"2024-08-02T20:00:54.930Z","updated_at":"2025-05-16T00:06:23.581Z","avatar_url":"https://github.com/mistic100.png","language":"JavaScript","readme":"# tinygradient\n\n[![npm version](https://img.shields.io/npm/v/tinygradient.svg?style=flat-square)](https://www.npmjs.com/package/tinygradient)\n[![jsDelivr CDN](https://data.jsdelivr.com/v1/package/npm/tinygradient/badge)](https://www.jsdelivr.com/package/npm/tinygradient)\n[![GZIP size](https://img.shields.io/bundlephobia/minzip/tinygradient?label=gzip%20size)](https://bundlephobia.com/result?p=tinygradient)\n[![Build Status](https://github.com/mistic100/tinygradient/workflows/CI/badge.svg)](https://github.com/mistic100/tinygradient/actions)\n\nEasily generate color gradients with an unlimited number of color stops and steps. \n\n[Live demo](https://mistic100.github.io/tinygradient/)\n\n## Installation\n\n```\n$ npm install tinygradient\n```\n\n### Dependencies\n\n- [TinyColor](https://github.com/bgrins/TinyColor)\n\n## Usage\n\nThe gradient can be generated using RGB or HSV interpolation. HSV usually produces brighter colors.\n\n### Initialize gradient\n\nThe `tinygradient` constructor takes a list or an array of colors stops.\n\n```javascript\n// using varargs\nconst gradient = tinygradient('red', 'green', 'blue');\n\n// using array\nconst gradient = tinygradient([\n  '#ff0000',\n  '#00ff00',\n  '#0000ff'\n]);\n```\n\nThe colors are parsed with TinyColor, [multiple formats are accepted](https://github.com/bgrins/TinyColor/blob/master/README.md#accepted-string-input).\n\n```javascript\nconst gradient = tinygradient([\n  tinycolor('#ff0000'),       // tinycolor object\n  {r: 0, g: 255, b: 0},       // RGB object\n  {h: 240, s: 1, v: 1, a: 1}, // HSVa object\n  'rgb(120, 120, 0)',         // RGB CSS string\n  'gold'                      // named color\n]);\n```\n\nYou can also specify the position of each color stop (between `0` and `1`). If no position is specified, stops are distributed equidistantly.\n\n```javascript\nconst gradient = tinygradient([\n  {color: '#d8e0de', pos: 0},\n  {color: '#255B53', pos: 0.8},\n  {color: '#000000', pos: 1}\n]);\n```\n\n### Generate gradient\n\nEach method takes at least the number of desired steps.\n\u003e The generated gradients might have one more step in certain conditions.\n\n```javascript\n// RGB interpolation\nconst colorsRgb = gradient.rgb(9);\n```\n![rgb](https://raw.githubusercontent.com/mistic100/tinygradient/master/images/rgb.png)\n\n```javascript\n// HSV clockwise interpolation\nconst colorsHsv = gradient.hsv(9);\n```\n![hsv](https://raw.githubusercontent.com/mistic100/tinygradient/master/images/hsv.png)\n\n```javascript\n// HSV counter-clockwise interpolation\nconst colorsHsv = gradient.hsv(9, true);\n```\n![hsv2](https://raw.githubusercontent.com/mistic100/tinygradient/master/images/hsv2.png)\n\nThere are also two methods which will automatically choose between clockwise and counter-clockwise.\n\n```javascript\n// HSV interpolation using shortest arc between colors\nconst colorsHsv = gradient.hsv(9, 'short');\n\n// HSV interpolation using longest arc between colors\nconst colorsHsv = gradient.hsv(9, 'long');\n```\n\nEach method returns an array of TinyColor objects, [see available methods](https://github.com/bgrins/TinyColor/blob/master/README.md#methods).\n\n### Get CSS gradient string\n\nThe `css` method will output a valid W3C string (without vendors prefix) to use with `background-image` CSS property.\n\n```javascript\n// linear gradient to right (default)\nconst gradientStr = gradient.css();\n\n// radial gradient ellipse at top left\nconst gradientStr = gradient.css('radial', 'farthest-corner ellipse at top left');\n```\n\n### Get color at a specific position\n\nReturns a single TinyColor object from a defined position in the gradient (from 0 to 1).\n\n```javascript\n// with RGB interpolation\ncolorAt55Percent = gradient.rgbAt(0.55);\n\n// with HSV interpolation\ncolorAt55Percent = gradient.hsvAt(0.55);\n```\n\n### Reversing gradient\n\nReturns a new instance of TinyGradient with reversed colors.\n\n```javascript\nconst reversedGradient = gradient.reverse();\n```\n\n### Loop the gradient\n\nReturns a new instance of TinyGradient with looped colors.\n\n```javascript\nconst loopedGradient = gradient.loop();\n```\n\n### Position-only stops\n\nI is possible to define stops with the `pos` property only and no `color`. This allows to define the position of the mid-point between the previous and the next stop.\n\n```js\nconst gradient = tinygradient([\n  {color: 'black', pos: 0},\n  {pos: 0.8}, // #808080 will be at 80% instead of 50%\n  {color: 'white', pos: 1}\n]);\n```\n\n\n## License\nThis library is available under the MIT license.\n","funding_links":[],"categories":["Tools","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmistic100%2Ftinygradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmistic100%2Ftinygradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmistic100%2Ftinygradient/lists"}