svg: generate 'outline path'

Question

I have a set of coordinates that I turn into an svg path (using cubic beziers to make it smooth). When I apply a certain stroke width, I get the following result (the blue d

Answer 1

I created the svgContour function that is thought for scenarios similar to this,
the resulting contour offset is not related to the stroke-width value and must be set as a parameter to the function.

At the moment it will find one offset side at a time, but running it once per sides you can solve this issue.

TLDR
Actually through svgContour you can find the contour of any svg shapes, currently it doesn't support fill-modes but one of the next goals is to implement that. it relies on getPathData() to get the pathData of any SVGGeometryElement, then this data goes through three phases:

• redrawSteepCurve
  Premise: drawing a beizer-curve parallel to another isn't obtained just offsetting the points/control-points of the curve unless the curve is sufficiently flat (in this case the visual rendering will be fine); this method takes a SVGPathData and in case it finds a steep curve it splits it up until it's flat enough (return a visually equivalent SVGPathData).

• contourPathData
  In this stage the pathData is dissambled in points, points are connected in segments, each segment is offsetted, an intersection point is then found for each contiguous segment ( what we get back is a list of offsetted points).

• drawLine
  This phase places the points from step 2 in the pathData coming from step 1, and finally draws the contour.

An example:

const path = document.querySelector('path')

svgContour(path, 5)

svg {
  width: 100vw;
  height: 100vh
}

the contour is traced !