Tldraw/examples/core-example-advanced/src/shapes/pencil/pencil-helpers.ts

import { getStroke, getStrokePoints } from 'perfect-freehand'

export function getComponentSvgPath(points: number[][]) {
  const stroke = getStroke(points, {
    size: 8,
  })

  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(' ')
}

export function getIndicatorSvgPath(points: number[][]) {
  const strokePoints = getStrokePoints(points).map((strokePoint) => strokePoint.point)

  if (!strokePoints.length) return ''

  const d = strokePoints.reduce(
    (acc, [x0, y0], i, arr) => {
      if (!arr[i + 1]) return acc
      const [x1, y1] = arr[i + 1]
      acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2)
      return acc
    },
    ['M', ...strokePoints[0], 'Q']
  )

  return d.join(' ')
}