---
# System prepended metadata

title: Demo Docs

---

# Demo Docs
## Libraries: 

- Prefect-freehand [Docs](https://github.com/steveruizok/perfect-freehand#documentation)

## Prefect-Freehand
This package exports a function named getStroke that will generate the points for a polygon based on an array of points.

![Perfect-freehand](https://github.com/steveruizok/perfect-freehand/raw/main/assets/process.gif)

#### Code Example: 
````
import { getStroke } from 'perfect-freehand' 
const inputPoints = [
  [0, 0],
  [10, 5],
  [20, 8],
  // ...
]
const outlinePoints = getStroke(inputPoints)
````

#### Output Example


````
[
[405.2968783168951, 168.28434777203972] [406.4443569667887, 174.6705066262291],[406.49715173066346, 176.22691960915608],[406.05020237673875, 177.7187121334511],
// ...
]
````

then convert this strokes to SVG path by :

````
    function getSvgPathFromStroke(stroke) {
      if (!stroke.length) return "";

      const d = stroke.reduce(
        (acc, [x0, y0], i, arr) => {
          const [x1, y1] = arr[(i + 1) % arr.length];
          acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2);
          return acc;
        },
        ["M", ...stroke[0], "Q"],
      );

      d.push("Z");
      return d.join(" ");
    }
````
### SVG Path: 

````
M 1073.2347367670247 204.90787235078733 Q 1073.2347367670247 204.90787235078733 1072.746148412522 209.0935439475079 1072.2575600580192 213.27921554422844 1070.8650641929848 219.72642158957842 1069.4725683279503 226.17362763492844 1067.7051821090558 234.24486391865818 1065.9377958901612 242.31610020238793 1064.370513371853 250.78265698553858 1062.8032308535446 259.24921376868923 1061.671042659827 266.3835131065774 1060.5388544661091 273.5178124444656 1059.8263361160748  204.4518017922161 1073.2346980193631 204.90824909401132 1073.234717393194 204.90806072239934 Z
````
M - represent the beginging of path.<br>
Q - represent quadratic bezier. <br>
Z - represent end of path <br>

## HTML Element Structure: 
- SVG
    - path 
        (d attribute ) --> d stands for (data)
### Exmple 
````
<svg>
<path d=""></path>
</svg>
````

### References 
- [Prefect free-hand](https://github.com/steveruizok/perfect-freehand)
- [SVG MDN](https://developer.mozilla.org/en-US/docs/Web/SVG)
- [Bézier Curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve)





