{"id":26949876,"url":"https://github.com/sfrady20/easy-mesh-gradient","last_synced_at":"2025-04-02T22:18:33.472Z","repository":{"id":65163110,"uuid":"584842906","full_name":"sFrady20/easy-mesh-gradient","owner":"sFrady20","description":"A tiny utility to create mesh gradients with customizable easing functions","archived":false,"fork":false,"pushed_at":"2024-08-27T03:54:34.000Z","size":1501,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T18:17:22.515Z","etag":null,"topics":["easing","mesh-gradient","vite-lib"],"latest_commit_sha":null,"homepage":"https://easy-mesh-gradient.stevenfrady.com","language":"TypeScript","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/sFrady20.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}},"created_at":"2023-01-03T16:51:41.000Z","updated_at":"2025-03-23T13:21:29.000Z","dependencies_parsed_at":"2024-08-10T20:58:57.300Z","dependency_job_id":"d4c7dfed-58ee-445f-aff1-fb6c3ade2685","html_url":"https://github.com/sFrady20/easy-mesh-gradient","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/sFrady20%2Feasy-mesh-gradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sFrady20%2Feasy-mesh-gradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sFrady20%2Feasy-mesh-gradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sFrady20%2Feasy-mesh-gradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sFrady20","download_url":"https://codeload.github.com/sFrady20/easy-mesh-gradient/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246899631,"owners_count":20851899,"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":["easing","mesh-gradient","vite-lib"],"created_at":"2025-04-02T22:18:33.015Z","updated_at":"2025-04-02T22:18:33.460Z","avatar_url":"https://github.com/sFrady20.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Easy Mesh Gradient\n\n![Frame 2 (2)](https://user-images.githubusercontent.com/3497863/210480494-fe5c3edf-5684-4881-8295-ea702e66e33e.png)\n\n## Installation\n\nTo install, use npm:\n\n```\nnpm install easy-mesh-gradient\n```\n\nor yarn:\n\n```\nyarn add easy-mesh-gradient\n```\n\n## Usage\n\n```tsx\nimport easyMeshGradient from \"easy-mesh-gradient\";\n\nconst gradientString = easyMeshGradient();\n\ndocument.body.style.backgroundImage = `${gradientString}`;\n```\n\n### Options\n\nThe easyMeshGradient function accepts an optional options object with the following properties:\n\n#### `points`\n\nAn array of points that define the mesh gradient. Each point should have the following properties:\n\n- `x`: The x coordinate of the point as a decimal between 0 and 1.\n- `y`: The y coordinate of the point as a decimal between 0 and 1.\n- `h`: The hue of the point as a number between 0 and 360.\n- `s`: The saturation of the point as a decimal between 0 and 1.\n- `l`: The lightness of the point as a decimal between 0 and 1.\n- `scale`: A number representing the size of the gradient fade around the point.\n\nIf the `points` option is not specified, the library will generate points using the `pointsGenerator` function (see below).\n\n#### `easing`\n\nA function that defines the easing of the gradient transitions between points. This function should accept a number between 0 and 1 and return a number between 0 and 1. The default easing function is easeInOutCubic.\n\n#### `easingStops`\n\nThe number of intermediate colors to use in the gradient transitions between points. The default value is 10.\n\n#### `seed`\n\nA string that is used to seed the random number generator when generating points. This allows the generated points to be reproducible.\n\n#### `pointCount`\n\nThe number of points to generate when using the pointsGenerator function. The default value is 5.\n\n#### `scaleRange`\n\nA 2-element array that defines the minimum and maximum allowed values for the scale property of generated points. The default value is [0.5, 2].\n\n#### `hueRange`\n\nA 2-element array that defines the minimum and maximum allowed values for the h property of generated points. The default value is [0, 360].\n\n#### `saturationRange`\n\nA 2-element array that defines the minimum and maximum allowed values for the s property of generated points. The default value is [0.5, 1].\n\n#### `lightnessRange`\n\nA 2-element array that defines the minimum and maximum allowed values for the l property of generated points. The default value is [0.5, 1].\n\n#### `pointsGenerator`\n\nA function that generates an array of points when the points option is not specified. This function should accept an options object with the same properties as the main easyMeshGradient function, and return an array of points with the same structure as described above for the points option. The default pointsGenerator function is provided by the library.\n\n### Example\n\n```tsx\nimport easyMeshGradient from \"easy-mesh-gradient\";\n\nconst gradientString = easyMeshGradient({\n  points: [\n    { x: 0.1, y: 0.1, h: 120, s: 0.8, l: 0.6, scale: 1 },\n    { x: 0.5, y: 0.5, h: 60, s: 0.7, l: 0.5, scale: 1.5 },\n    { x: 0.9, y: 0.9, h: 300, s: 0.6, l: 0.4, scale: 1 },\n  ],\n  easingStops: 20,\n});\n\ndocument.body.style.backgroundImage = `${gradientString}`;\n```\n\nThis will generate a mesh gradient with 3 points, using 20 intermediate colors in the gradient transitions and the default easing function. The resulting gradient will be applied as the `background-image` of the `document.body` element.\n\n### License\n\nMIT\n\n(documentation co-authored by chatGPT 😄)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsfrady20%2Feasy-mesh-gradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsfrady20%2Feasy-mesh-gradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsfrady20%2Feasy-mesh-gradient/lists"}