{"id":13431011,"url":"https://github.com/steveruizok/perfect-freehand","last_synced_at":"2026-02-05T16:31:38.091Z","repository":{"id":38223551,"uuid":"340509655","full_name":"steveruizok/perfect-freehand","owner":"steveruizok","description":"Draw perfect pressure-sensitive freehand lines.","archived":false,"fork":false,"pushed_at":"2026-02-01T01:04:28.000Z","size":2229,"stargazers_count":5403,"open_issues_count":18,"forks_count":201,"subscribers_count":18,"default_branch":"main","last_synced_at":"2026-02-01T09:27:59.787Z","etag":null,"topics":["drawing","graphics","html-canvas","lines","pressure","stroke","svg","variable-width"],"latest_commit_sha":null,"homepage":"https://perfectfreehand.com","language":"HTML","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/steveruizok.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["steveruizok"]}},"created_at":"2021-02-19T22:59:03.000Z","updated_at":"2026-02-01T00:57:44.000Z","dependencies_parsed_at":"2023-01-31T12:16:26.802Z","dependency_job_id":"94811089-3d49-4534-a26e-da08f2146a71","html_url":"https://github.com/steveruizok/perfect-freehand","commit_stats":{"total_commits":217,"total_committers":8,"mean_commits":27.125,"dds":0.04147465437788023,"last_synced_commit":"58c5fce6936c9b67dfd21fada83266dc988a01a1"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/steveruizok/perfect-freehand","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fperfect-freehand","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fperfect-freehand/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fperfect-freehand/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fperfect-freehand/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steveruizok","download_url":"https://codeload.github.com/steveruizok/perfect-freehand/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fperfect-freehand/sbom","scorecard":{"id":852845,"data":{"date":"2025-08-11","repo":{"name":"github.com/steveruizok/perfect-freehand","commit":"9b369e4d74c9f45748e3dfd7507a7c3f97021acb"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.7,"checks":[{"name":"Code-Review","score":2,"reason":"Found 6/30 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/main.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:7: update your workflow using https://app.stepsecurity.io/secureworkflow/steveruizok/perfect-freehand/main.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/steveruizok/perfect-freehand/main.yml/main?enable=pin","Info:   0 out of   1 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 8 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"49 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj","Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4","Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653","Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj","Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67","Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w","Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2","Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T22:59:06.076Z","repository_id":38223551,"created_at":"2025-08-23T22:59:06.076Z","updated_at":"2025-08-23T22:59:06.076Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29125830,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-05T14:05:12.718Z","status":"ssl_error","status_checked_at":"2026-02-05T14:03:53.078Z","response_time":65,"last_error":"SSL_read: 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":["drawing","graphics","html-canvas","lines","pressure","stroke","svg","variable-width"],"created_at":"2024-07-31T02:00:59.779Z","updated_at":"2026-02-05T16:31:38.080Z","avatar_url":"https://github.com/steveruizok.png","language":"HTML","funding_links":["https://github.com/sponsors/steveruizok","https://github.com/sponsors/steveruizok?frequency=recurring\u0026sponsor=steveruizok"],"categories":["HTML","TypeScript"],"sub_categories":[],"readme":"# ![Screenshot](assets/perfect-freehand-logo.svg 'Perfect Freehand')\n\nDraw perfect pressure-sensitive freehand lines.\n\n🔗 Curious? Try out a [demo](https://perfect-freehand-example.vercel.app/).\n\n💅 Designer? Check out the [Figma Plugin](https://www.figma.com/community/plugin/950892731860805817).\n\n🕊 This library is written in TypeScript but are community ports in:\n- [dart version](https://pub.dev/packages/perfect_freehand)\n- [odin](https://github.com/sibaiper/odin-freehand)\n- [python](https://github.com/bigbluebutton/perfect-freehand-python)\n- [rust](https://crates.io/crates/perfect_freehand)\n- ...and probably more. Make a pull request!\n\n💕 Love this library? Consider [becoming a sponsor](https://github.com/sponsors/steveruizok?frequency=recurring\u0026sponsor=steveruizok).\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Documentation](#documentation)\n- [Community](#community)\n- [Author](#author)\n\n## Installation\n\n```bash\nnpm install perfect-freehand\n```\n\nor\n\n```bash\nyarn add perfect-freehand\n```\n\n## Introduction\n\nThis package exports a function named `getStroke` that will generate the points for a polygon based on an array of points.\n\n![Screenshot](assets/process.gif 'A GIF showing a stroke with input points, outline points, and a curved path connecting these points')\n\nTo do this work, `getStroke` first creates a set of spline points (red) based on the input points (grey) and then creates outline points (blue). You can render the result any way you like, using whichever technology you prefer.\n\n[![Edit perfect-freehand-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/perfect-freehand-example-biwyi?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Usage\n\nTo use this library, import the `getStroke` function and pass it an array of **input points**, such as those recorded from a user's mouse movement. The `getStroke` function will return a new array of **outline points**. These outline points will form a polygon (called a \"stroke\") that surrounds the input points.\n\n```js\nimport { getStroke } from 'perfect-freehand'\n\nconst inputPoints = [\n  [0, 0],\n  [10, 5],\n  [20, 8],\n  // ...\n]\n\nconst outlinePoints = getStroke(inputPoints)\n```\n\nYou then can **render** your stroke points using your technology of choice. See the [Rendering](#rendering) section for examples in SVG and HTML Canvas.\n\nYou can **customize** the appearance of the stroke shape by passing `getStroke` a second parameter: an options object containing one or more options. See the [Options](#options) section for a full list of available options.\n\n```js\nconst stroke = getStroke(myPoints, {\n  size: 32,\n  thinning: 0.7,\n})\n```\n\nThe appearance of a stroke is effected by the **pressure** associated with each input point. By default, the `getStroke` function will simulate pressure based on the distance between input points.\n\nTo use **real pressure**, such as that from a pen or stylus, provide the pressure as the third number for each input point, and set the `simulatePressure` option to `false`.\n\n```js\nconst inputPoints = [\n  [0, 0, 0.5],\n  [10, 5, 0.7],\n  [20, 8, 0.8],\n  // ...\n]\n\nconst outlinePoints = getStroke(inputPoints, {\n  simulatePressure: false,\n})\n```\n\nIn addition to providing points as an array of arrays, you may also provide your points as an **array of objects** as show in the example below. In both cases, the value for pressure is optional (it will default to `.5`).\n\n```js\nconst inputPoints = [\n  { x: 0, y: 0, pressure: 0.5 },\n  { x: 10, y: 5, pressure: 0.7 },\n  { x: 20, y: 8, pressure: 0.8 },\n  // ...\n]\n\nconst outlinePoints = getStroke(inputPoints, {\n  simulatePressure: false,\n})\n```\n\n**Note:** Internally, the `getStroke` function will convert your object points to array points, which will have an effect on performance. If you're using this library ambitiously and want to format your points as objects, consider modifying this library's `getStrokeOutlinePoints` to use the object syntax instead (e.g. replacing all `[0]` with `.x`, `[1]` with `.y`, and `[2]` with `.pressure`).\n\n## Example\n\n```jsx\nimport * as React from 'react'\nimport { getStroke } from 'perfect-freehand'\nimport { getSvgPathFromStroke } from './utils'\n\nexport default function Example() {\n  const [points, setPoints] = React.useState([])\n\n  function handlePointerDown(e) {\n    e.target.setPointerCapture(e.pointerId)\n    setPoints([[e.pageX, e.pageY, e.pressure]])\n  }\n\n  function handlePointerMove(e) {\n    if (e.buttons !== 1) return\n    setPoints([...points, [e.pageX, e.pageY, e.pressure]])\n  }\n\n  const stroke = getStroke(points, {\n    size: 16,\n    thinning: 0.5,\n    smoothing: 0.5,\n    streamline: 0.5,\n  })\n\n  const pathData = getSvgPathFromStroke(stroke)\n\n  return (\n    \u003csvg\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      style={{ touchAction: 'none' }}\n    \u003e\n      {points \u0026\u0026 \u003cpath d={pathData} /\u003e}\n    \u003c/svg\u003e\n  )\n}\n```\n\n\u003e **Tip:** For implementations in Typescript, see the example project included in this repository.\n\n[![Edit perfect-freehand-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/perfect-freehand-example-biwyi?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Documentation\n\n### Options\n\nThe options object is optional, as are each of its properties.\n\n| Property           | Type     | Default | Description                                           |\n| ------------------ | -------- | ------- | ----------------------------------------------------- |\n| `size`             | number   | 8       | The base size (diameter) of the stroke.               |\n| `thinning`         | number   | .5      | The effect of pressure on the stroke's size.          |\n| `smoothing`        | number   | .5      | How much to soften the stroke's edges.                |\n| `streamline`       | number   | .5      | How much to streamline the stroke.                    |\n| `simulatePressure` | boolean  | true    | Whether to simulate pressure based on velocity.       |\n| `easing`           | function | t =\u003e t  | An easing function to apply to each point's pressure. |\n| `start`            | { }      |         | Tapering options for the start of the line.           |\n| `end`              | { }      |         | Tapering options for the end of the line.             |\n| `last`             | boolean  | true    | Whether the stroke is complete.                       |\n\n**Note:** When the `last` property is `true`, the line's end will be drawn at the last input point, rather than slightly behind it.\n\nThe `start` and `end` options accept an object:\n\n| Property | Type              | Default | Description                                                                              |\n| -------- | ----------------- | ------- | ---------------------------------------------------------------------------------------- |\n| `cap`    | boolean           | true    | Whether to draw a cap.                                                                   |\n| `taper`  | number or boolean | 0       | The distance to taper. If set to true, the taper will be the total length of the stroke. |\n| `easing` | function          | t =\u003e t  | An easing function for the tapering effect.                                              |\n\n**Note:** The `cap` property has no effect when `taper` is more than zero.\n\n```js\ngetStroke(myPoints, {\n  size: 8,\n  thinning: 0.5,\n  smoothing: 0.5,\n  streamline: 0.5,\n  easing: (t) =\u003e t,\n  simulatePressure: true,\n  last: true,\n  start: {\n    cap: true,\n    taper: 0,\n    easing: (t) =\u003e t,\n  },\n  end: {\n    cap: true,\n    taper: 0,\n    easing: (t) =\u003e t,\n  },\n})\n```\n\n\u003e **Tip:** To create a stroke with a steady line, set the `thinning` option to `0`.\n\n\u003e **Tip:** To create a stroke that gets thinner with pressure instead of thicker, use a negative number for the `thinning` option.\n\n### Other Exports\n\nFor advanced usage, the library also exports smaller functions that `getStroke` uses to generate its outline points.\n\n#### `getStrokePoints`\n\nA function that accepts an array of points (formatted either as `[x, y, pressure]` or `{ x: number, y: number, pressure: number}`) and (optionally) an options object. Returns a set of adjusted points as `{ point, pressure, vector, distance, runningLength }`. The path's total length will be the `runningLength` of the last point in the array.\n\n```js\nimport { getStrokePoints } from 'perfect-freehand'\nimport samplePoints from \"./samplePoints.json'\n\nconst strokePoints = getStrokePoints(samplePoints)\n```\n\n#### `getStrokeOutlinePoints`\n\nA function that accepts an array of points (formatted as `{ point, pressure, vector, distance, runningLength }`, i.e. the output of `getStrokePoints`) and (optionally) an options object, and returns an array of points (`[x, y]`) defining the outline of a pressure-sensitive stroke.\n\n```js\nimport { getStrokePoints, getStrokeOutlinePoints } from 'perfect-freehand'\nimport samplePoints from \"./samplePoints.json'\n\nconst strokePoints = getStrokePoints(samplePoints)\n\nconst outlinePoints = getStrokeOutlinePoints(strokePoints)\n```\n\n**Note:** Internally, the `getStroke` function passes the result of `getStrokePoints` to `getStrokeOutlinePoints`, just as shown in this example. This means that, in this example, the result of `outlinePoints` will be the same as if the `samplePoints` array had been passed to `getStroke`.\n\n#### `StrokeOptions`\n\nA TypeScript type for the options object. Useful if you're defining your options outside of the `getStroke` function.\n\n```ts\nimport { StrokeOptions, getStroke } from 'perfect-freehand'\n\nconst options: StrokeOptions = {\n  size: 16,\n}\n\nconst stroke = getStroke(options)\n```\n\n## Tips \u0026 Tricks\n\n### Freehand Anything\n\nWhile this library was designed for rendering the types of input points generated by the movement of a human hand, you can pass any set of points into the library's functions. For example, here's what you get when running [Feather Icons](https://feathericons.com/) through `getStroke`.\n\n![Icons](assets/icons.png)\n\n### Rendering\n\nWhile `getStroke` returns an array of points representing the outline of a stroke, it's up to you to decide how you will render these points.\n\nThe function below will turn the points returned by `getStroke` into SVG path data.\n\n```js\nconst average = (a, b) =\u003e (a + b) / 2\n\nfunction getSvgPathFromStroke(points, closed = true) {\n  const len = points.length\n\n  if (len \u003c 4) {\n    return ``\n  }\n\n  let a = points[0]\n  let b = points[1]\n  const c = points[2]\n\n  let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(\n    2\n  )},${b[1].toFixed(2)} ${average(b[0], c[0]).toFixed(2)},${average(\n    b[1],\n    c[1]\n  ).toFixed(2)} T`\n\n  for (let i = 2, max = len - 1; i \u003c max; i++) {\n    a = points[i]\n    b = points[i + 1]\n    result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(\n      2\n    )} `\n  }\n\n  if (closed) {\n    result += 'Z'\n  }\n\n  return result\n}\n```\n\nTo use this function, first run your input points through `getStroke`, then pass the result to `getSvgPathFromStroke`.\n\n```js\nconst outlinePoints = getStroke(inputPoints)\n\nconst pathData = getSvgPathFromStroke(outlinePoints)\n```\n\nYou could then pass this string of SVG path data either to an [SVG path](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) element:\n\n```jsx\n\u003cpath d={pathData} /\u003e\n```\n\nOr, if you are rendering with HTML Canvas, you can pass the string to a [`Path2D` constructor](https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D#using_svg_paths)).\n\n```js\nconst myPath = new Path2D(pathData)\n\nctx.fill(myPath)\n```\n\n### Flattening\n\nBy default, the polygon's paths include self-crossings. You may wish to remove these crossings and render a stroke as a \"flattened\" polygon. To do this, install the [`polygon-clipping`](https://github.com/mfogel/polygon-clipping) package and use the following function together with the `getSvgPathFromStroke`.\n\n```js\nimport polygonClipping from 'polygon-clipping'\n\nfunction getFlatSvgPathFromStroke(stroke) {\n  const faces = polygonClipping.union([stroke])\n\n  const d = []\n\n  faces.forEach((face) =\u003e\n    face.forEach((points) =\u003e {\n      d.push(getSvgPathFromStroke(points))\n    })\n  )\n\n  return d.join(' ')\n}\n```\n\n## Development \u0026 Contributions\n\nTo work on this library:\n\n- clone this repo\n- run `yarn` in the folder root to install dependencies\n- run `yarn start` to start the local development server\n\nThe development server is located at `packages/dev`. The library and its tests are located at `packages/perfect-freehand`.\n\nPull requests are very welcome!\n\n## Community\n\n### Support\n\nNeed help? Please [open an issue](https://github.com/steveruizok/perfect-freehand/issues/new) for support.\n\n### Discussion\n\nHave an idea or casual question? Visit the [discussion page](https://github.com/steveruizok/perfect-freehand/discussions).\n\n### License\n\n- MIT\n- ...but if you're using `perfect-freehand` in a commercial product, consider [becoming a sponsor](https://github.com/sponsors/steveruizok?frequency=recurring\u0026sponsor=steveruizok). 💰\n\n## Author\n\n- [@steveruizok](https://twitter.com/steveruizok)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteveruizok%2Fperfect-freehand","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteveruizok%2Fperfect-freehand","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteveruizok%2Fperfect-freehand/lists"}