# 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.


#### 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)