{"id":20119169,"url":"https://github.com/harrystevens/shape2path","last_synced_at":"2025-04-12T06:42:53.910Z","repository":{"id":26374876,"uuid":"108619915","full_name":"HarryStevens/shape2path","owner":"HarryStevens","description":"Convert SVG shapes to SVG paths","archived":false,"fork":false,"pushed_at":"2024-09-23T22:51:42.000Z","size":885,"stargazers_count":31,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T06:42:51.482Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://npmjs.com/package/shape2path","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/HarryStevens.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}},"created_at":"2017-10-28T04:33:52.000Z","updated_at":"2025-01-07T00:16:54.000Z","dependencies_parsed_at":"2024-06-19T00:10:50.414Z","dependency_job_id":"b721b885-0429-426c-92c8-da9e5e73310b","html_url":"https://github.com/HarryStevens/shape2path","commit_stats":{"total_commits":91,"total_committers":3,"mean_commits":"30.333333333333332","dds":0.09890109890109888,"last_synced_commit":"753adccace72f9c8dfcad9f141e97c9540e9c00a"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fshape2path","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fshape2path/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fshape2path/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fshape2path/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HarryStevens","download_url":"https://codeload.github.com/HarryStevens/shape2path/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248530611,"owners_count":21119592,"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-11-13T19:14:40.008Z","updated_at":"2025-04-12T06:42:53.881Z","avatar_url":"https://github.com/HarryStevens.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# shape2path\nConvert SVG [shapes](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#Basic_shapes) to SVG [paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path). Check out [this demo](https://blocks.roadtolarissa.com/HarryStevens/944fc151f210ddf6bd6ebaeda12c3d05).\n\n## Installation\nIf you use NPM, `npm install shape2path`. Otherwise, download the [latest release](https://github.com/HarryStevens/shape2path/blob/master/build/shape2path.zip). AMD, CommonJS, and vanilla environments are supported. In vanilla, a shape2path global is exported:\n\n```html\n\u003cscript src=\"https://unpkg.com/shape2path@3.0.5/build/shape2path.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\nconst path = shape2path.circle()\n  .attr(\"r\", 50) // Paths can be configured with constants...\n  .attr(\"cx\", d =\u003e d.cx); // ...or with functions. \n\n// The cy attribute defaults to zero because it was not specified.\npath({cx: 50}); // M50,0 m-50,0 a50,50 0 1,0 100,0 a50,50 0 1,0 -100,0\n\n\u003c/script\u003e\n```\n\n## API\nshape2path's methods return configurable functions that can be used to produce the [d attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) required to draw an SVG path identical to a corresponding SVG basic shape. Each method corresponds to a basic SVG shape: [circle](#circle), [ellipse](#ellipse), [line](#line), [polygon](#polygon), [polyline](#polyline), and [rect](#rect).\n\n\u003ca name=\"circle\" href=\"#circle\"\u003e#\u003c/a\u003e shape2path.\u003cb\u003ecircle\u003c/b\u003e() · [Source](https://github.com/HarryStevens/shape2path/blob/master/src/circle2path.js \"Source\"), [Example](https://observablehq.com/@harrystevens/circle)\n\nCreates a new [circle](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle) generator whose [cx](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cx), [cy](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cy), and [r](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/r) attributes are set to 0.\n\n\u003ca name=\"ellipse\" href=\"#ellipse\"\u003e#\u003c/a\u003e shape2path.\u003cb\u003eellipse\u003c/b\u003e() · [Source](https://github.com/HarryStevens/shape2path/blob/master/src/ellipse2path.js \"Source\"), [Example](https://observablehq.com/@harrystevens/ellipse)\n\nCreates a new [ellipse](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse) generator whose [cx](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cx), [cy](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cy), [rx](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx), and [ry](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/ry) attributes are set to 0.\n\n\u003ca name=\"line\" href=\"#line\"\u003e#\u003c/a\u003e shape2path.\u003cb\u003eline\u003c/b\u003e() · [Source](https://github.com/HarryStevens/shape2path/blob/master/src/line2path.js \"Source\"), [Example](https://observablehq.com/@harrystevens/line)\n\nCreates a new [line](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line) generator whose [x1](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x1), [y1](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y1), [x2](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x2), and [y2](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y2) attributes default to 0.\n\n\u003ca name=\"polygon\" href=\"#polygon\"\u003e#\u003c/a\u003e shape2path.\u003cb\u003epolygon\u003c/b\u003e() · [Source](https://github.com/HarryStevens/shape2path/blob/master/src/polygon2path.js \"Source\"), [Example](https://observablehq.com/@harrystevens/polygon)\n\nCreates a new [polygon](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon) generator whose [points](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/points) attribute defaults to \"0,0\".\n\n\u003ca name=\"polyline\" href=\"#polyline\"\u003e#\u003c/a\u003e shape2path.\u003cb\u003epolyline\u003c/b\u003e() · [Source](https://github.com/HarryStevens/shape2path/blob/master/src/polyline2path.js \"Source\"), [Example](https://observablehq.com/@harrystevens/polyline)\n\nCreates a new [polyline](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline) generator whose [points](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/points) attribute defaults to \"0,0\".\n\n\u003ca name=\"rect\" href=\"#rect\"\u003e#\u003c/a\u003e shape2path.\u003cb\u003erect\u003c/b\u003e() · [Source](https://github.com/HarryStevens/shape2path/blob/master/src/rect2path.js \"Source\"), [Example](https://observablehq.com/@harrystevens/rectangle)\n\nCreates a new [rect](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect) generator whose [x](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x), [y](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y), [width](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width), [height](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height), [rx](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx), and [ry](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/ry) attributes default to 0.\n\n\u003ca name=\"_shape\" href=\"#_shape\"\u003e#\u003c/a\u003e \u003cem\u003eshape\u003c/em\u003e([\u003cem\u003edatum\u003c/em\u003e])\n\nReturns a string representing the path's d attribute, whose appearance will be identical to an SVG basic shape corresponding to the generator's attributes. If \u003cem\u003edatum\u003c/em\u003e is specified, applies the generator's functional accessors on the specified datum.\n\n\u003ca name=\"shape_attr\" href=\"#shape_attr\"\u003e#\u003c/a\u003e \u003cem\u003eshape\u003c/em\u003e.\u003cb\u003eattr\u003c/b\u003e(\u003cem\u003ename\u003c/em\u003e[, \u003cem\u003evalue\u003c/em\u003e])\n\nIf \u003cem\u003evalue\u003c/em\u003e is specified, sets the attribute \u003cem\u003ename\u003c/em\u003e to the specified value and returns the generator. For instance, to set a circle generator's cx attribute to 10:\n```js\nshape2path.circle()\n  .attr(\"cx\", 10);\n```\nIf the \u003cem\u003evalue\u003c/em\u003e is constant, sets the position to that constant. Constants must be specified as numbers unless you are setting a points attribute, in which case you can set the constant to a string (e.g. `\"0,0 1,1\"`) or an array of points (e.g. `[[0,0], [1,1]]`). \n\nIf \u003cem\u003evalue\u003c/em\u003e is a function, the function is evaluated for the passed datum, and the function's return value is used to set the attribute's value. For instance, to set a circle generator's cx attribute to a datum's \"left\" attribute:\n```js\nshape2path.circle()\n  .attr(\"cx\", d =\u003e d.left)\n  ({left: 10});\n```\nIf \u003cem\u003evalue\u003c/em\u003e is not specified, returns the current value of the attribute. For all attributes other than points, the value defaults to 0; for points, it defaults to \"0,0\".\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharrystevens%2Fshape2path","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharrystevens%2Fshape2path","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharrystevens%2Fshape2path/lists"}