{"id":44983267,"url":"https://github.com/graphieros/svg-path-gradient","last_synced_at":"2026-02-18T19:01:00.319Z","repository":{"id":339135688,"uuid":"1160610220","full_name":"graphieros/svg-path-gradient","owner":"graphieros","description":"A library to create gradient paths to insert in your inline svg","archived":false,"fork":false,"pushed_at":"2026-02-18T06:40:47.000Z","size":49,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-18T11:27:21.931Z","etag":null,"topics":["gradient","gradient-path","svg"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/graphieros.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2026-02-18T06:37:25.000Z","updated_at":"2026-02-18T06:40:50.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/graphieros/svg-path-gradient","commit_stats":null,"previous_names":["graphieros/svg-path-gradient"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/graphieros/svg-path-gradient","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fsvg-path-gradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fsvg-path-gradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fsvg-path-gradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fsvg-path-gradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphieros","download_url":"https://codeload.github.com/graphieros/svg-path-gradient/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fsvg-path-gradient/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29587066,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T16:55:40.614Z","status":"ssl_error","status_checked_at":"2026-02-18T16:55:37.558Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["gradient","gradient-path","svg"],"created_at":"2026-02-18T19:00:25.427Z","updated_at":"2026-02-18T19:01:00.307Z","avatar_url":"https://github.com/graphieros.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svg-path-gradient\n\nCreate beautiful, flowing stroke gradients that follow your SVG paths.\nsvg-path-gradient is an open-source library without dependency to create gradient paths in seconds.\n\n[![Open on npmx.dev](https://npmx.dev/api/registry/badge/version/svg-path-gradient)](https://npmx.dev/svg-path-gradient)\n[![License](https://img.shields.io/badge/license-MIT-green)](https://github.com/graphieros/svg-path-gradient?tab=MIT-1-ov-file#readme)\n[![GitHub issues](https://img.shields.io/github/issues/graphieros/svg-path-gradient)](https://github.com/graphieros/svg-path-gradient/issues)\n[![GitHub Repo stars](https://img.shields.io/github/stars/graphieros/svg-path-gradient)](https://github.com/graphieros/svg-path-gradient)\n\n## Installation\n\n```bash\nnpm install svg-path-gradient\n```\n\n```bash\npnpm add svg-path-gradient\n```\n\n```bash\nyarn add svg-path-gradient\n```\n\n```bash\nbun add svg-path-gradient\n```\n\n```bash\ndeno add npm:svg-path-gradient\n```\n\n## Usage\n\n```js\nimport { SvgPathGradient } from \"svg-path-gradient\";\n\nconst splinePath = \"M 50 250 C 150 50, 350 50, 450 250 S 750 450, 850 250\";\n\nconst gradientPath = SvgPathGradient(\n  splinePath,\n  [\"#FF0000\", \"#00ff88\", \"#0066ff\"],\n  {\n    segments: 48,\n    attrs: {\n      \"stroke-width\": \"12\",\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n    },\n    groupAttrs: { id: \"spline-path\" },\n  },\n);\n\n/*\n * gradientPath can now be injected inside a svg group element.\n * In vue, this would be for example:\n *\n *   \u003csvg width=\"100%\" viewBox=\"0 0 1000 1000\"\u003e\n *       \u003cg v-html=\"gradientPath\"/\u003e\n *   \u003c/svg\u003e\n */\n```\n\n## API\n\n### Function signature\n\n| KEY      | TYPE                        | DEFAULT | DESCRIPTION                                                                                                              |\n| -------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------ |\n| pathData | `string`                    | -       | SVG path \"d\" string. Must be a non-empty string. Throws if empty or not a string.                                        |\n| colors   | `string[]`                  | -       | Array of gradient stop colors, evenly distributed from 0 → 1. Any CSS color format supported by the browser is accepted. |\n| options  | `GradientStrokePathOptions` | `{}`    | Configuration object controlling segmentation, sampling, interpolation, attributes, and return mode.                     |\n\n### Options\n\n| KEY                        | TYPE                     | DEFAULT             | DESCRIPTION                                                                                                                                                                   |\n| -------------------------- | ------------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| returnMode                 | `\"string\" or \"dom\"`      | `\"string\"`          | Output format: SVG markup string or DOM nodes you can append to an \u003csvg\u003e. DOM mode returns: { group, segments, startCap?, endCap? }.                                          |\n| segments                   | `number`                 | (computed)          | Fixed number of segments to generate. If omitted, derived from maxSegmentLength. Go easy if you care about DOM nodes count                                                    |\n| maxSegmentLength           | `number`                 | (heuristic)         | Maximum arc-length of each segment (user units). Used only if segments is not provided. Heuristic is based on stroke width, clamped, and never exceeds half the total length. |\n| flattenTolerance           | `number`                 | `0.25`              | Sampling step (user units) when approximating each segment with a polyline. Lower values increase fidelity but increase CPU cost and output size.                             |\n| samplePointLimitPerSegment | `number`                 | `250`               | Safety cap for maximum sampled points per segment. Must be \u003e 10 to override.                                                                                                  |\n| decimalPlaces              | `number`                 | `3`                 | Rounding precision for generated coordinates. Lower values reduce output size.                                                                                                |\n| decimalPlaces              | `number`                 | `3`                 | Rounding precision for generated coordinates. Lower values reduce output size.                                                                                                |\n| colorSpace                 | `\"srgb\" or \"linearRGB\"`  | `\"linearRGB\"`       | Color interpolation space used when sampling between stops. \"linearRGB\" gives smoother-looking gradients.                                                                     |\n| overlap                    | `number`                 | `strokeWidth * 0.5` | Overlap (arc-length user units) applied at segment boundaries to reduce visible seams. Clamped to at most 45% of a base segment length.                                       |\n| strokeWidth                | `number`                 | `1 (fallback)`      | Used only to compute defaults (overlap / maxSegmentLength) if not provided elsewhere. If attrs[\"stroke-width\"] is present and valid, it can be used as a fallback.            |\n| attrs                      | `Record\u003cstring, string\u003e` | `{}`                | Attributes applied to each generated \u003cpath\u003e segment. `stroke` is always overwritten per segment; `fill` defaults to \"none\" if not provided.                                   |\n| groupAttrs                 | `Record\u003cstring, string\u003e` | `{}`                | Attributes applied to the wrapping `\u003cg\u003e `element.                                                                                                                             |\n| colorReferenceElement      | `Element or null`        | `undefined`         | Optional element used to resolve \"currentColor\" when converting colors to RGBA. Only relevant if your colors include currentColor.                                            |\n\n### Return value\n\n| KEY         | TYPE                                                                     | DESCRIPTION                                                                                     |\n| ----------- | ------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |\n| string mode | `string`                                                                 | Returns a \u003cg data-svg-path-gradient=\"true\"\u003e...\u003c/g\u003e string containing many \u003cpath\u003e segments.      |\n| dom mode    | `{ group: SVGGElement; segments: SVGPathElement[]; startCap?; endCap? }` | Returns a group node containing the segment path nodes, ready to append into an existing \u003csvg\u003e. |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fsvg-path-gradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphieros%2Fsvg-path-gradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fsvg-path-gradient/lists"}