{"id":15069969,"url":"https://github.com/alexsugak/react-svg-pathline","last_synced_at":"2025-04-10T17:10:52.960Z","repository":{"id":57345977,"uuid":"62509250","full_name":"AlexSugak/react-svg-pathline","owner":"AlexSugak","description":"React component for drawing SVG path through set of points, smoothing the corners","archived":false,"fork":false,"pushed_at":"2023-02-07T09:33:23.000Z","size":61,"stargazers_count":46,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T23:37:46.390Z","etag":null,"topics":["component","corners","line","path","react","smooth","svg"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/AlexSugak.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}},"created_at":"2016-07-03T18:14:44.000Z","updated_at":"2024-08-14T06:40:47.000Z","dependencies_parsed_at":"2023-02-19T16:16:11.912Z","dependency_job_id":null,"html_url":"https://github.com/AlexSugak/react-svg-pathline","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/AlexSugak%2Freact-svg-pathline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexSugak%2Freact-svg-pathline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexSugak%2Freact-svg-pathline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexSugak%2Freact-svg-pathline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlexSugak","download_url":"https://codeload.github.com/AlexSugak/react-svg-pathline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248261343,"owners_count":21074220,"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":["component","corners","line","path","react","smooth","svg"],"created_at":"2024-09-25T01:46:00.881Z","updated_at":"2025-04-10T17:10:52.927Z","avatar_url":"https://github.com/AlexSugak.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-svg-pathline\n\nReact component for drawing SVG path through set of points, smoothing the corners\n\n## Why?\n\nSVG `polyline` is the simplest option for rendering \"path\" line through set of known points but it gives you a \"broken\" line with sharp corners.\nUsing SVG `path` you can get smooth corners but it requires adding more points to original set.\nThis component helps with rendering SVG path by generating correct SVG data from original set of points, producing \"smooth path line\" as result. \n\nSo instead of this:\n\n```html\n    \u003csvg\u003e\n        \u003cpolyline \n            points=\"0,0 125,0 125,125 250,125\"  \n            stroke=\"red\" \n            strokeWidth=\"3\"\n            fill=\"none\" /\u003e\n    \u003c/svg\u003e\n```\n\n![polyline](https://cloud.githubusercontent.com/assets/2222587/16547319/27903e50-4172-11e6-86b6-4c4e3d3d6484.png)\n\nYou get this:\n\n```javascript\nimport React from 'react'\nimport {PathLine} from 'react-svg-pathline'\n\nexport class MyComponent extends React.Component {\n  render() (\n    \u003csvg\u003e\n        \u003cPathLine \n            points={[{x:0, y:0}, {x:125, y: 0}, {x:125, y:125}, {x:250, y:125}]} \n            stroke=\"red\" \n            strokeWidth=\"3\"\n            fill=\"none\"\n            r={10}\n            /\u003e\n    \u003c/svg\u003e\n  )\n}\n```\n\n![pathline](https://cloud.githubusercontent.com/assets/2222587/16547326/5a1f4c80-4172-11e6-9892-6dbd9c6f27f1.png)\n\n## Installation\n\nRequires [nodejs](http://nodejs.org/).\n\n```sh\n$ npm install react-svg-pathline\n```\n\n## Live Example\n\n```sh\n$ npm i \u0026\u0026 npm i react react-dom \u0026\u0026 npm start\n```\n\nOpen a browser at localhost:8080","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexsugak%2Freact-svg-pathline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexsugak%2Freact-svg-pathline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexsugak%2Freact-svg-pathline/lists"}