{"id":13477509,"url":"https://github.com/skratchdot/infinite-gradients","last_synced_at":"2025-04-10T11:24:10.234Z","repository":{"id":57273634,"uuid":"41738590","full_name":"skratchdot/infinite-gradients","owner":"skratchdot","description":"An HTML experiment for generating randomly created CSS3 gradients (both linear and radial)","archived":false,"fork":false,"pushed_at":"2018-09-05T00:13:13.000Z","size":240,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-23T10:05:11.911Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://projects.skratchdot.com/infinite-gradients/","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/skratchdot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-01T12:57:50.000Z","updated_at":"2024-04-28T16:58:08.000Z","dependencies_parsed_at":"2022-09-17T02:23:09.186Z","dependency_job_id":null,"html_url":"https://github.com/skratchdot/infinite-gradients","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skratchdot%2Finfinite-gradients","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skratchdot%2Finfinite-gradients/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skratchdot%2Finfinite-gradients/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skratchdot%2Finfinite-gradients/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skratchdot","download_url":"https://codeload.github.com/skratchdot/infinite-gradients/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248208612,"owners_count":21065203,"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":[],"created_at":"2024-07-31T16:01:43.813Z","updated_at":"2025-04-10T11:24:10.209Z","avatar_url":"https://github.com/skratchdot.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Infinite Gradients\n\nAn HTML experiment built on [React](https://facebook.github.io/react/)\nfor generating randomly created CSS3 gradients (both linear and radial).\n\n[Infinite Gradients](https://github.com/skratchdot/infinite-gradients)\ncomes in 3 forms (\na [website](http://projects.skratchdot.com/infinite-gradients/),\na [command line utility](#command-line-utility),\nand a [node.js library](#node-js-library)\n).\n\n\n## Website\n\nThe [website](http://projects.skratchdot.com/infinite-gradients/) is built\non [React](http://facebook.github.io/react/), and allows you to pause and start an\ninfinite stream of gradients.  You can toggle features on and off by clicking on\nitems in the header.  You can lock features such as:\n\n- **linear gradients**: angle, speed, offset, colors 1-4\n- **radial gradients**: position X \u0026 Y, speed, offset, colors 1-4\n\nYou can toggle the random generation on and off by clicking either the mouse button,\nor by hitting your spacebar.\n\n- [View the website](http://projects.skratchdot.com/infinite-gradients/)\n\n### Website Keyboard Controls\n\n| Feature    | Toggle Key | Description                                              |\n|:----------:|:----------:|----------------------------------------------------------|\n| Status     | Space Bar  | Pauses all features so you can look at the gradient      |\n| Type       | T          | Toggles between 'linear' and 'radial' gradients          |\n| Offset     | O          | Moves the offset of the gradient                         |\n| Speed      | S or 0-9   | Determines how fast the offset changes                   |\n| Angle      | A          | Determines the angle (in degrees) of the linear gradient |\n| X Position | X          | Determines the x-origin of the radial gradient           |\n| Y Position | Y          | Determines the y-origin of the radial gradient           |\n| Color 1    | V          | Locks/Unlocks Color 1 from being randomly generated      |\n| Color 2    | B          | Locks/Unlocks Color 1 from being randomly generated      |\n| Color 3    | N          | Locks/Unlocks Color 1 from being randomly generated      |\n| Color 4    | M          | Locks/Unlocks Color 1 from being randomly generated      |\n| Randomize  | R          | Randomizes the current settings\n\n\n## Command Line Utility\n\nInfinite Gradients is available as a command line tool that outputs random\n(or specific) CSS gradient functions.  You can install it by running:\n\n```bash\nnpm install -g infinite-gradients\n```\n\nAfter installation, you will have a global executable called `infinite-gradients`.\n\n### Help\n\nTo print help information, run: `infinite-gradients --help`\n\n```bash\n  Usage: infinite-gradients [options]\n\n  Options:\n\n    -h, --help             output usage information\n    -v, --version          output the version number\n    -t, --type \u003ctype\u003e      type of gradient: linear or radial\n    -a, --angle \u003cangle\u003e    angle of linear gradient in degrees (0-360)\n    -x, --x \u003cx\u003e            x coordinate of radial gradient center (% between 0-1)\n    -y, --y \u003cy\u003e            y coordinate of radial gradient center (% between 0-1)\n    -o, --offset \u003coffset\u003e  the offset of the gradient (between 0-100)\n    -c, --colors \u003ccolors\u003e  a list of 4 css colors\n```\n\n\n### Example\n\nGenerate a random gradient:\n```bash\n$ infinite-gradients\nlinear-gradient(303.6deg, #c621e9 -26.73%, #1ab128 73.27%, #3366ae 173.27%, #0eac81 273.27%)\n```\n\nDo it again and it's different:\n```bash\n$ infinite-gradients\nradial-gradient(circle at 52.7% 59.0%, #debe11 -60.07%, #fcf501 39.93%, #ecae8f 139.93%, #23f5d1 239.93%)\n```\n\nNow you can make sure that it's a linear gradient:\n```bash\n$infinite-gradients --type linear\nlinear-gradient(239.2deg, #35cdca -13.53%, #2bc3bf 86.47%, #8146cb 186.47%, #ae06f9 286.47%)\n```\n\nNow you can specify the colors and angle:\n```bash\n$ infinite-gradients --type linear --angle 55.4 --colors 123123,ff00ff,9911f5,a36b3f\nlinear-gradient(55.4deg, #123123 -39.68%, #ff00ff 60.32%, #9911f5 160.32%, #a36b3f 260.32%)\n```\n\n\n## Node JS Library\n\nYou can use the infinite-gradients functions within node by running:\n\n```bash\nnpm install --save infinite-gradients\n```\n\nand including the library in your code:\n\n```javascript\nvar infiniteGradients = require('infinite-gradients');\n```\n\n\nThe Infinite Gradients library contains a few functions for generating\ngradients, and a few helper functions that may or may not be useful to you.\n\nThe **API** is described below:\n\n\n### infiniteGradients.toDegrees(radians)\n\nConverts from radians to degrees\n\n**Parameters**\n\n**radians**: , the value in radians\n\n**Returns**: , the value in degrees\n\n**Example**:\n```js\ninfiniteGradients.toDegrees(Math.PI); // returns: 180\ninfiniteGradients.toDegrees(0); // returns: 0\n```\n\n\n### infiniteGradients.getAngle(x1, y1, x2, y2)\n\nGet the angle between 2 points with x/y coordinates\n\n**Parameters**\n\n**x1**: , the x coordinate of point 1\n\n**y1**: , the y coordinate of point 1\n\n**x2**: , the x coordinate of point 2\n\n**y2**: , the y coordinate of point 2\n\n**Returns**: , the angle in degrees\n\n**Example**:\n```js\ninfiniteGradients.getAngle(0,0,0,1); // returns: 90\ninfiniteGradients.getAngle(0,0,10,10); // returns 45\n```\n\n\n### infiniteGradients.getDistance(x1, y1, x2, y2)\n\nGet the distance between 2 points with x/y coordinates\n\n**Parameters**\n\n**x1**: , the x coordinate of point 1\n\n**y1**: , the y coordinate of point 1\n\n**x2**: , the x coordinate of point 2\n\n**y2**: , the y coordinate of point 2\n\n**Returns**: , the distance between the 2 points\n\n**Example**:\n```js\ninfiniteGradients.getDistance(0,0,10,10); // returns: 14.142135623730951\ninfiniteGradients.getDistance(0,0,0,5); // returns: 5\n```\n\n\n### infiniteGradients.toHex(num)\n\nConvert a decimal to hexidecimal format. pads to at least 2 digits.\n\n**Parameters**\n\n**num**: , The number in decimal format\n\n**Returns**: , the number converted to hexidecimal format\n\n**Example**:\n```js\ninfiniteGradients.toHex(255); // returns: 'ff'\ninfiniteGradients.toHex(11); // returns: '0b'\n```\n\n\n### infiniteGradients.floatBetween(min, max)\n\nReturns a random float between min (inclusive) and max (exclusive)\n\n**Parameters**\n\n**min**: , the minimum number (inclusive)\n\n**max**: , the maximum number (exclusive)\n\n**Returns**: , a random float between min and max\n\n**Example**:\n```js\ninfiniteGradients.floatBetween(20,21); // returned: 20.045959329465404\ninfiniteGradients.floatBetween(0,100); // returned: 77.16259211301804\n```\n\n\n### infiniteGradients.intBetween(min, max)\n\nReturns a random integer between min (inclusive) and max (inclusive)\n\n**Parameters**\n\n**min**: , the minimum number (inclusive)\n\n**max**: , the maximum number (inclusive)\n\n**Returns**: , a random integer between min and max\n\n**Example**:\n```js\ninfiniteGradients.intBetween(50,55); // returned: 52\ninfiniteGradients.intBetween(0,100); // returned: 86\n```\n\n\n### infiniteGradients.randomColor()\n\nReturn a random RGB color in hex format\n\n**Returns**: , a random RGB color in hex string format\n\n**Example**:\n```js\ninfiniteGradients.randomColor(); // returned: '#97b0ee'\ninfiniteGradients.randomColor(); // returned: '#5bb023'\n```\n\n\n### infiniteGradients.getRadialGradient(colors, offset, x, y)\n\nGets a radial gradient CSS function as a string\n\n**Parameters**\n\n**colors**: , Gets a radial gradient CSS function as a string\n\n**offset**: , Gets a radial gradient CSS function as a string\n\n**x**: , Gets a radial gradient CSS function as a string\n\n**y**: , Gets a radial gradient CSS function as a string\n\n**Returns**: , a radial gradient CSS function as a string\n\n**Example**:\n```js\n// returns: 'radial-gradient(circle at 2.1% 33.5%, #ff0000 -75.00%, #286554 25.00%, #0000ff 125.00%, #9619e2 225.00%)'\ninfiniteGradients.getRadialGradient(['red','#286554','blue','#9619e2'], 25, .021, .335);\n```\n\n\n### infiniteGradients.getLinearGradient(colors, offset, angle)\n\nGets a linear gradient CSS function as a string\n\n**Parameters**\n\n**colors**: , Gets a linear gradient CSS function as a string\n\n**offset**: , Gets a linear gradient CSS function as a string\n\n**angle**: , Gets a linear gradient CSS function as a string\n\n**Returns**: , a linear gradient CSS function as a string\n\n**Example**:\n```js\n// returns: 'linear-gradient(142.3deg, #ff0000 -75.00%, #286554 25.00%, #0000ff 125.00%, #9619e2 225.00%)'\ninfiniteGradients.getLinearGradient(['red','#286554','blue','#9619e2'], 25, 142.3);\n```\n\n\n## Source Code\n\n- [Source Code on Github](https://github.com/skratchdot/infinite-gradients)\n\n\n## For Developers\n\n### Clone the Project\n\n```bash\ngit clone https://github.com/skratchdot/infinite-gradients.git\ncd infinite-gradients\n```\n\n### Install the Dependencies\n\n```bash\nnpm install\n```\n\n### Run the Application (and watch for changes)\n\n```bash\ngulp\n```\n\nNow browse to the app at [http://localhost:8080/infinite-gradients](http://localhost:8080/infinite-gradients)\n\n\n## Other Background Generators\n\n- [Unique Gradient Generator](https://github.com/tiborsaas/unique-gradient-generator)\n- [Randomized Gradient Generator](http://paintbycode.github.io/gradient-generator/)\n- [Colorzilla Gradient Editor](http://www.colorzilla.com/gradient-editor/)\n- [AngryTools.com Gradient Editor](http://angrytools.com/gradient/)\n- [CSS Gradient Generator](https://www.css-gradient.com/)\n\n**...more to come. please submit a PR if you know what's missing**\n\n\n## License\n\nCopyright (c) 2015 [skratchdot](http://skratchdot.com/)  \nLicensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskratchdot%2Finfinite-gradients","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskratchdot%2Finfinite-gradients","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskratchdot%2Finfinite-gradients/lists"}