modern-path2d 1.4.0 → 1.4.1

package/dist/index.mjs

@@ -1002,271 +1002,800 @@ function svgPathDataToCommands(data) {
   return commands;
 }
 
-function catmullRom(t, p0, p1, p2, p3) {
-  const v0 = (p2 - p0) * 0.5;
-  const v1 = (p3 - p1) * 0.5;
-  const t2 = t * t;
-  const t3 = t * t2;
-  return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
-}
-
-function cubicBezierP0(t, p) {
-  const k = 1 - t;
-  return k * k * k * p;
-}
-function cubicBezierP1(t, p) {
-  const k = 1 - t;
-  return 3 * k * k * t * p;
-}
-function cubicBezierP2(t, p) {
-  return 3 * (1 - t) * t * t * p;
-}
-function cubicBezierP3(t, p) {
-  return t * t * t * p;
-}
-function cubicBezier(t, p0, p1, p2, p3) {
-  return cubicBezierP0(t, p0) + cubicBezierP1(t, p1) + cubicBezierP2(t, p2) + cubicBezierP3(t, p3);
-}
-
-function fillTriangulate(pointArray, options = {}) {
-  let {
-    vertices = [],
-    indices = [],
-    holes = [],
-    verticesStride = 2,
-    verticesOffset = vertices.length / verticesStride,
-    indicesOffset = indices.length
-  } = options;
-  const triangles = earcut(pointArray, holes, 2);
-  if (triangles.length) {
-    for (let i = 0; i < triangles.length; i += 3) {
-      indices[indicesOffset++] = triangles[i] + verticesOffset;
-      indices[indicesOffset++] = triangles[i + 1] + verticesOffset;
-      indices[indicesOffset++] = triangles[i + 2] + verticesOffset;
+const dataUri = "data:image/svg+xml;";
+const base64DataUri = `${dataUri}base64,`;
+const utf8DataUri = `${dataUri}charset=utf8,`;
+function svgToDom(svg) {
+  if (typeof svg === "string") {
+    let xml;
+    if (svg.startsWith(base64DataUri)) {
+      svg = svg.substring(base64DataUri.length, svg.length);
+      xml = atob(svg);
+    } else if (svg.startsWith(utf8DataUri)) {
+      svg = svg.substring(utf8DataUri.length, svg.length);
+      xml = decodeURIComponent(svg);
+    } else {
+      xml = svg;
     }
-    let index = verticesOffset * verticesStride;
-    for (let i = 0; i < pointArray.length; i += 2) {
-      vertices[index] = pointArray[i];
-      vertices[index + 1] = pointArray[i + 1];
-      index += verticesStride;
+    const doc = new DOMParser().parseFromString(xml, "text/xml");
+    const error = doc.querySelector("parsererror");
+    if (error) {
+      throw new Error(`${error.textContent ?? "parser error"}
+${xml}`);
     }
+    return doc.documentElement;
+  } else {
+    return svg;
   }
-  return {
-    vertices,
-    indices
-  };
 }
 
-const RECURSION_LIMIT$1 = 8;
-const FLT_EPSILON$1 = 11920929e-14;
-const PATH_DISTANCE_EPSILON$1 = 1;
-function getAdaptiveCubicBezierCurvePoints(sX, sY, x1, y1, x2, y2, x, y, smoothness = 0.5, points = []) {
-  const scale = 1;
-  const smoothing = Math.min(
-    0.99,
-    // a value of 1.0 actually inverts smoothing, so we cap it at 0.99
-    Math.max(0, smoothness)
-  );
-  let distanceTolerance = (PATH_DISTANCE_EPSILON$1 - smoothing) / scale;
-  distanceTolerance *= distanceTolerance;
-  recursive$1(sX, sY, x1, y1, x2, y2, x, y, points, distanceTolerance, 0);
-  points.push(x, y);
-  return points;
-}
-function recursive$1(x1, y1, x2, y2, x3, y3, x4, y4, points, distanceTolerance, level) {
-  if (level > RECURSION_LIMIT$1)
-    return;
-  const x12 = (x1 + x2) / 2;
-  const y12 = (y1 + y2) / 2;
-  const x23 = (x2 + x3) / 2;
-  const y23 = (y2 + y3) / 2;
-  const x34 = (x3 + x4) / 2;
-  const y34 = (y3 + y4) / 2;
-  const x123 = (x12 + x23) / 2;
-  const y123 = (y12 + y23) / 2;
-  const x234 = (x23 + x34) / 2;
-  const y234 = (y23 + y34) / 2;
-  const x1234 = (x123 + x234) / 2;
-  const y1234 = (y123 + y234) / 2;
-  if (level > 0) {
-    let dx = x4 - x1;
-    let dy = y4 - y1;
-    const d2 = Math.abs((x2 - x4) * dy - (y2 - y4) * dx);
-    const d3 = Math.abs((x3 - x4) * dy - (y3 - y4) * dx);
-    if (d2 > FLT_EPSILON$1 && d3 > FLT_EPSILON$1) {
-      if ((d2 + d3) * (d2 + d3) <= distanceTolerance * (dx * dx + dy * dy)) {
-        {
-          points.push(x1234, y1234);
-          return;
-        }
-      }
-    } else if (d2 > FLT_EPSILON$1) {
-      if (d2 * d2 <= distanceTolerance * (dx * dx + dy * dy)) {
-        {
-          points.push(x1234, y1234);
-          return;
-        }
-      }
-    } else if (d3 > FLT_EPSILON$1) {
-      if (d3 * d3 <= distanceTolerance * (dx * dx + dy * dy)) {
-        {
-          points.push(x1234, y1234);
-          return;
-        }
-      }
-    } else {
-      dx = x1234 - (x1 + x4) / 2;
-      dy = y1234 - (y1 + y4) / 2;
-      if (dx * dx + dy * dy <= distanceTolerance) {
-        points.push(x1234, y1234);
-        return;
-      }
-    }
+const defaultUnit = "px";
+const defaultDPI = 90;
+const units = ["mm", "cm", "in", "pt", "pc", "px"];
+const unitConversion = {
+  mm: {
+    mm: 1,
+    cm: 0.1,
+    in: 1 / 25.4,
+    pt: 72 / 25.4,
+    pc: 6 / 25.4,
+    px: -1
+  },
+  cm: {
+    mm: 10,
+    cm: 1,
+    in: 1 / 2.54,
+    pt: 72 / 2.54,
+    pc: 6 / 2.54,
+    px: -1
+  },
+  in: {
+    mm: 25.4,
+    cm: 2.54,
+    in: 1,
+    pt: 72,
+    pc: 6,
+    px: -1
+  },
+  pt: {
+    mm: 25.4 / 72,
+    cm: 2.54 / 72,
+    in: 1 / 72,
+    pt: 1,
+    pc: 6 / 72,
+    px: -1
+  },
+  pc: {
+    mm: 25.4 / 6,
+    cm: 2.54 / 6,
+    in: 1 / 6,
+    pt: 72 / 6,
+    pc: 1,
+    px: -1
+  },
+  px: {
+    px: 1
   }
-  recursive$1(x1, y1, x12, y12, x123, y123, x1234, y1234, points, distanceTolerance, level + 1);
-  recursive$1(x1234, y1234, x234, y234, x34, y34, x4, y4, points, distanceTolerance, level + 1);
-}
-
-const RECURSION_LIMIT = 8;
-const FLT_EPSILON = 11920929e-14;
-const PATH_DISTANCE_EPSILON = 1;
-function getAdaptiveQuadraticBezierCurvePoints(sX, sY, x1, y1, x, y, smoothness = 0.5, points = []) {
-  const scale = 1;
-  const smoothing = Math.min(
-    0.99,
-    // a value of 1.0 actually inverts smoothing, so we cap it at 0.99
-    Math.max(0, smoothness)
-  );
-  let distanceTolerance = (PATH_DISTANCE_EPSILON - smoothing) / scale;
-  distanceTolerance *= distanceTolerance;
-  recursive(points, sX, sY, x1, y1, x, y, distanceTolerance, 0);
-  points.push(x, y);
-  return points;
-}
-function recursive(points, x1, y1, x2, y2, x3, y3, distanceTolerance, level) {
-  if (level > RECURSION_LIMIT)
-    return;
-  const x12 = (x1 + x2) / 2;
-  const y12 = (y1 + y2) / 2;
-  const x23 = (x2 + x3) / 2;
-  const y23 = (y2 + y3) / 2;
-  const x123 = (x12 + x23) / 2;
-  const y123 = (y12 + y23) / 2;
-  let dx = x3 - x1;
-  let dy = y3 - y1;
-  const d = Math.abs((x2 - x3) * dy - (y2 - y3) * dx);
-  if (d > FLT_EPSILON) {
-    if (d * d <= distanceTolerance * (dx * dx + dy * dy)) {
-      {
-        points.push(x123, y123);
-        return;
+};
+function parseFloatWithUnits(string) {
+  let theUnit = "px";
+  if (typeof string === "string") {
+    for (let i = 0, n = units.length; i < n; i++) {
+      const u = units[i];
+      if (string.endsWith(u)) {
+        theUnit = u;
+        string = string.substring(0, string.length - u.length);
+        break;
       }
     }
-  } else {
-    dx = x123 - (x1 + x3) / 2;
-    dy = y123 - (y1 + y3) / 2;
-    if (dx * dx + dy * dy <= distanceTolerance) {
-      points.push(x123, y123);
-      return;
+  }
+  let scale;
+  {
+    scale = unitConversion[theUnit][defaultUnit];
+    if (scale < 0) {
+      scale = unitConversion[theUnit].in * defaultDPI;
     }
   }
-  recursive(points, x1, y1, x12, y12, x123, y123, distanceTolerance, level + 1);
-  recursive(points, x123, y123, x23, y23, x3, y3, distanceTolerance, level + 1);
+  return scale * Number.parseFloat(string);
 }
 
-function getDirectedArea(vertices) {
-  let area = 0;
-  const n = vertices.length;
-  for (let i = 0; i < n; i += 2) {
-    const x0 = vertices[i];
-    const y0 = vertices[i + 1];
-    const x1 = vertices[(i + 2) % (n - 1)];
-    const y1 = vertices[(i + 3) % n];
-    area += x0 * y1 - x1 * y0;
-  }
-  return area / 2;
-}
-
-function pointInPolygon(point, polygon) {
-  let inside = false;
-  const [x, y] = point;
-  const len = polygon.length / 2;
-  for (let i = 0, j = len - 1; i < len; j = i++) {
-    const xi = polygon[i * 2];
-    const yi = polygon[i * 2 + 1];
-    const xj = polygon[j * 2];
-    const yj = polygon[j * 2 + 1];
-    if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) {
-      inside = !inside;
+const tempTransform0$1 = new Matrix3();
+const tempTransform1$1 = new Matrix3();
+const tempTransform2$1 = new Matrix3();
+const tempTransform3 = new Matrix3();
+function getNodeTransform(node, currentTransform, transformStack) {
+  if (!(node.hasAttribute("transform") || node.nodeName === "use" && (node.hasAttribute("x") || node.hasAttribute("y")))) {
+    return null;
+  }
+  const transform = parseNodeTransform(node);
+  if (transformStack.length > 0) {
+    transform.premultiply(transformStack[transformStack.length - 1]);
+  }
+  currentTransform.copy(transform);
+  transformStack.push(transform);
+  return transform;
+}
+function parseNodeTransform(node) {
+  const transform = new Matrix3();
+  const currentTransform = tempTransform0$1;
+  if (node.nodeName === "use" && (node.hasAttribute("x") || node.hasAttribute("y"))) {
+    transform.translate(
+      parseFloatWithUnits(node.getAttribute("x")),
+      parseFloatWithUnits(node.getAttribute("y"))
+    );
+  }
+  if (node.hasAttribute("transform")) {
+    const transformsTexts = node.getAttribute("transform").split(")");
+    for (let tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex--) {
+      const transformText = transformsTexts[tIndex].trim();
+      if (transformText === "")
+        continue;
+      const openParPos = transformText.indexOf("(");
+      const closeParPos = transformText.length;
+      if (openParPos > 0 && openParPos < closeParPos) {
+        const transformType = transformText.slice(0, openParPos);
+        const array = parsePathDataArgs(transformText.slice(openParPos + 1));
+        currentTransform.identity();
+        switch (transformType) {
+          case "translate":
+            if (array.length >= 1) {
+              const tx = array[0];
+              let ty = 0;
+              if (array.length >= 2) {
+                ty = array[1];
+              }
+              currentTransform.translate(tx, ty);
+            }
+            break;
+          case "rotate":
+            if (array.length >= 1) {
+              let angle = 0;
+              let cx = 0;
+              let cy = 0;
+              angle = array[0] * Math.PI / 180;
+              if (array.length >= 3) {
+                cx = array[1];
+                cy = array[2];
+              }
+              tempTransform1$1.makeTranslation(-cx, -cy);
+              tempTransform2$1.makeRotation(angle);
+              tempTransform3.multiplyMatrices(tempTransform2$1, tempTransform1$1);
+              tempTransform1$1.makeTranslation(cx, cy);
+              currentTransform.multiplyMatrices(tempTransform1$1, tempTransform3);
+            }
+            break;
+          case "scale":
+            if (array.length >= 1) {
+              currentTransform.scale(
+                array[0],
+                array[1] ?? array[0]
+              );
+            }
+            break;
+          case "skewX":
+            if (array.length === 1) {
+              currentTransform.set(
+                1,
+                Math.tan(array[0] * Math.PI / 180),
+                0,
+                0,
+                1,
+                0,
+                0,
+                0,
+                1
+              );
+            }
+            break;
+          case "skewY":
+            if (array.length === 1) {
+              currentTransform.set(
+                1,
+                0,
+                0,
+                Math.tan(array[0] * Math.PI / 180),
+                1,
+                0,
+                0,
+                0,
+                1
+              );
+            }
+            break;
+          case "matrix":
+            if (array.length === 6) {
+              currentTransform.set(
+                array[0],
+                array[2],
+                array[4],
+                array[1],
+                array[3],
+                array[5],
+                0,
+                0,
+                1
+              );
+            }
+            break;
+        }
+      }
+      transform.premultiply(currentTransform);
     }
   }
-  return inside;
+  return transform;
 }
 
-function quadraticBezierP0(t, p) {
-  const k = 1 - t;
-  return k * k * p;
+function parseCircleNode(node) {
+  return new Path2D().arc(
+    parseFloatWithUnits(node.getAttribute("cx") || 0),
+    parseFloatWithUnits(node.getAttribute("cy") || 0),
+    parseFloatWithUnits(node.getAttribute("r") || 0),
+    0,
+    Math.PI * 2
+  );
 }
-function quadraticBezierP1(t, p) {
-  return 2 * (1 - t) * t * p;
+
+function parseCSSStylesheet(node, stylesheets) {
+  if (!node.sheet || !node.sheet.cssRules || !node.sheet.cssRules.length)
+    return;
+  for (let i = 0; i < node.sheet.cssRules.length; i++) {
+    const stylesheet = node.sheet.cssRules[i];
+    if (stylesheet.type !== 1)
+      continue;
+    const selectorList = stylesheet.selectorText.split(/,/g).filter(Boolean).map((i2) => i2.trim());
+    const definitions = {};
+    for (let len = stylesheet.style.length, i2 = 0; i2 < len; i2++) {
+      const name = stylesheet.style.item(i2);
+      definitions[name] = stylesheet.style.getPropertyValue(name);
+    }
+    for (let j = 0; j < selectorList.length; j++) {
+      stylesheets[selectorList[j]] = Object.assign(
+        stylesheets[selectorList[j]] || {},
+        { ...definitions }
+      );
+    }
+  }
 }
-function quadraticBezierP2(t, p) {
-  return t * t * p;
+
+function parseEllipseNode(node) {
+  return new Path2D().ellipse(
+    parseFloatWithUnits(node.getAttribute("cx") || 0),
+    parseFloatWithUnits(node.getAttribute("cy") || 0),
+    parseFloatWithUnits(node.getAttribute("rx") || 0),
+    parseFloatWithUnits(node.getAttribute("ry") || 0),
+    0,
+    0,
+    Math.PI * 2
+  );
 }
-function quadraticBezier(t, p0, p1, p2) {
-  return quadraticBezierP0(t, p0) + quadraticBezierP1(t, p1) + quadraticBezierP2(t, p2);
+
+function parseLineNode(node) {
+  return new Path2D().moveTo(
+    parseFloatWithUnits(node.getAttribute("x1") || 0),
+    parseFloatWithUnits(node.getAttribute("y1") || 0)
+  ).lineTo(
+    parseFloatWithUnits(node.getAttribute("x2") || 0),
+    parseFloatWithUnits(node.getAttribute("y2") || 0)
+  );
 }
 
-const closePointEps = 1e-4;
-const curveEps = 1e-4;
-function strokeTriangulate(points, options = {}) {
-  const {
-    vertices = [],
-    indices = [],
-    lineStyle = {
-      alignment: 0.5,
-      cap: "butt",
-      join: "miter",
-      width: 1,
-      miterLimit: 10
-    },
-    flipAlignment = false,
-    closed = true
-  } = options;
-  const eps = closePointEps;
-  if (points.length === 0) {
-    return { vertices, indices };
-  }
-  const style = lineStyle;
-  let alignment = style.alignment;
-  if (lineStyle.alignment !== 0.5) {
-    let orientation = getOrientationOfPoints(points);
-    if (flipAlignment)
-      orientation *= -1;
-    alignment = (alignment - 0.5) * orientation + 0.5;
-  }
-  const firstPoint = { x: points[0], y: points[1] };
-  const lastPoint = { x: points[points.length - 2], y: points[points.length - 1] };
-  const closedShape = closed;
-  const closedPath = Math.abs(firstPoint.x - lastPoint.x) < eps && Math.abs(firstPoint.y - lastPoint.y) < eps;
-  if (closedShape) {
-    points = points.slice();
-    if (closedPath) {
-      points.pop();
-      points.pop();
-      lastPoint.x = points[points.length - 2];
-      lastPoint.y = points[points.length - 1];
+function parsePathNode(node) {
+  const path = new Path2D();
+  const d = node.getAttribute("d");
+  if (!d || d === "none")
+    return null;
+  path.addData(d);
+  return path;
+}
+
+const RE$1 = /([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;
+function parsePolygonNode(node) {
+  const path = new Path2D();
+  let index = 0;
+  node.getAttribute("points")?.replace(RE$1, (match, a, b) => {
+    const x = parseFloatWithUnits(a);
+    const y = parseFloatWithUnits(b);
+    if (index === 0) {
+      path.moveTo(x, y);
+    } else {
+      path.lineTo(x, y);
     }
-    const midPointX = (firstPoint.x + lastPoint.x) * 0.5;
-    const midPointY = (lastPoint.y + firstPoint.y) * 0.5;
-    points.unshift(midPointX, midPointY);
-    points.push(midPointX, midPointY);
-  }
-  const verts = vertices;
-  const length = points.length / 2;
-  let indexCount = points.length;
-  const indexStart = verts.length / 2;
-  const width = style.width / 2;
+    index++;
+    return match;
+  });
+  path.currentCurve.autoClose = true;
+  return path;
+}
+
+const RE = /([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;
+function parsePolylineNode(node) {
+  const path = new Path2D();
+  let index = 0;
+  node.getAttribute("points")?.replace(RE, (match, a, b) => {
+    const x = parseFloatWithUnits(a);
+    const y = parseFloatWithUnits(b);
+    if (index === 0) {
+      path.moveTo(x, y);
+    } else {
+      path.lineTo(x, y);
+    }
+    index++;
+    return match;
+  });
+  path.currentCurve.autoClose = false;
+  return path;
+}
+
+function parseRectNode(node) {
+  const x = parseFloatWithUnits(node.getAttribute("x") || 0);
+  const y = parseFloatWithUnits(node.getAttribute("y") || 0);
+  const rx = parseFloatWithUnits(node.getAttribute("rx") || node.getAttribute("ry") || 0);
+  const ry = parseFloatWithUnits(node.getAttribute("ry") || node.getAttribute("rx") || 0);
+  const w = parseFloatWithUnits(node.getAttribute("width"));
+  const h = parseFloatWithUnits(node.getAttribute("height"));
+  const bci = 1 - 0.551915024494;
+  const path = new Path2D();
+  path.moveTo(x + rx, y);
+  path.lineTo(x + w - rx, y);
+  if (rx !== 0 || ry !== 0) {
+    path.bezierCurveTo(
+      x + w - rx * bci,
+      y,
+      x + w,
+      y + ry * bci,
+      x + w,
+      y + ry
+    );
+  }
+  path.lineTo(x + w, y + h - ry);
+  if (rx !== 0 || ry !== 0) {
+    path.bezierCurveTo(
+      x + w,
+      y + h - ry * bci,
+      x + w - rx * bci,
+      y + h,
+      x + w - rx,
+      y + h
+    );
+  }
+  path.lineTo(x + rx, y + h);
+  if (rx !== 0 || ry !== 0) {
+    path.bezierCurveTo(
+      x + rx * bci,
+      y + h,
+      x,
+      y + h - ry * bci,
+      x,
+      y + h - ry
+    );
+  }
+  path.lineTo(x, y + ry);
+  if (rx !== 0 || ry !== 0) {
+    path.bezierCurveTo(x, y + ry * bci, x + rx * bci, y, x + rx, y);
+  }
+  return path;
+}
+
+function parseStyle(node, style, stylesheets) {
+  style = Object.assign({}, style);
+  let stylesheetStyles = {};
+  if (node.hasAttribute("class")) {
+    const classSelectors = node.getAttribute("class").split(/\s/).filter(Boolean).map((i) => i.trim());
+    for (let i = 0; i < classSelectors.length; i++) {
+      stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`.${classSelectors[i]}`]);
+    }
+  }
+  if (node.hasAttribute("id")) {
+    stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`#${node.getAttribute("id")}`]);
+  }
+  for (let len = node.style.length, i = 0; i < len; i++) {
+    const name = node.style.item(i);
+    const value = node.style.getPropertyValue(name);
+    style[name] = value;
+    stylesheetStyles[name] = value;
+  }
+  function addStyle(svgName, jsName, adjustFunction = copy) {
+    if (node.hasAttribute(svgName))
+      style[jsName] = adjustFunction(node.getAttribute(svgName));
+    if (stylesheetStyles[svgName])
+      style[jsName] = adjustFunction(stylesheetStyles[svgName]);
+  }
+  function copy(v) {
+    if (v.startsWith("url"))
+      console.warn("url access in attributes is not implemented.");
+    return v;
+  }
+  function clamp(v) {
+    return Math.max(0, Math.min(1, parseFloatWithUnits(v)));
+  }
+  function positive(v) {
+    return Math.max(0, parseFloatWithUnits(v));
+  }
+  function array(v) {
+    return v.split(" ").filter((v2) => v2 !== "").map((v2) => parseFloatWithUnits(v2));
+  }
+  addStyle("fill", "fill");
+  addStyle("fill-opacity", "fillOpacity", clamp);
+  addStyle("fill-rule", "fillRule");
+  addStyle("opacity", "opacity", clamp);
+  addStyle("stroke", "stroke");
+  addStyle("stroke-opacity", "strokeOpacity", clamp);
+  addStyle("stroke-width", "strokeWidth", positive);
+  addStyle("stroke-linecap", "strokeLinecap");
+  addStyle("stroke-linejoin", "strokeLinejoin");
+  addStyle("stroke-miterlimit", "strokeMiterlimit", positive);
+  addStyle("stroke-dasharray", "strokeDasharray", array);
+  addStyle("stroke-dashoffset", "strokeDashoffset", parseFloatWithUnits);
+  addStyle("visibility", "visibility");
+  return style;
+}
+
+function parseNode(node, style, paths = [], stylesheets = {}) {
+  if (node.nodeType !== 1)
+    return paths;
+  let isDefsNode = false;
+  let path = null;
+  let _style = { ...style };
+  switch (node.nodeName) {
+    case "svg":
+      _style = parseStyle(node, _style, stylesheets);
+      break;
+    case "style":
+      parseCSSStylesheet(node, stylesheets);
+      break;
+    case "g":
+      _style = parseStyle(node, _style, stylesheets);
+      break;
+    case "path":
+      _style = parseStyle(node, _style, stylesheets);
+      if (node.hasAttribute("d"))
+        path = parsePathNode(node);
+      break;
+    case "rect":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parseRectNode(node);
+      break;
+    case "polygon":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parsePolygonNode(node);
+      break;
+    case "polyline":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parsePolylineNode(node);
+      break;
+    case "circle":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parseCircleNode(node);
+      break;
+    case "ellipse":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parseEllipseNode(node);
+      break;
+    case "line":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parseLineNode(node);
+      break;
+    case "defs":
+      isDefsNode = true;
+      break;
+    case "use": {
+      _style = parseStyle(node, _style, stylesheets);
+      const href = node.getAttributeNS("http://www.w3.org/1999/xlink", "href") || node.getAttribute("href") || "";
+      const usedNodeId = href.substring(1);
+      const usedNode = node.viewportElement?.getElementById(usedNodeId);
+      if (usedNode) {
+        parseNode(usedNode, _style, paths, stylesheets);
+      } else {
+        console.warn(`'use node' references non-existent node id: ${usedNodeId}`);
+      }
+      break;
+    }
+    default:
+      console.warn(node);
+      break;
+  }
+  if (_style.display === "none") {
+    return paths;
+  }
+  const currentTransform = new Matrix3();
+  const transformStack = [];
+  const transform = getNodeTransform(node, currentTransform, transformStack);
+  if (path) {
+    path.applyTransform(currentTransform);
+    paths.push(path);
+    path.style = { ..._style };
+  }
+  const childNodes = node.childNodes;
+  for (let i = 0, len = childNodes.length; i < len; i++) {
+    const node2 = childNodes[i];
+    if (isDefsNode && node2.nodeName !== "style" && node2.nodeName !== "defs")
+      continue;
+    parseNode(node2, _style, paths, stylesheets);
+  }
+  if (transform) {
+    transformStack.pop();
+    if (transformStack.length > 0) {
+      currentTransform.copy(transformStack[transformStack.length - 1]);
+    } else {
+      currentTransform.identity();
+    }
+  }
+  return paths;
+}
+
+function svgToPath2DSet(svg) {
+  const dom = svgToDom(svg);
+  return new Path2DSet(
+    parseNode(dom, {}),
+    dom.getAttribute("viewBox")?.trim().split(" ").map((v) => Number(v))
+  );
+}
+
+function catmullRom(t, p0, p1, p2, p3) {
+  const v0 = (p2 - p0) * 0.5;
+  const v1 = (p3 - p1) * 0.5;
+  const t2 = t * t;
+  const t3 = t * t2;
+  return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
+}
+
+function cubicBezierP0(t, p) {
+  const k = 1 - t;
+  return k * k * k * p;
+}
+function cubicBezierP1(t, p) {
+  const k = 1 - t;
+  return 3 * k * k * t * p;
+}
+function cubicBezierP2(t, p) {
+  return 3 * (1 - t) * t * t * p;
+}
+function cubicBezierP3(t, p) {
+  return t * t * t * p;
+}
+function cubicBezier(t, p0, p1, p2, p3) {
+  return cubicBezierP0(t, p0) + cubicBezierP1(t, p1) + cubicBezierP2(t, p2) + cubicBezierP3(t, p3);
+}
+
+function fillTriangulate(pointArray, options = {}) {
+  let {
+    vertices = [],
+    indices = [],
+    holes = [],
+    verticesStride = 2,
+    verticesOffset = vertices.length / verticesStride,
+    indicesOffset = indices.length
+  } = options;
+  const triangles = earcut(pointArray, holes, 2);
+  if (triangles.length) {
+    for (let i = 0; i < triangles.length; i += 3) {
+      indices[indicesOffset++] = triangles[i] + verticesOffset;
+      indices[indicesOffset++] = triangles[i + 1] + verticesOffset;
+      indices[indicesOffset++] = triangles[i + 2] + verticesOffset;
+    }
+    let index = verticesOffset * verticesStride;
+    for (let i = 0; i < pointArray.length; i += 2) {
+      vertices[index] = pointArray[i];
+      vertices[index + 1] = pointArray[i + 1];
+      index += verticesStride;
+    }
+  }
+  return {
+    vertices,
+    indices
+  };
+}
+
+const RECURSION_LIMIT$1 = 8;
+const FLT_EPSILON$1 = 11920929e-14;
+const PATH_DISTANCE_EPSILON$1 = 1;
+function getAdaptiveCubicBezierCurvePoints(sX, sY, x1, y1, x2, y2, x, y, smoothness = 0.5, points = []) {
+  const scale = 1;
+  const smoothing = Math.min(
+    0.99,
+    // a value of 1.0 actually inverts smoothing, so we cap it at 0.99
+    Math.max(0, smoothness)
+  );
+  let distanceTolerance = (PATH_DISTANCE_EPSILON$1 - smoothing) / scale;
+  distanceTolerance *= distanceTolerance;
+  recursive$1(sX, sY, x1, y1, x2, y2, x, y, points, distanceTolerance, 0);
+  points.push(x, y);
+  return points;
+}
+function recursive$1(x1, y1, x2, y2, x3, y3, x4, y4, points, distanceTolerance, level) {
+  if (level > RECURSION_LIMIT$1)
+    return;
+  const x12 = (x1 + x2) / 2;
+  const y12 = (y1 + y2) / 2;
+  const x23 = (x2 + x3) / 2;
+  const y23 = (y2 + y3) / 2;
+  const x34 = (x3 + x4) / 2;
+  const y34 = (y3 + y4) / 2;
+  const x123 = (x12 + x23) / 2;
+  const y123 = (y12 + y23) / 2;
+  const x234 = (x23 + x34) / 2;
+  const y234 = (y23 + y34) / 2;
+  const x1234 = (x123 + x234) / 2;
+  const y1234 = (y123 + y234) / 2;
+  if (level > 0) {
+    let dx = x4 - x1;
+    let dy = y4 - y1;
+    const d2 = Math.abs((x2 - x4) * dy - (y2 - y4) * dx);
+    const d3 = Math.abs((x3 - x4) * dy - (y3 - y4) * dx);
+    if (d2 > FLT_EPSILON$1 && d3 > FLT_EPSILON$1) {
+      if ((d2 + d3) * (d2 + d3) <= distanceTolerance * (dx * dx + dy * dy)) {
+        {
+          points.push(x1234, y1234);
+          return;
+        }
+      }
+    } else if (d2 > FLT_EPSILON$1) {
+      if (d2 * d2 <= distanceTolerance * (dx * dx + dy * dy)) {
+        {
+          points.push(x1234, y1234);
+          return;
+        }
+      }
+    } else if (d3 > FLT_EPSILON$1) {
+      if (d3 * d3 <= distanceTolerance * (dx * dx + dy * dy)) {
+        {
+          points.push(x1234, y1234);
+          return;
+        }
+      }
+    } else {
+      dx = x1234 - (x1 + x4) / 2;
+      dy = y1234 - (y1 + y4) / 2;
+      if (dx * dx + dy * dy <= distanceTolerance) {
+        points.push(x1234, y1234);
+        return;
+      }
+    }
+  }
+  recursive$1(x1, y1, x12, y12, x123, y123, x1234, y1234, points, distanceTolerance, level + 1);
+  recursive$1(x1234, y1234, x234, y234, x34, y34, x4, y4, points, distanceTolerance, level + 1);
+}
+
+const RECURSION_LIMIT = 8;
+const FLT_EPSILON = 11920929e-14;
+const PATH_DISTANCE_EPSILON = 1;
+function getAdaptiveQuadraticBezierCurvePoints(sX, sY, x1, y1, x, y, smoothness = 0.5, points = []) {
+  const scale = 1;
+  const smoothing = Math.min(
+    0.99,
+    // a value of 1.0 actually inverts smoothing, so we cap it at 0.99
+    Math.max(0, smoothness)
+  );
+  let distanceTolerance = (PATH_DISTANCE_EPSILON - smoothing) / scale;
+  distanceTolerance *= distanceTolerance;
+  recursive(points, sX, sY, x1, y1, x, y, distanceTolerance, 0);
+  points.push(x, y);
+  return points;
+}
+function recursive(points, x1, y1, x2, y2, x3, y3, distanceTolerance, level) {
+  if (level > RECURSION_LIMIT)
+    return;
+  const x12 = (x1 + x2) / 2;
+  const y12 = (y1 + y2) / 2;
+  const x23 = (x2 + x3) / 2;
+  const y23 = (y2 + y3) / 2;
+  const x123 = (x12 + x23) / 2;
+  const y123 = (y12 + y23) / 2;
+  let dx = x3 - x1;
+  let dy = y3 - y1;
+  const d = Math.abs((x2 - x3) * dy - (y2 - y3) * dx);
+  if (d > FLT_EPSILON) {
+    if (d * d <= distanceTolerance * (dx * dx + dy * dy)) {
+      {
+        points.push(x123, y123);
+        return;
+      }
+    }
+  } else {
+    dx = x123 - (x1 + x3) / 2;
+    dy = y123 - (y1 + y3) / 2;
+    if (dx * dx + dy * dy <= distanceTolerance) {
+      points.push(x123, y123);
+      return;
+    }
+  }
+  recursive(points, x1, y1, x12, y12, x123, y123, distanceTolerance, level + 1);
+  recursive(points, x123, y123, x23, y23, x3, y3, distanceTolerance, level + 1);
+}
+
+function getDirectedArea(vertices) {
+  let area = 0;
+  const n = vertices.length;
+  for (let i = 0; i < n; i += 2) {
+    const x0 = vertices[i];
+    const y0 = vertices[i + 1];
+    const x1 = vertices[(i + 2) % (n - 1)];
+    const y1 = vertices[(i + 3) % n];
+    area += x0 * y1 - x1 * y0;
+  }
+  return area / 2;
+}
+
+function pointInPolygon(point, polygon) {
+  let inside = false;
+  const [x, y] = point;
+  const len = polygon.length / 2;
+  for (let i = 0, j = len - 1; i < len; j = i++) {
+    const xi = polygon[i * 2];
+    const yi = polygon[i * 2 + 1];
+    const xj = polygon[j * 2];
+    const yj = polygon[j * 2 + 1];
+    if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) {
+      inside = !inside;
+    }
+  }
+  return inside;
+}
+
+function quadraticBezierP0(t, p) {
+  const k = 1 - t;
+  return k * k * p;
+}
+function quadraticBezierP1(t, p) {
+  return 2 * (1 - t) * t * p;
+}
+function quadraticBezierP2(t, p) {
+  return t * t * p;
+}
+function quadraticBezier(t, p0, p1, p2) {
+  return quadraticBezierP0(t, p0) + quadraticBezierP1(t, p1) + quadraticBezierP2(t, p2);
+}
+
+const closePointEps = 1e-4;
+const curveEps = 1e-4;
+function strokeTriangulate(points, options = {}) {
+  const {
+    vertices = [],
+    indices = [],
+    lineStyle = {
+      alignment: 0.5,
+      cap: "butt",
+      join: "miter",
+      width: 1,
+      miterLimit: 10
+    },
+    flipAlignment = false,
+    closed = true
+  } = options;
+  const eps = closePointEps;
+  if (points.length === 0) {
+    return { vertices, indices };
+  }
+  const style = lineStyle;
+  let alignment = style.alignment;
+  if (lineStyle.alignment !== 0.5) {
+    let orientation = getOrientationOfPoints(points);
+    if (flipAlignment)
+      orientation *= -1;
+    alignment = (alignment - 0.5) * orientation + 0.5;
+  }
+  const firstPoint = { x: points[0], y: points[1] };
+  const lastPoint = { x: points[points.length - 2], y: points[points.length - 1] };
+  const closedShape = closed;
+  const closedPath = Math.abs(firstPoint.x - lastPoint.x) < eps && Math.abs(firstPoint.y - lastPoint.y) < eps;
+  if (closedShape) {
+    points = points.slice();
+    if (closedPath) {
+      points.pop();
+      points.pop();
+      lastPoint.x = points[points.length - 2];
+      lastPoint.y = points[points.length - 1];
+    }
+    const midPointX = (firstPoint.x + lastPoint.x) * 0.5;
+    const midPointY = (lastPoint.y + firstPoint.y) * 0.5;
+    points.unshift(midPointX, midPointY);
+    points.push(midPointX, midPointY);
+  }
+  const verts = vertices;
+  const length = points.length / 2;
+  let indexCount = points.length;
+  const indexStart = verts.length / 2;
+  const width = style.width / 2;
   const widthSquared = width * width;
   const miterLimitSquared = style.miterLimit * style.miterLimit;
   let x0 = points[0];
@@ -1838,9 +2367,9 @@ class Curve {
   }
 }
 
-const tempTransform0$1 = new Matrix3();
-const tempTransform1$1 = new Matrix3();
-const tempTransform2$1 = new Matrix3();
+const tempTransform0 = new Matrix3();
+const tempTransform1 = new Matrix3();
+const tempTransform2 = new Matrix3();
 const tempV2 = new Vector2();
 class RoundCurve extends Curve {
   constructor(_center = new Vector2(), _radius = new Vector2(), _diff = new Vector2(), rotate = 0, startAngle = 0, endAngle = Math.PI * 2, clockwise = false) {
@@ -2118,7 +2647,7 @@ function transfEllipseGeneric(curve, m) {
   const v2 = new Vector2(-b * sinTheta, b * cosTheta);
   const f1 = v1.applyMatrix3(m);
   const f2 = v2.applyMatrix3(m);
-  const mF = tempTransform0$1.set(
+  const mF = tempTransform0.set(
     f1.x,
     f2.x,
     0,
@@ -2129,8 +2658,8 @@ function transfEllipseGeneric(curve, m) {
     0,
     1
   );
-  const mFInv = tempTransform1$1.copy(mF).invert();
-  const mFInvT = tempTransform2$1.copy(mFInv).transpose();
+  const mFInv = tempTransform1.copy(mF).invert();
+  const mFInvT = tempTransform2.copy(mFInv).transpose();
   const mQ = mFInvT.multiply(mFInv);
   const mQe = mQ.elements;
   const ed = eigenDecomposition(mQe[0], mQe[1], mQe[4]);
@@ -2141,7 +2670,7 @@ function transfEllipseGeneric(curve, m) {
   curve.rotate = Math.atan2(ed.sn, ed.cs);
   const isFullEllipse = (curve.endAngle - curve.startAngle) % (2 * Math.PI) < Number.EPSILON;
   if (!isFullEllipse) {
-    const mDsqrt = tempTransform1$1.set(
+    const mDsqrt = tempTransform1.set(
       rt1sqrt,
       0,
       0,
@@ -2152,7 +2681,7 @@ function transfEllipseGeneric(curve, m) {
       0,
       1
     );
-    const mRT = tempTransform2$1.set(
+    const mRT = tempTransform2.set(
       ed.cs,
       ed.sn,
       0,
@@ -2622,1561 +3151,1032 @@ class CubicBezierCurve extends Curve {
     this.p2.copy(source.p2);
     return this;
   }
-}
-
-class EllipseCurve extends RoundCurve {
-  constructor(cx = 0, cy = 0, rx = 1, ry = 1, rotate = 0, startAngle = 0, endAngle = Math.PI * 2, clockwise = false) {
-    super(
-      new Vector2(cx, cy),
-      new Vector2(rx, ry),
-      new Vector2(),
-      rotate,
-      startAngle,
-      endAngle,
-      clockwise
-    );
-  }
-  drawTo(ctx) {
-    ctx.ellipse(
-      this.cx,
-      this.cy,
-      this.rx,
-      this.ry,
-      this.rotate,
-      this.startAngle,
-      this.endAngle,
-      !this.clockwise
-    );
-    return this;
-  }
-}
-
-class PloygonCurve extends CompositeCurve {
-  //
-}
-
-class EquilateralPloygonCurve extends PloygonCurve {
-  constructor(cx = 0, cy = 0, radius = 1, sideCount = 3) {
-    super();
-    this.cx = cx;
-    this.cy = cy;
-    this.radius = radius;
-    this.sideCount = sideCount;
-    this.update();
-  }
-  update() {
-    const { cx, cy, radius, sideCount } = this;
-    const points = [];
-    for (let i = 0; i < sideCount; i++) {
-      const radian = i * 2 * Math.PI / sideCount - 0.5 * Math.PI;
-      points.push(
-        new Vector2(
-          radius * Math.cos(radian),
-          radius * Math.sin(radian)
-        ).add({ x: cx, y: cy })
-      );
-    }
-    const curves = [];
-    for (let i = 0; i < sideCount; i++) {
-      curves.push(
-        new LineCurve(
-          points[i],
-          points[(i + 1) % sideCount]
-        )
-      );
-    }
-    this.curves = curves;
-    return this;
-  }
-  copy(source) {
-    super.copy(source);
-    this.cx = source.cx;
-    this.cy = source.cy;
-    this.radius = source.radius;
-    this.sideCount = source.sideCount;
-    this.update();
-    return this;
-  }
-}
-
-class QuadraticBezierCurve extends Curve {
-  constructor(p1 = new Vector2(), cp = new Vector2(), p2 = new Vector2()) {
-    super();
-    this.p1 = p1;
-    this.cp = cp;
-    this.p2 = p2;
-  }
-  static from(p1x, p1y, cpx, cpy, p2x, p2y) {
-    return new QuadraticBezierCurve(
-      new Vector2(p1x, p1y),
-      new Vector2(cpx, cpy),
-      new Vector2(p2x, p2y)
-    );
-  }
-  getPoint(t, output = new Vector2()) {
-    const { p1, cp, p2 } = this;
-    output.set(
-      quadraticBezier(t, p1.x, cp.x, p2.x),
-      quadraticBezier(t, p1.y, cp.y, p2.y)
-    );
-    return output;
-  }
-  getControlPointRefs() {
-    return [this.p1, this.cp, this.p2];
-  }
-  getAdaptiveVertices(output = []) {
-    return getAdaptiveQuadraticBezierCurvePoints(
-      this.p1.x,
-      this.p1.y,
-      this.cp.x,
-      this.cp.y,
-      this.p2.x,
-      this.p2.y,
-      0.5,
-      output
-    );
-  }
-  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-    const { p1, cp, p2 } = this;
-    const x1 = 0.5 * (p1.x + cp.x);
-    const y1 = 0.5 * (p1.y + cp.y);
-    const x2 = 0.5 * (p1.x + p2.x);
-    const y2 = 0.5 * (p1.y + p2.y);
-    min.x = Math.min(min.x, p1.x, p2.x, x1, x2);
-    min.y = Math.min(min.y, p1.y, p2.y, y1, y2);
-    max.x = Math.max(max.x, p1.x, p2.x, x1, x2);
-    max.y = Math.max(max.y, p1.y, p2.y, y1, y2);
-    return { min: min.finite(), max: max.finite() };
-  }
-  toCommands() {
-    const { p1, cp, p2 } = this;
-    return [
-      { type: "M", x: p1.x, y: p1.y },
-      { type: "Q", x1: cp.x, y1: cp.y, x: p2.x, y: p2.y }
-    ];
-  }
-  drawTo(ctx) {
-    const { p1, cp, p2 } = this;
-    ctx.lineTo(p1.x, p1.y);
-    ctx.quadraticCurveTo(cp.x, cp.y, p2.x, p2.y);
-    return this;
-  }
-  copy(source) {
-    super.copy(source);
-    this.p1.copy(source.p1);
-    this.cp.copy(source.cp);
-    this.p2.copy(source.p2);
-    return this;
-  }
-}
-
-class RectangleCurve extends PloygonCurve {
-  constructor(x = 0, y = 0, width = 0, height = 0) {
-    super();
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-    this.update();
-  }
-  update() {
-    const { x, y, width, height } = this;
-    const points = [
-      new Vector2(x, y),
-      new Vector2(x + width, y),
-      new Vector2(x + width, y + height),
-      new Vector2(x, y + height)
-    ];
-    this.curves = [
-      new LineCurve(points[0], points[1]),
-      new LineCurve(points[1], points[2]),
-      new LineCurve(points[2], points[3]),
-      new LineCurve(points[3], points[0])
-    ];
-    return this;
-  }
-  drawTo(ctx) {
-    ctx.rect(this.x, this.y, this.width, this.height);
-    return this;
-  }
-  getFillVertices(_options = {}) {
-    const { x, y, width, height } = this;
-    return [
-      x,
-      y,
-      x + width,
-      y,
-      x + width,
-      y + height,
-      x,
-      y + height
-    ];
+}
+
+class EllipseCurve extends RoundCurve {
+  constructor(cx = 0, cy = 0, rx = 1, ry = 1, rotate = 0, startAngle = 0, endAngle = Math.PI * 2, clockwise = false) {
+    super(
+      new Vector2(cx, cy),
+      new Vector2(rx, ry),
+      new Vector2(),
+      rotate,
+      startAngle,
+      endAngle,
+      clockwise
+    );
   }
-  copy(source) {
-    super.copy(source);
-    this.x = source.x;
-    this.y = source.y;
-    this.width = source.width;
-    this.height = source.height;
-    this.update();
+  drawTo(ctx) {
+    ctx.ellipse(
+      this.cx,
+      this.cy,
+      this.rx,
+      this.ry,
+      this.rotate,
+      this.startAngle,
+      this.endAngle,
+      !this.clockwise
+    );
     return this;
   }
 }
 
-class RoundRectangleCurve extends RoundCurve {
-  constructor(x = 0, y = 0, width = 1, height = 1, radius = 1) {
+class PloygonCurve extends CompositeCurve {
+  //
+}
+
+class EquilateralPloygonCurve extends PloygonCurve {
+  constructor(cx = 0, cy = 0, radius = 1, sideCount = 3) {
     super();
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
+    this.cx = cx;
+    this.cy = cy;
     this.radius = radius;
+    this.sideCount = sideCount;
     this.update();
   }
   update() {
-    const { x, y, width, height, radius } = this;
-    const halfWidth = width / 2;
-    const halfHeight = height / 2;
-    const cx = x + halfWidth;
-    const cy = y + halfHeight;
-    const rx = Math.max(0, Math.min(radius, Math.min(halfWidth, halfHeight)));
-    const ry = rx;
-    this._center = new Vector2(cx, cy);
-    this._radius = new Vector2(rx, ry);
-    this._diff = new Vector2(halfWidth - rx, halfHeight - ry);
-    return this;
-  }
-  drawTo(ctx) {
-    const { x, y, width, height, radius } = this;
-    ctx.roundRect(x, y, width, height, radius);
+    const { cx, cy, radius, sideCount } = this;
+    const points = [];
+    for (let i = 0; i < sideCount; i++) {
+      const radian = i * 2 * Math.PI / sideCount - 0.5 * Math.PI;
+      points.push(
+        new Vector2(
+          radius * Math.cos(radian),
+          radius * Math.sin(radian)
+        ).add({ x: cx, y: cy })
+      );
+    }
+    const curves = [];
+    for (let i = 0; i < sideCount; i++) {
+      curves.push(
+        new LineCurve(
+          points[i],
+          points[(i + 1) % sideCount]
+        )
+      );
+    }
+    this.curves = curves;
     return this;
   }
   copy(source) {
     super.copy(source);
-    this.x = source.x;
-    this.y = source.y;
-    this.width = source.width;
-    this.height = source.height;
+    this.cx = source.cx;
+    this.cy = source.cy;
     this.radius = source.radius;
+    this.sideCount = source.sideCount;
     this.update();
     return this;
   }
 }
 
-class SplineCurve extends Curve {
-  constructor(points = []) {
+class QuadraticBezierCurve extends Curve {
+  constructor(p1 = new Vector2(), cp = new Vector2(), p2 = new Vector2()) {
     super();
-    this.points = points;
+    this.p1 = p1;
+    this.cp = cp;
+    this.p2 = p2;
+  }
+  static from(p1x, p1y, cpx, cpy, p2x, p2y) {
+    return new QuadraticBezierCurve(
+      new Vector2(p1x, p1y),
+      new Vector2(cpx, cpy),
+      new Vector2(p2x, p2y)
+    );
   }
   getPoint(t, output = new Vector2()) {
-    const { points } = this;
-    const p = (points.length - 1) * t;
-    const _p = Math.floor(p);
-    const weight = p - _p;
-    const p0 = points[_p === 0 ? _p : _p - 1];
-    const p1 = points[_p];
-    const p2 = points[_p > points.length - 2 ? points.length - 1 : _p + 1];
-    const p3 = points[_p > points.length - 3 ? points.length - 1 : _p + 2];
+    const { p1, cp, p2 } = this;
     output.set(
-      catmullRom(weight, p0.x, p1.x, p2.x, p3.x),
-      catmullRom(weight, p0.y, p1.y, p2.y, p3.y)
+      quadraticBezier(t, p1.x, cp.x, p2.x),
+      quadraticBezier(t, p1.y, cp.y, p2.y)
     );
     return output;
   }
   getControlPointRefs() {
-    return this.points;
-  }
-  copy(source) {
-    super.copy(source);
-    this.points = [];
-    for (let i = 0, len = source.points.length; i < len; i++) {
-      this.points.push(source.points[i].clone());
-    }
-    return this;
-  }
-}
-
-class CurvePath extends CompositeCurve {
-  startPoint;
-  currentPoint;
-  autoClose = false;
-  constructor(points) {
-    super();
-    if (points) {
-      this.addPoints(points);
-    }
-  }
-  addPoints(points) {
-    this.moveTo(points[0].x, points[0].y);
-    for (let i = 1, len = points.length; i < len; i++) {
-      const { x, y } = points[i];
-      this.lineTo(x, y);
-    }
-    return this;
-  }
-  addCommands(commands) {
-    svgPathCommandsAddToPath2D(commands, this);
-    return this;
-  }
-  addData(data) {
-    this.addCommands(svgPathDataToCommands(data));
-    return this;
-  }
-  _closeVertices(output) {
-    if (this.autoClose && output.length >= 4 && (output[0] !== output[output.length - 2] && output[1] !== output[output.length - 1])) {
-      output.push(output[0], output[1]);
-    }
-    return output;
-  }
-  getUnevenVertices(count = 40, output = []) {
-    return this._closeVertices(
-      super.getUnevenVertices(count, output)
-    );
-  }
-  getSpacedVertices(count = 40, output = []) {
-    return this._closeVertices(
-      super.getSpacedVertices(count, output)
-    );
+    return [this.p1, this.cp, this.p2];
   }
   getAdaptiveVertices(output = []) {
-    return this._closeVertices(
-      super.getAdaptiveVertices(output)
-    );
-  }
-  getFillVertices(options) {
-    return this._closeVertices(
-      super.getFillVertices(options)
+    return getAdaptiveQuadraticBezierCurvePoints(
+      this.p1.x,
+      this.p1.y,
+      this.cp.x,
+      this.cp.y,
+      this.p2.x,
+      this.p2.y,
+      0.5,
+      output
     );
   }
-  _setCurrentPoint(point) {
-    this.currentPoint = new Vector2(point.x, point.y);
-    if (!this.startPoint) {
-      this.startPoint = this.currentPoint.clone();
-    }
-    return this;
-  }
-  _connetLineTo(curve) {
-    if (this.curves.length > 0) {
-      const first = curve.getPoint(0);
-      if (!this.currentPoint || !first.equals(this.currentPoint)) {
-        this.lineTo(first.x, first.y);
-      }
-    }
-    return this;
-  }
-  closePath() {
-    const start = this.startPoint;
-    if (start) {
-      const end = this.currentPoint;
-      if (end && !start.equals(end)) {
-        this.curves.push(new LineCurve(end.clone(), start.clone()));
-        end.copy(start);
-      }
-      this.startPoint = void 0;
-    }
-    return this;
-  }
-  moveTo(x, y) {
-    this.currentPoint = new Vector2(x, y);
-    this.startPoint = this.currentPoint.clone();
-    return this;
-  }
-  lineTo(x, y) {
-    const start = this.currentPoint;
-    if (!start?.equals({ x, y })) {
-      this.curves.push(
-        LineCurve.from(
-          start?.x ?? 0,
-          start?.y ?? 0,
-          x,
-          y
-        )
-      );
-    }
-    this._setCurrentPoint({ x, y });
-    return this;
-  }
-  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
-    const start = this.currentPoint;
-    if (!start?.equals({ x, y })) {
-      this.curves.push(
-        CubicBezierCurve.from(
-          start?.x ?? 0,
-          start?.y ?? 0,
-          cp1x,
-          cp1y,
-          cp2x,
-          cp2y,
-          x,
-          y
-        )
-      );
-    }
-    this._setCurrentPoint({ x, y });
-    return this;
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
+    const { p1, cp, p2 } = this;
+    const x1 = 0.5 * (p1.x + cp.x);
+    const y1 = 0.5 * (p1.y + cp.y);
+    const x2 = 0.5 * (p1.x + p2.x);
+    const y2 = 0.5 * (p1.y + p2.y);
+    min.x = Math.min(min.x, p1.x, p2.x, x1, x2);
+    min.y = Math.min(min.y, p1.y, p2.y, y1, y2);
+    max.x = Math.max(max.x, p1.x, p2.x, x1, x2);
+    max.y = Math.max(max.y, p1.y, p2.y, y1, y2);
+    return { min: min.finite(), max: max.finite() };
   }
-  quadraticCurveTo(cpx, cpy, x, y) {
-    const start = this.currentPoint;
-    if (!start?.equals({ x, y })) {
-      this.curves.push(
-        QuadraticBezierCurve.from(
-          start?.x ?? 0,
-          start?.y ?? 0,
-          cpx,
-          cpy,
-          x,
-          y
-        )
-      );
-    }
-    this._setCurrentPoint({ x, y });
+  toCommands() {
+    const { p1, cp, p2 } = this;
+    return [
+      { type: "M", x: p1.x, y: p1.y },
+      { type: "Q", x1: cp.x, y1: cp.y, x: p2.x, y: p2.y }
+    ];
+  }
+  drawTo(ctx) {
+    const { p1, cp, p2 } = this;
+    ctx.lineTo(p1.x, p1.y);
+    ctx.quadraticCurveTo(cp.x, cp.y, p2.x, p2.y);
     return this;
   }
-  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
-    const curve = new ArcCurve(
-      x,
-      y,
-      radius,
-      startAngle,
-      endAngle,
-      !counterclockwise
-    );
-    this._connetLineTo(curve);
-    this.curves.push(curve);
-    this._setCurrentPoint(curve.getPoint(1));
+  copy(source) {
+    super.copy(source);
+    this.p1.copy(source.p1);
+    this.cp.copy(source.cp);
+    this.p2.copy(source.p2);
     return this;
   }
-  relativeArc(x, y, radius, startAngle, endAngle, counterclockwise) {
-    x += this.currentPoint?.x ?? 0;
-    y += this.currentPoint?.y ?? 0;
-    this.arc(x, y, radius, startAngle, endAngle, counterclockwise);
+}
+
+class RectangleCurve extends PloygonCurve {
+  constructor(x = 0, y = 0, width = 0, height = 0) {
+    super();
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.update();
+  }
+  update() {
+    const { x, y, width, height } = this;
+    const points = [
+      new Vector2(x, y),
+      new Vector2(x + width, y),
+      new Vector2(x + width, y + height),
+      new Vector2(x, y + height)
+    ];
+    this.curves = [
+      new LineCurve(points[0], points[1]),
+      new LineCurve(points[1], points[2]),
+      new LineCurve(points[2], points[3]),
+      new LineCurve(points[3], points[0])
+    ];
     return this;
   }
-  // TODO
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  arcTo(x1, y1, x2, y2, radius) {
-    console.warn("Method arcTo not supported yet");
+  drawTo(ctx) {
+    ctx.rect(this.x, this.y, this.width, this.height);
     return this;
   }
-  ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise = true) {
-    const curve = new EllipseCurve(
+  getFillVertices(_options = {}) {
+    const { x, y, width, height } = this;
+    return [
       x,
       y,
-      radiusX,
-      radiusY,
-      rotation,
-      startAngle,
-      endAngle,
-      !counterclockwise
-    );
-    this._connetLineTo(curve);
-    this.curves.push(curve);
-    this._setCurrentPoint(curve.getPoint(1));
-    return this;
-  }
-  relativeEllipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-    x += this.currentPoint?.x ?? 0;
-    y += this.currentPoint?.y ?? 0;
-    this.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
-    return this;
+      x + width,
+      y,
+      x + width,
+      y + height,
+      x,
+      y + height
+    ];
   }
-  rect(x, y, width, height) {
-    const curve = new RectangleCurve(x, y, width, height);
-    this._connetLineTo(curve);
-    this.curves.push(curve);
-    this._setCurrentPoint({ x, y });
+  copy(source) {
+    super.copy(source);
+    this.x = source.x;
+    this.y = source.y;
+    this.width = source.width;
+    this.height = source.height;
+    this.update();
     return this;
   }
-  roundRect(x, y, width, height, radii) {
-    const curve = new RoundRectangleCurve(x, y, width, height, radii);
-    this._connetLineTo(curve);
-    this.curves.push(curve);
-    this._setCurrentPoint({ x, y });
-    return this;
+}
+
+class RoundRectangleCurve extends RoundCurve {
+  constructor(x = 0, y = 0, width = 1, height = 1, radius = 1) {
+    super();
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.radius = radius;
+    this.update();
   }
-  splineThru(points) {
-    const currentPoint = this.currentPoint ?? new Vector2();
-    this.curves.push(new SplineCurve([currentPoint].concat(points)));
-    this._setCurrentPoint(points[points.length - 1]);
+  update() {
+    const { x, y, width, height, radius } = this;
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const cx = x + halfWidth;
+    const cy = y + halfHeight;
+    const rx = Math.max(0, Math.min(radius, Math.min(halfWidth, halfHeight)));
+    const ry = rx;
+    this._center = new Vector2(cx, cy);
+    this._radius = new Vector2(rx, ry);
+    this._diff = new Vector2(halfWidth - rx, halfHeight - ry);
     return this;
   }
   drawTo(ctx) {
-    const point = this.curves[0]?.getPoint(0);
-    if (point) {
-      ctx.moveTo(point.x, point.y);
-    }
-    this.curves.forEach((curve) => curve.drawTo(ctx));
-    if (this.autoClose) {
-      ctx.closePath();
-    }
+    const { x, y, width, height, radius } = this;
+    ctx.roundRect(x, y, width, height, radius);
     return this;
   }
   copy(source) {
     super.copy(source);
-    this.autoClose = source.autoClose;
-    this.currentPoint = source.currentPoint?.clone();
+    this.x = source.x;
+    this.y = source.y;
+    this.width = source.width;
+    this.height = source.height;
+    this.radius = source.radius;
+    this.update();
     return this;
   }
 }
 
-function toKebabCase(str) {
-  return str.replace(/[^a-z0-9]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
-}
-function getIntersectionPoint(p1, p2, q1, q2) {
-  const r = p2.clone().sub(p1);
-  const s = q2.clone().sub(q1);
-  const q1p1 = q1.clone().sub(p1);
-  const crossRS = r.cross(s);
-  if (crossRS === 0) {
-    return new Vector2(
-      (p1.x + q1.x) / 2,
-      (p1.y + q1.y) / 2
-    );
+class SplineCurve extends Curve {
+  constructor(points = []) {
+    super();
+    this.points = points;
   }
-  const t = q1p1.cross(s) / crossRS;
-  if (Math.abs(t) > 1) {
-    return new Vector2(
-      (p1.x + q1.x) / 2,
-      (p1.y + q1.y) / 2
+  getPoint(t, output = new Vector2()) {
+    const { points } = this;
+    const p = (points.length - 1) * t;
+    const _p = Math.floor(p);
+    const weight = p - _p;
+    const p0 = points[_p === 0 ? _p : _p - 1];
+    const p1 = points[_p];
+    const p2 = points[_p > points.length - 2 ? points.length - 1 : _p + 1];
+    const p3 = points[_p > points.length - 3 ? points.length - 1 : _p + 2];
+    output.set(
+      catmullRom(weight, p0.x, p1.x, p2.x, p3.x),
+      catmullRom(weight, p0.y, p1.y, p2.y, p3.y)
     );
+    return output;
   }
-  return new Vector2(
-    p1.x + t * r.x,
-    p1.y + t * r.y
-  );
-}
-
-class Path2D extends CompositeCurve {
-  currentCurve = new CurvePath();
-  style;
-  get startPoint() {
-    return this.currentCurve.startPoint;
-  }
-  get currentPoint() {
-    return this.currentCurve.currentPoint;
-  }
-  get strokeWidth() {
-    return this.style.strokeWidth ?? ((this.style.stroke ?? "none") === "none" ? 0 : 1);
-  }
-  constructor(path, style = {}) {
-    super();
-    this.curves.push(this.currentCurve);
-    this.style = style;
-    if (path) {
-      if (path instanceof Path2D) {
-        this.addPath(path);
-      } else if (Array.isArray(path)) {
-        this.addCommands(path);
-      } else {
-        this.addData(path);
-      }
-    }
+  getControlPointRefs() {
+    return this.points;
   }
-  addPath(path) {
-    const index = this.curves.findIndex((v) => v === this.currentCurve);
-    if (index > -1) {
-      this.curves.splice(index, 1);
-    }
-    if (path instanceof Path2D) {
-      this.curves.push(
-        ...path.curves.filter((curvePath) => curvePath.curves.length).map((v) => v.clone())
-      );
-    } else if (path.curves.length) {
-      this.curves.push(path);
+  copy(source) {
+    super.copy(source);
+    this.points = [];
+    for (let i = 0, len = source.points.length; i < len; i++) {
+      this.points.push(source.points[i].clone());
     }
-    this.curves.push(this.currentCurve);
     return this;
   }
-  closePath() {
-    const startPoint = this.startPoint;
-    if (startPoint) {
-      this.currentCurve.closePath();
-      if (this.currentCurve.curves.length) {
-        this.currentCurve = new CurvePath().moveTo(startPoint.x, startPoint.y);
-        this.curves.push(this.currentCurve);
-      }
+}
+
+class CurvePath extends CompositeCurve {
+  startPoint;
+  currentPoint;
+  autoClose = false;
+  constructor(points) {
+    super();
+    if (points) {
+      this.addPoints(points);
     }
-    return this;
   }
-  moveTo(x, y) {
-    if (!this.currentCurve.currentPoint?.equals({ x, y })) {
-      if (this.currentCurve.curves.length) {
-        this.currentCurve = new CurvePath();
-        this.curves.push(this.currentCurve);
-      }
-      this.currentCurve.moveTo(x, y);
+  addPoints(points) {
+    this.moveTo(points[0].x, points[0].y);
+    for (let i = 1, len = points.length; i < len; i++) {
+      const { x, y } = points[i];
+      this.lineTo(x, y);
     }
     return this;
   }
-  lineTo(x, y) {
-    this.currentCurve.lineTo(x, y);
+  addCommands(commands) {
+    svgPathCommandsAddToPath2D(commands, this);
     return this;
   }
-  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
-    this.currentCurve.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+  addData(data) {
+    this.addCommands(svgPathDataToCommands(data));
     return this;
   }
-  quadraticCurveTo(cpx, cpy, x, y) {
-    this.currentCurve.quadraticCurveTo(cpx, cpy, x, y);
-    return this;
+  _closeVertices(output) {
+    if (this.autoClose && output.length >= 4 && (output[0] !== output[output.length - 2] && output[1] !== output[output.length - 1])) {
+      output.push(output[0], output[1]);
+    }
+    return output;
   }
-  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
-    this.currentCurve.arc(x, y, radius, startAngle, endAngle, counterclockwise);
-    return this;
+  getUnevenVertices(count = 40, output = []) {
+    return this._closeVertices(
+      super.getUnevenVertices(count, output)
+    );
   }
-  arcTo(x1, y1, x2, y2, radius) {
-    this.currentCurve.arcTo(x1, y1, x2, y2, radius);
-    return this;
+  getSpacedVertices(count = 40, output = []) {
+    return this._closeVertices(
+      super.getSpacedVertices(count, output)
+    );
   }
-  ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-    this.currentCurve.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
+  getAdaptiveVertices(output = []) {
+    return this._closeVertices(
+      super.getAdaptiveVertices(output)
+    );
+  }
+  getFillVertices(options) {
+    return this._closeVertices(
+      super.getFillVertices(options)
+    );
+  }
+  _setCurrentPoint(point) {
+    this.currentPoint = new Vector2(point.x, point.y);
+    if (!this.startPoint) {
+      this.startPoint = this.currentPoint.clone();
+    }
     return this;
   }
-  rect(x, y, width, height) {
-    this.currentCurve.rect(x, y, width, height);
+  _connetLineTo(curve) {
+    if (this.curves.length > 0) {
+      const first = curve.getPoint(0);
+      if (!this.currentPoint || !first.equals(this.currentPoint)) {
+        this.lineTo(first.x, first.y);
+      }
+    }
     return this;
   }
-  roundRect(x, y, width, height, radii) {
-    this.currentCurve.roundRect(x, y, width, height, radii);
+  closePath() {
+    const start = this.startPoint;
+    if (start) {
+      const end = this.currentPoint;
+      if (end && !start.equals(end)) {
+        this.curves.push(new LineCurve(end.clone(), start.clone()));
+        end.copy(start);
+      }
+      this.startPoint = void 0;
+    }
     return this;
   }
-  reset() {
-    this.currentCurve = new CurvePath();
-    this.curves = [this.currentCurve];
-    this.style = {};
+  moveTo(x, y) {
+    this.currentPoint = new Vector2(x, y);
+    this.startPoint = this.currentPoint.clone();
     return this;
   }
-  addCommands(commands) {
-    svgPathCommandsAddToPath2D(commands, this);
+  lineTo(x, y) {
+    const start = this.currentPoint;
+    if (!start?.equals({ x, y })) {
+      this.curves.push(
+        LineCurve.from(
+          start?.x ?? 0,
+          start?.y ?? 0,
+          x,
+          y
+        )
+      );
+    }
+    this._setCurrentPoint({ x, y });
     return this;
   }
-  addData(data) {
-    this.addCommands(svgPathDataToCommands(data));
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+    const start = this.currentPoint;
+    if (!start?.equals({ x, y })) {
+      this.curves.push(
+        CubicBezierCurve.from(
+          start?.x ?? 0,
+          start?.y ?? 0,
+          cp1x,
+          cp1y,
+          cp2x,
+          cp2y,
+          x,
+          y
+        )
+      );
+    }
+    this._setCurrentPoint({ x, y });
     return this;
   }
-  splineThru(points) {
-    this.currentCurve.splineThru(points);
+  quadraticCurveTo(cpx, cpy, x, y) {
+    const start = this.currentPoint;
+    if (!start?.equals({ x, y })) {
+      this.curves.push(
+        QuadraticBezierCurve.from(
+          start?.x ?? 0,
+          start?.y ?? 0,
+          cpx,
+          cpy,
+          x,
+          y
+        )
+      );
+    }
+    this._setCurrentPoint({ x, y });
     return this;
   }
-  scale(sx, sy = sx, target = { x: 0, y: 0 }) {
-    this.getControlPointRefs().forEach((point) => {
-      point.scale(sx, sy, target);
-    });
+  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
+    const curve = new ArcCurve(
+      x,
+      y,
+      radius,
+      startAngle,
+      endAngle,
+      !counterclockwise
+    );
+    this._connetLineTo(curve);
+    this.curves.push(curve);
+    this._setCurrentPoint(curve.getPoint(1));
     return this;
   }
-  skew(ax, ay = 0, target = { x: 0, y: 0 }) {
-    this.getControlPointRefs().forEach((point) => {
-      point.skew(ax, ay, target);
-    });
+  relativeArc(x, y, radius, startAngle, endAngle, counterclockwise) {
+    x += this.currentPoint?.x ?? 0;
+    y += this.currentPoint?.y ?? 0;
+    this.arc(x, y, radius, startAngle, endAngle, counterclockwise);
     return this;
   }
-  rotate(a, target = { x: 0, y: 0 }) {
-    this.getControlPointRefs().forEach((point) => {
-      point.rotate(a, target);
-    });
+  // TODO
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  arcTo(x1, y1, x2, y2, radius) {
+    console.warn("Method arcTo not supported yet");
     return this;
   }
-  bold(b) {
-    if (b === 0) {
-      return this;
-    }
-    const curves = this.getFlatCurves();
-    const _list = [];
-    const _isClockwise = [];
-    const _points = [];
-    curves.forEach((curve, index) => {
-      const points = curve.getControlPointRefs();
-      const isClockwise = curve.isClockwise();
-      _points[index] = points;
-      _isClockwise[index] = isClockwise;
-      const start = points[0];
-      const end = points[points.length - 1] ?? start;
-      _list.push({
-        start: isClockwise ? end : start,
-        end: isClockwise ? start : end,
-        index
-      });
-    });
-    const list = [];
-    _list.forEach((itemA, indexA) => {
-      list[indexA] = [];
-      _list.forEach((itemB, indexB) => {
-        if (itemB.start && itemA.end && indexB !== indexA && itemB.start?.equals(itemA.end)) {
-          list[indexA].push(itemB.index);
-        }
-      });
-    });
-    curves.forEach((curve, index) => {
-      const isClockwise = _isClockwise[index];
-      _points[index].forEach((point) => {
-        point.add(
-          curve.getNormal(
-            curve.getTForPoint(point)
-          ).scale(isClockwise ? b : -b)
-        );
-      });
-    });
-    list.forEach((indexes, indexA) => {
-      const pointsA = _points[indexA];
-      indexes.forEach((indexB) => {
-        const pointsB = _points[indexB];
-        const point = getIntersectionPoint(
-          pointsA[pointsA.length - 1],
-          pointsA[pointsA.length - 2] ?? pointsA[pointsA.length - 1],
-          pointsB[0],
-          pointsB[1] ?? pointsB[0]
-        );
-        if (point) {
-          pointsA[pointsA.length - 1].copy(point);
-          pointsB[0].copy(point);
-        }
-      });
-    });
+  ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise = true) {
+    const curve = new EllipseCurve(
+      x,
+      y,
+      radiusX,
+      radiusY,
+      rotation,
+      startAngle,
+      endAngle,
+      !counterclockwise
+    );
+    this._connetLineTo(curve);
+    this.curves.push(curve);
+    this._setCurrentPoint(curve.getPoint(1));
     return this;
   }
-  getMinMax(min = Vector2.MAX, max = Vector2.MIN, withStyle = true) {
-    const strokeWidth = this.strokeWidth;
-    this.curves.forEach((curve) => {
-      curve.getMinMax(min, max);
-      if (withStyle) {
-        if (strokeWidth > 1) {
-          const halfStrokeWidth = strokeWidth / 2;
-          const isClockwise = curve.isClockwise();
-          const points = [];
-          for (let t = 0; t <= 1; t += 1 / curve.arcLengthDivision) {
-            const point = curve.getPoint(t);
-            const normal = curve.getNormal(t);
-            const dist1 = normal.clone().scale(isClockwise ? halfStrokeWidth : -halfStrokeWidth);
-            const dist2 = normal.clone().scale(isClockwise ? -halfStrokeWidth : halfStrokeWidth);
-            points.push(
-              point.clone().add(dist1),
-              point.clone().add(dist2),
-              point.clone().add({ x: halfStrokeWidth, y: 0 }),
-              point.clone().add({ x: -halfStrokeWidth, y: 0 }),
-              point.clone().add({ x: 0, y: halfStrokeWidth }),
-              point.clone().add({ x: 0, y: -halfStrokeWidth }),
-              point.clone().add({ x: halfStrokeWidth, y: halfStrokeWidth }),
-              point.clone().add({ x: -halfStrokeWidth, y: -halfStrokeWidth })
-            );
-          }
-          min.min(...points);
-          max.max(...points);
-        }
-      }
-    });
-    return { min: min.finite(), max: max.finite() };
+  relativeEllipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+    x += this.currentPoint?.x ?? 0;
+    y += this.currentPoint?.y ?? 0;
+    this.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
+    return this;
   }
-  strokeTriangulate(options) {
-    const indices = options?.indices ?? [];
-    const vertices = options?.vertices ?? [];
-    this.curves.forEach((curve) => {
-      curve.strokeTriangulate({
-        ...options,
-        indices,
-        vertices,
-        style: { ...this.style }
-      });
-    });
-    return { indices, vertices };
+  rect(x, y, width, height) {
+    const curve = new RectangleCurve(x, y, width, height);
+    this._connetLineTo(curve);
+    this.curves.push(curve);
+    this._setCurrentPoint({ x, y });
+    return this;
   }
-  fillTriangulate(options) {
-    const _options = {
-      ...options,
-      style: {
-        ...this.style,
-        ...options?.style
-      }
-    };
-    const indices = _options.indices ?? [];
-    const vertices = _options.vertices ?? [];
-    const fillRule = _options.style.fillRule ?? "nonzero";
-    if (fillRule === "nonzero") {
-      const pointArrays = this.curves.map((curve) => curve.getFillVertices(_options));
-      const parentMap = /* @__PURE__ */ new Map();
-      const parentd = /* @__PURE__ */ new Set();
-      for (let i = 0; i < pointArrays.length; i++) {
-        const parents = [];
-        for (let j = 0; j < pointArrays.length; j++) {
-          if (i === j)
-            continue;
-          if (pointInPolygon([pointArrays[i][0], pointArrays[i][1]], pointArrays[j])) {
-            parents.push(j);
-          }
-        }
-        if (parents.length) {
-          parents.forEach((pi) => {
-            let set = parentMap.get(pi);
-            if (!set) {
-              set = /* @__PURE__ */ new Set();
-              parentMap.set(pi, set);
-            }
-            set.add(i);
-          });
-          parentd.add(i);
-        }
-      }
-      pointArrays.forEach((pointArray, i) => {
-        if (parentd.has(i) || !pointArray.length) {
-          return;
-        }
-        const _pointArray = pointArray.slice();
-        const holes = [];
-        parentMap.get(i)?.forEach((ci) => {
-          holes.push(_pointArray.length / 2);
-          _pointArray.push(...pointArrays[ci]);
-        });
-        fillTriangulate(_pointArray, {
-          ...options,
-          indices,
-          vertices,
-          holes,
-          style: { ...this.style }
-        });
-      });
-    } else {
-      this.curves.forEach((curve) => {
-        curve.fillTriangulate({
-          ...options,
-          indices,
-          vertices,
-          style: { ...this.style }
-        });
-      });
-    }
-    return { indices, vertices };
+  roundRect(x, y, width, height, radii) {
+    const curve = new RoundRectangleCurve(x, y, width, height, radii);
+    this._connetLineTo(curve);
+    this.curves.push(curve);
+    this._setCurrentPoint({ x, y });
+    return this;
   }
-  getBoundingBox(withStyle = true) {
-    const { min, max } = this.getMinMax(void 0, void 0, withStyle);
-    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+  splineThru(points) {
+    const currentPoint = this.currentPoint ?? new Vector2();
+    this.curves.push(new SplineCurve([currentPoint].concat(points)));
+    this._setCurrentPoint(points[points.length - 1]);
+    return this;
   }
-  drawTo(ctx, style = {}) {
-    style = { ...this.style, ...style };
-    const { fill = "#000", stroke = "none" } = style;
-    ctx.beginPath();
-    ctx.save();
-    setCanvasContext(ctx, style);
-    this.curves.forEach((path) => {
-      path.drawTo(ctx);
-    });
-    if (fill !== "none") {
-      ctx.fill();
+  drawTo(ctx) {
+    const point = this.curves[0]?.getPoint(0);
+    if (point) {
+      ctx.moveTo(point.x, point.y);
     }
-    if (stroke !== "none") {
-      ctx.stroke();
+    this.curves.forEach((curve) => curve.drawTo(ctx));
+    if (this.autoClose) {
+      ctx.closePath();
     }
-    ctx.restore();
     return this;
   }
-  drawControlPointsTo(ctx, style = {}) {
-    style = { ...this.style, ...style };
-    const { fill = "#000", stroke = "none" } = style;
-    ctx.beginPath();
-    ctx.save();
-    setCanvasContext(ctx, style);
-    this.getControlPointRefs().forEach((point) => {
-      drawPoint(ctx, point.x, point.y, { radius: 4 });
-    });
-    if (fill !== "none") {
-      ctx.fill();
-    }
-    if (stroke !== "none") {
-      ctx.stroke();
-    }
-    ctx.restore();
+  copy(source) {
+    super.copy(source);
+    this.autoClose = source.autoClose;
+    this.currentPoint = source.currentPoint?.clone();
     return this;
   }
-  toCommands() {
-    return this.curves.flatMap((v) => v.toCommands());
+}
+
+function toKebabCase(str) {
+  return str.replace(/[^a-z0-9]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
+}
+function getIntersectionPoint(p1, p2, q1, q2) {
+  const r = p2.clone().sub(p1);
+  const s = q2.clone().sub(q1);
+  const q1p1 = q1.clone().sub(p1);
+  const crossRS = r.cross(s);
+  if (crossRS === 0) {
+    return new Vector2(
+      (p1.x + q1.x) / 2,
+      (p1.y + q1.y) / 2
+    );
   }
-  toData() {
-    return this.curves.filter((v) => v.curves.length).map((v) => v.toData()).join(" ");
+  const t = q1p1.cross(s) / crossRS;
+  if (Math.abs(t) > 1) {
+    return new Vector2(
+      (p1.x + q1.x) / 2,
+      (p1.y + q1.y) / 2
+    );
   }
-  toSvgPathString() {
-    const style = {
-      ...this.style,
-      fill: this.style.fill ?? "#000",
-      stroke: this.style.stroke ?? "none"
-    };
-    const cssStyle = {};
-    for (const key in style) {
-      if (style[key] !== void 0) {
-        cssStyle[toKebabCase(key)] = style[key];
-      }
-    }
-    Object.assign(cssStyle, {
-      "stroke-width": `${this.strokeWidth}px`
-    });
-    let cssText = "";
-    for (const key in cssStyle) {
-      if (cssStyle[key] !== void 0) {
-        cssText += `${key}:${cssStyle[key]};`;
+  return new Vector2(
+    p1.x + t * r.x,
+    p1.y + t * r.y
+  );
+}
+
+class Path2D extends CompositeCurve {
+  currentCurve = new CurvePath();
+  style;
+  get startPoint() {
+    return this.currentCurve.startPoint;
+  }
+  get currentPoint() {
+    return this.currentCurve.currentPoint;
+  }
+  get strokeWidth() {
+    return this.style.strokeWidth ?? ((this.style.stroke ?? "none") === "none" ? 0 : 1);
+  }
+  constructor(path, style = {}) {
+    super();
+    this.curves.push(this.currentCurve);
+    this.style = style;
+    if (path) {
+      if (path instanceof Path2D) {
+        this.addPath(path);
+      } else if (Array.isArray(path)) {
+        this.addCommands(path);
+      } else {
+        this.addData(path);
       }
     }
-    return `<path d="${this.toData()}" style="${cssText}"></path>`;
   }
-  copy(source) {
-    super.copy(source);
-    this.currentCurve = source.currentCurve.clone();
-    this.style = { ...source.style };
+  addPath(path) {
+    const index = this.curves.findIndex((v) => v === this.currentCurve);
+    if (index > -1) {
+      this.curves.splice(index, 1);
+    }
+    if (path instanceof Path2D) {
+      this.curves.push(
+        ...path.curves.filter((curvePath) => curvePath.curves.length).map((v) => v.clone())
+      );
+    } else if (path.curves.length) {
+      this.curves.push(path);
+    }
+    this.curves.push(this.currentCurve);
     return this;
   }
-}
-
-class Path2DSet {
-  constructor(paths = [], viewBox) {
-    this.paths = paths;
-    this.viewBox = viewBox;
-  }
-  getBoundingBox(withStyle = true) {
-    if (!this.paths.length) {
-      return void 0;
+  closePath() {
+    const startPoint = this.startPoint;
+    if (startPoint) {
+      this.currentCurve.closePath();
+      if (this.currentCurve.curves.length) {
+        this.currentCurve = new CurvePath().moveTo(startPoint.x, startPoint.y);
+        this.curves.push(this.currentCurve);
+      }
     }
-    const min = Vector2.MAX;
-    const max = Vector2.MIN;
-    this.paths.forEach((path) => path.getMinMax(min, max, withStyle));
-    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+    return this;
   }
-  toTriangulatedSvgString(result = this.paths.map((p) => p.fillTriangulate()), padding = 0) {
-    let polygonStr = "";
-    const min = { x: -padding, y: -padding };
-    const max = { x: padding, y: padding };
-    const results = Array.isArray(result) ? result : [result];
-    results.forEach(({ vertices, indices }) => {
-      const getPoint = (indice) => {
-        const x = vertices[indice * 2];
-        const y = vertices[indice * 2 + 1];
-        min.x = Math.min(min.x, x + padding);
-        max.x = Math.max(max.x, x + padding);
-        min.y = Math.min(min.y, y + padding);
-        max.y = Math.max(max.y, y + padding);
-        return [x, y];
-      };
-      for (let i = 0, len = indices.length; i < len; i += 3) {
-        const p1 = getPoint(indices[i]);
-        const p2 = getPoint(indices[i + 1]);
-        const p3 = getPoint(indices[i + 2]);
-        polygonStr += `<polygon points="${p1.join(",")} ${p2.join(",")} ${p3.join(",")}" fill="black" />`;
+  moveTo(x, y) {
+    if (!this.currentCurve.currentPoint?.equals({ x, y })) {
+      if (this.currentCurve.curves.length) {
+        this.currentCurve = new CurvePath();
+        this.curves.push(this.currentCurve);
       }
-    });
-    const viewBox = [min.x, min.y, max.x - min.x, max.y - min.y];
-    return `<svg width="${viewBox[2]}" height="${viewBox[3]}" viewBox="${viewBox.join(" ")}" xmlns="http://www.w3.org/2000/svg">${polygonStr}</svg>`;
+      this.currentCurve.moveTo(x, y);
+    }
+    return this;
   }
-  toTriangulatedSvg(result, padding) {
-    return new DOMParser().parseFromString(this.toTriangulatedSvgString(result, padding), "image/svg+xml").documentElement;
+  lineTo(x, y) {
+    this.currentCurve.lineTo(x, y);
+    return this;
   }
-  toSvgString() {
-    const { x, y, width, height } = this.getBoundingBox();
-    const content = this.paths.map((path) => path.toSvgPathString()).join("");
-    return `<svg viewBox="${x} ${y} ${width} ${height}" width="${width}px" height="${height}px" xmlns="http://www.w3.org/2000/svg">${content}</svg>`;
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+    this.currentCurve.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+    return this;
   }
-  toSvgUrl() {
-    return `data:image/svg+xml;base64,${btoa(this.toSvgString())}`;
+  quadraticCurveTo(cpx, cpy, x, y) {
+    this.currentCurve.quadraticCurveTo(cpx, cpy, x, y);
+    return this;
   }
-  toSvg() {
-    return new DOMParser().parseFromString(this.toSvgString(), "image/svg+xml").documentElement;
+  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
+    this.currentCurve.arc(x, y, radius, startAngle, endAngle, counterclockwise);
+    return this;
   }
-  toCanvas(options = {}) {
-    const { pixelRatio = 2, ...style } = options;
-    const { left, top, width, height } = this.getBoundingBox();
-    const canvas = document.createElement("canvas");
-    canvas.width = width * pixelRatio;
-    canvas.height = height * pixelRatio;
-    canvas.style.width = `${width}px`;
-    canvas.style.height = `${height}px`;
-    const ctx = canvas.getContext("2d");
-    if (ctx) {
-      ctx.scale(pixelRatio, pixelRatio);
-      ctx.translate(-left, -top);
-      this.paths.forEach((path) => {
-        path.drawTo(ctx, style);
-      });
-    }
-    return canvas;
+  arcTo(x1, y1, x2, y2, radius) {
+    this.currentCurve.arcTo(x1, y1, x2, y2, radius);
+    return this;
   }
-}
-
-class FFDControlGrid {
-  constructor(rows, cols, width = 1, height = 1) {
-    this.rows = rows;
-    this.cols = cols;
-    this.width = width;
-    this.height = height;
-    for (let i = 0; i < rows; i++) {
-      this.controlPoints[i] = [];
-      for (let j = 0; j < cols; j++) {
-        this.controlPoints[i][j] = {
-          x: j / (cols - 1) * width,
-          y: i / (rows - 1) * height
-        };
-      }
-    }
+  ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+    this.currentCurve.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
+    return this;
   }
-  controlPoints = [];
-  moveControlPoint(i, j, dx, dy) {
-    this.controlPoints[i][j].x += dx;
-    this.controlPoints[i][j].y += dy;
+  rect(x, y, width, height) {
+    this.currentCurve.rect(x, y, width, height);
     return this;
   }
-}
-function bsplineBasis(t) {
-  const B = [];
-  B[0] = (1 - t) ** 3 / 6;
-  B[1] = (3 * t ** 3 - 6 * t ** 2 + 4) / 6;
-  B[2] = (-3 * t ** 3 + 3 * t ** 2 + 3 * t + 1) / 6;
-  B[3] = t ** 3 / 6;
-  return B;
-}
-function applyFFD(point, grid, width = grid.width, height = grid.height) {
-  const s = point.x / width * (grid.cols - 1);
-  const t = point.y / height * (grid.rows - 1);
-  const i = Math.floor(s);
-  const j = Math.floor(t);
-  const u = s - i;
-  const v = t - j;
-  const bu = bsplineBasis(u);
-  const bv = bsplineBasis(v);
-  let x = 0;
-  let y = 0;
-  for (let m = 0; m < 4; m++) {
-    for (let n = 0; n < 4; n++) {
-      const row = Math.min(Math.max(j - 1 + m, 0), grid.rows - 1);
-      const col = Math.min(Math.max(i - 1 + n, 0), grid.cols - 1);
-      const cp = grid.controlPoints[row][col];
-      const weight = bu[n] * bv[m];
-      x += cp.x * weight;
-      y += cp.y * weight;
-    }
+  roundRect(x, y, width, height, radii) {
+    this.currentCurve.roundRect(x, y, width, height, radii);
+    return this;
   }
-  point.set(x, y);
-}
-
-const dataUri = "data:image/svg+xml;";
-const base64DataUri = `${dataUri}base64,`;
-const utf8DataUri = `${dataUri}charset=utf8,`;
-function svgToDOM(svg) {
-  if (typeof svg === "string") {
-    let xml;
-    if (svg.startsWith(base64DataUri)) {
-      svg = svg.substring(base64DataUri.length, svg.length);
-      xml = atob(svg);
-    } else if (svg.startsWith(utf8DataUri)) {
-      svg = svg.substring(utf8DataUri.length, svg.length);
-      xml = decodeURIComponent(svg);
-    } else {
-      xml = svg;
-    }
-    const doc = new DOMParser().parseFromString(xml, "text/xml");
-    const error = doc.querySelector("parsererror");
-    if (error) {
-      throw new Error(`${error.textContent ?? "parser error"}
-${xml}`);
-    }
-    return doc.documentElement;
-  } else {
-    return svg;
+  reset() {
+    this.currentCurve = new CurvePath();
+    this.curves = [this.currentCurve];
+    this.style = {};
+    return this;
   }
-}
-
-const defaultUnit = "px";
-const defaultDPI = 90;
-const units = ["mm", "cm", "in", "pt", "pc", "px"];
-const unitConversion = {
-  mm: {
-    mm: 1,
-    cm: 0.1,
-    in: 1 / 25.4,
-    pt: 72 / 25.4,
-    pc: 6 / 25.4,
-    px: -1
-  },
-  cm: {
-    mm: 10,
-    cm: 1,
-    in: 1 / 2.54,
-    pt: 72 / 2.54,
-    pc: 6 / 2.54,
-    px: -1
-  },
-  in: {
-    mm: 25.4,
-    cm: 2.54,
-    in: 1,
-    pt: 72,
-    pc: 6,
-    px: -1
-  },
-  pt: {
-    mm: 25.4 / 72,
-    cm: 2.54 / 72,
-    in: 1 / 72,
-    pt: 1,
-    pc: 6 / 72,
-    px: -1
-  },
-  pc: {
-    mm: 25.4 / 6,
-    cm: 2.54 / 6,
-    in: 1 / 6,
-    pt: 72 / 6,
-    pc: 1,
-    px: -1
-  },
-  px: {
-    px: 1
+  addCommands(commands) {
+    svgPathCommandsAddToPath2D(commands, this);
+    return this;
+  }
+  addData(data) {
+    this.addCommands(svgPathDataToCommands(data));
+    return this;
   }
-};
-function parseFloatWithUnits(string) {
-  let theUnit = "px";
-  if (typeof string === "string") {
-    for (let i = 0, n = units.length; i < n; i++) {
-      const u = units[i];
-      if (string.endsWith(u)) {
-        theUnit = u;
-        string = string.substring(0, string.length - u.length);
-        break;
-      }
-    }
+  splineThru(points) {
+    this.currentCurve.splineThru(points);
+    return this;
   }
-  let scale;
-  {
-    scale = unitConversion[theUnit][defaultUnit];
-    if (scale < 0) {
-      scale = unitConversion[theUnit].in * defaultDPI;
-    }
+  scale(sx, sy = sx, target = { x: 0, y: 0 }) {
+    this.getControlPointRefs().forEach((point) => {
+      point.scale(sx, sy, target);
+    });
+    return this;
   }
-  return scale * Number.parseFloat(string);
-}
-
-const tempTransform0 = new Matrix3();
-const tempTransform1 = new Matrix3();
-const tempTransform2 = new Matrix3();
-const tempTransform3 = new Matrix3();
-function getNodeTransform(node, currentTransform, transformStack) {
-  if (!(node.hasAttribute("transform") || node.nodeName === "use" && (node.hasAttribute("x") || node.hasAttribute("y")))) {
-    return null;
+  skew(ax, ay = 0, target = { x: 0, y: 0 }) {
+    this.getControlPointRefs().forEach((point) => {
+      point.skew(ax, ay, target);
+    });
+    return this;
   }
-  const transform = parseNodeTransform(node);
-  if (transformStack.length > 0) {
-    transform.premultiply(transformStack[transformStack.length - 1]);
+  rotate(a, target = { x: 0, y: 0 }) {
+    this.getControlPointRefs().forEach((point) => {
+      point.rotate(a, target);
+    });
+    return this;
   }
-  currentTransform.copy(transform);
-  transformStack.push(transform);
-  return transform;
-}
-function parseNodeTransform(node) {
-  const transform = new Matrix3();
-  const currentTransform = tempTransform0;
-  if (node.nodeName === "use" && (node.hasAttribute("x") || node.hasAttribute("y"))) {
-    transform.translate(
-      parseFloatWithUnits(node.getAttribute("x")),
-      parseFloatWithUnits(node.getAttribute("y"))
-    );
+  bold(b) {
+    if (b === 0) {
+      return this;
+    }
+    const curves = this.getFlatCurves();
+    const _list = [];
+    const _isClockwise = [];
+    const _points = [];
+    curves.forEach((curve, index) => {
+      const points = curve.getControlPointRefs();
+      const isClockwise = curve.isClockwise();
+      _points[index] = points;
+      _isClockwise[index] = isClockwise;
+      const start = points[0];
+      const end = points[points.length - 1] ?? start;
+      _list.push({
+        start: isClockwise ? end : start,
+        end: isClockwise ? start : end,
+        index
+      });
+    });
+    const list = [];
+    _list.forEach((itemA, indexA) => {
+      list[indexA] = [];
+      _list.forEach((itemB, indexB) => {
+        if (itemB.start && itemA.end && indexB !== indexA && itemB.start?.equals(itemA.end)) {
+          list[indexA].push(itemB.index);
+        }
+      });
+    });
+    curves.forEach((curve, index) => {
+      const isClockwise = _isClockwise[index];
+      _points[index].forEach((point) => {
+        point.add(
+          curve.getNormal(
+            curve.getTForPoint(point)
+          ).scale(isClockwise ? b : -b)
+        );
+      });
+    });
+    list.forEach((indexes, indexA) => {
+      const pointsA = _points[indexA];
+      indexes.forEach((indexB) => {
+        const pointsB = _points[indexB];
+        const point = getIntersectionPoint(
+          pointsA[pointsA.length - 1],
+          pointsA[pointsA.length - 2] ?? pointsA[pointsA.length - 1],
+          pointsB[0],
+          pointsB[1] ?? pointsB[0]
+        );
+        if (point) {
+          pointsA[pointsA.length - 1].copy(point);
+          pointsB[0].copy(point);
+        }
+      });
+    });
+    return this;
   }
-  if (node.hasAttribute("transform")) {
-    const transformsTexts = node.getAttribute("transform").split(")");
-    for (let tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex--) {
-      const transformText = transformsTexts[tIndex].trim();
-      if (transformText === "")
-        continue;
-      const openParPos = transformText.indexOf("(");
-      const closeParPos = transformText.length;
-      if (openParPos > 0 && openParPos < closeParPos) {
-        const transformType = transformText.slice(0, openParPos);
-        const array = parsePathDataArgs(transformText.slice(openParPos + 1));
-        currentTransform.identity();
-        switch (transformType) {
-          case "translate":
-            if (array.length >= 1) {
-              const tx = array[0];
-              let ty = 0;
-              if (array.length >= 2) {
-                ty = array[1];
-              }
-              currentTransform.translate(tx, ty);
-            }
-            break;
-          case "rotate":
-            if (array.length >= 1) {
-              let angle = 0;
-              let cx = 0;
-              let cy = 0;
-              angle = array[0] * Math.PI / 180;
-              if (array.length >= 3) {
-                cx = array[1];
-                cy = array[2];
-              }
-              tempTransform1.makeTranslation(-cx, -cy);
-              tempTransform2.makeRotation(angle);
-              tempTransform3.multiplyMatrices(tempTransform2, tempTransform1);
-              tempTransform1.makeTranslation(cx, cy);
-              currentTransform.multiplyMatrices(tempTransform1, tempTransform3);
-            }
-            break;
-          case "scale":
-            if (array.length >= 1) {
-              currentTransform.scale(
-                array[0],
-                array[1] ?? array[0]
-              );
-            }
-            break;
-          case "skewX":
-            if (array.length === 1) {
-              currentTransform.set(
-                1,
-                Math.tan(array[0] * Math.PI / 180),
-                0,
-                0,
-                1,
-                0,
-                0,
-                0,
-                1
-              );
-            }
-            break;
-          case "skewY":
-            if (array.length === 1) {
-              currentTransform.set(
-                1,
-                0,
-                0,
-                Math.tan(array[0] * Math.PI / 180),
-                1,
-                0,
-                0,
-                0,
-                1
-              );
-            }
-            break;
-          case "matrix":
-            if (array.length === 6) {
-              currentTransform.set(
-                array[0],
-                array[2],
-                array[4],
-                array[1],
-                array[3],
-                array[5],
-                0,
-                0,
-                1
-              );
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN, withStyle = true) {
+    const strokeWidth = this.strokeWidth;
+    this.curves.forEach((curve) => {
+      curve.getMinMax(min, max);
+      if (withStyle) {
+        if (strokeWidth > 1) {
+          const halfStrokeWidth = strokeWidth / 2;
+          const isClockwise = curve.isClockwise();
+          const points = [];
+          for (let t = 0; t <= 1; t += 1 / curve.arcLengthDivision) {
+            const point = curve.getPoint(t);
+            const normal = curve.getNormal(t);
+            const dist1 = normal.clone().scale(isClockwise ? halfStrokeWidth : -halfStrokeWidth);
+            const dist2 = normal.clone().scale(isClockwise ? -halfStrokeWidth : halfStrokeWidth);
+            points.push(
+              point.clone().add(dist1),
+              point.clone().add(dist2),
+              point.clone().add({ x: halfStrokeWidth, y: 0 }),
+              point.clone().add({ x: -halfStrokeWidth, y: 0 }),
+              point.clone().add({ x: 0, y: halfStrokeWidth }),
+              point.clone().add({ x: 0, y: -halfStrokeWidth }),
+              point.clone().add({ x: halfStrokeWidth, y: halfStrokeWidth }),
+              point.clone().add({ x: -halfStrokeWidth, y: -halfStrokeWidth })
+            );
+          }
+          min.min(...points);
+          max.max(...points);
+        }
+      }
+    });
+    return { min: min.finite(), max: max.finite() };
+  }
+  strokeTriangulate(options) {
+    const indices = options?.indices ?? [];
+    const vertices = options?.vertices ?? [];
+    this.curves.forEach((curve) => {
+      curve.strokeTriangulate({
+        ...options,
+        indices,
+        vertices,
+        style: { ...this.style }
+      });
+    });
+    return { indices, vertices };
+  }
+  fillTriangulate(options) {
+    const _options = {
+      ...options,
+      style: {
+        ...this.style,
+        ...options?.style
+      }
+    };
+    const indices = _options.indices ?? [];
+    const vertices = _options.vertices ?? [];
+    const fillRule = _options.style.fillRule ?? "nonzero";
+    if (fillRule === "nonzero") {
+      const pointArrays = this.curves.map((curve) => curve.getFillVertices(_options));
+      const parentMap = /* @__PURE__ */ new Map();
+      const parentd = /* @__PURE__ */ new Set();
+      for (let i = 0; i < pointArrays.length; i++) {
+        const parents = [];
+        for (let j = 0; j < pointArrays.length; j++) {
+          if (i === j)
+            continue;
+          if (pointInPolygon([pointArrays[i][0], pointArrays[i][1]], pointArrays[j])) {
+            parents.push(j);
+          }
+        }
+        if (parents.length) {
+          parents.forEach((pi) => {
+            let set = parentMap.get(pi);
+            if (!set) {
+              set = /* @__PURE__ */ new Set();
+              parentMap.set(pi, set);
             }
-            break;
+            set.add(i);
+          });
+          parentd.add(i);
         }
       }
-      transform.premultiply(currentTransform);
+      pointArrays.forEach((pointArray, i) => {
+        if (parentd.has(i) || !pointArray.length) {
+          return;
+        }
+        const _pointArray = pointArray.slice();
+        const holes = [];
+        parentMap.get(i)?.forEach((ci) => {
+          holes.push(_pointArray.length / 2);
+          _pointArray.push(...pointArrays[ci]);
+        });
+        fillTriangulate(_pointArray, {
+          ...options,
+          indices,
+          vertices,
+          holes,
+          style: { ...this.style }
+        });
+      });
+    } else {
+      this.curves.forEach((curve) => {
+        curve.fillTriangulate({
+          ...options,
+          indices,
+          vertices,
+          style: { ...this.style }
+        });
+      });
     }
+    return { indices, vertices };
   }
-  return transform;
-}
-
-function parseCircleNode(node) {
-  return new Path2D().arc(
-    parseFloatWithUnits(node.getAttribute("cx") || 0),
-    parseFloatWithUnits(node.getAttribute("cy") || 0),
-    parseFloatWithUnits(node.getAttribute("r") || 0),
-    0,
-    Math.PI * 2
-  );
-}
-
-function parseCSSStylesheet(node, stylesheets) {
-  if (!node.sheet || !node.sheet.cssRules || !node.sheet.cssRules.length)
-    return;
-  for (let i = 0; i < node.sheet.cssRules.length; i++) {
-    const stylesheet = node.sheet.cssRules[i];
-    if (stylesheet.type !== 1)
-      continue;
-    const selectorList = stylesheet.selectorText.split(/,/g).filter(Boolean).map((i2) => i2.trim());
-    const definitions = {};
-    for (let len = stylesheet.style.length, i2 = 0; i2 < len; i2++) {
-      const name = stylesheet.style.item(i2);
-      definitions[name] = stylesheet.style.getPropertyValue(name);
+  getBoundingBox(withStyle = true) {
+    const { min, max } = this.getMinMax(void 0, void 0, withStyle);
+    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+  }
+  drawTo(ctx, style = {}) {
+    style = { ...this.style, ...style };
+    const { fill = "#000", stroke = "none" } = style;
+    ctx.beginPath();
+    ctx.save();
+    setCanvasContext(ctx, style);
+    this.curves.forEach((path) => {
+      path.drawTo(ctx);
+    });
+    if (fill !== "none") {
+      ctx.fill();
     }
-    for (let j = 0; j < selectorList.length; j++) {
-      stylesheets[selectorList[j]] = Object.assign(
-        stylesheets[selectorList[j]] || {},
-        { ...definitions }
-      );
+    if (stroke !== "none") {
+      ctx.stroke();
     }
+    ctx.restore();
+    return this;
   }
-}
-
-function parseEllipseNode(node) {
-  return new Path2D().ellipse(
-    parseFloatWithUnits(node.getAttribute("cx") || 0),
-    parseFloatWithUnits(node.getAttribute("cy") || 0),
-    parseFloatWithUnits(node.getAttribute("rx") || 0),
-    parseFloatWithUnits(node.getAttribute("ry") || 0),
-    0,
-    0,
-    Math.PI * 2
-  );
-}
-
-function parseLineNode(node) {
-  return new Path2D().moveTo(
-    parseFloatWithUnits(node.getAttribute("x1") || 0),
-    parseFloatWithUnits(node.getAttribute("y1") || 0)
-  ).lineTo(
-    parseFloatWithUnits(node.getAttribute("x2") || 0),
-    parseFloatWithUnits(node.getAttribute("y2") || 0)
-  );
-}
-
-function parsePathNode(node) {
-  const path = new Path2D();
-  const d = node.getAttribute("d");
-  if (!d || d === "none")
-    return null;
-  path.addData(d);
-  return path;
-}
-
-const RE$1 = /([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;
-function parsePolygonNode(node) {
-  const path = new Path2D();
-  let index = 0;
-  node.getAttribute("points")?.replace(RE$1, (match, a, b) => {
-    const x = parseFloatWithUnits(a);
-    const y = parseFloatWithUnits(b);
-    if (index === 0) {
-      path.moveTo(x, y);
-    } else {
-      path.lineTo(x, y);
+  drawControlPointsTo(ctx, style = {}) {
+    style = { ...this.style, ...style };
+    const { fill = "#000", stroke = "none" } = style;
+    ctx.beginPath();
+    ctx.save();
+    setCanvasContext(ctx, style);
+    this.getControlPointRefs().forEach((point) => {
+      drawPoint(ctx, point.x, point.y, { radius: 4 });
+    });
+    if (fill !== "none") {
+      ctx.fill();
     }
-    index++;
-    return match;
-  });
-  path.currentCurve.autoClose = true;
-  return path;
-}
-
-const RE = /([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;
-function parsePolylineNode(node) {
-  const path = new Path2D();
-  let index = 0;
-  node.getAttribute("points")?.replace(RE, (match, a, b) => {
-    const x = parseFloatWithUnits(a);
-    const y = parseFloatWithUnits(b);
-    if (index === 0) {
-      path.moveTo(x, y);
-    } else {
-      path.lineTo(x, y);
+    if (stroke !== "none") {
+      ctx.stroke();
     }
-    index++;
-    return match;
-  });
-  path.currentCurve.autoClose = false;
-  return path;
-}
-
-function parseRectNode(node) {
-  const x = parseFloatWithUnits(node.getAttribute("x") || 0);
-  const y = parseFloatWithUnits(node.getAttribute("y") || 0);
-  const rx = parseFloatWithUnits(node.getAttribute("rx") || node.getAttribute("ry") || 0);
-  const ry = parseFloatWithUnits(node.getAttribute("ry") || node.getAttribute("rx") || 0);
-  const w = parseFloatWithUnits(node.getAttribute("width"));
-  const h = parseFloatWithUnits(node.getAttribute("height"));
-  const bci = 1 - 0.551915024494;
-  const path = new Path2D();
-  path.moveTo(x + rx, y);
-  path.lineTo(x + w - rx, y);
-  if (rx !== 0 || ry !== 0) {
-    path.bezierCurveTo(
-      x + w - rx * bci,
-      y,
-      x + w,
-      y + ry * bci,
-      x + w,
-      y + ry
-    );
+    ctx.restore();
+    return this;
   }
-  path.lineTo(x + w, y + h - ry);
-  if (rx !== 0 || ry !== 0) {
-    path.bezierCurveTo(
-      x + w,
-      y + h - ry * bci,
-      x + w - rx * bci,
-      y + h,
-      x + w - rx,
-      y + h
-    );
+  toCommands() {
+    return this.curves.flatMap((v) => v.toCommands());
   }
-  path.lineTo(x + rx, y + h);
-  if (rx !== 0 || ry !== 0) {
-    path.bezierCurveTo(
-      x + rx * bci,
-      y + h,
-      x,
-      y + h - ry * bci,
-      x,
-      y + h - ry
-    );
+  toData() {
+    return this.curves.filter((v) => v.curves.length).map((v) => v.toData()).join(" ");
+  }
+  toSvgPathString() {
+    const style = {
+      ...this.style,
+      fill: this.style.fill ?? "#000",
+      stroke: this.style.stroke ?? "none"
+    };
+    const cssStyle = {};
+    for (const key in style) {
+      if (style[key] !== void 0) {
+        cssStyle[toKebabCase(key)] = style[key];
+      }
+    }
+    Object.assign(cssStyle, {
+      "stroke-width": `${this.strokeWidth}px`
+    });
+    let cssText = "";
+    for (const key in cssStyle) {
+      if (cssStyle[key] !== void 0) {
+        cssText += `${key}:${cssStyle[key]};`;
+      }
+    }
+    return `<path d="${this.toData()}" style="${cssText}"></path>`;
   }
-  path.lineTo(x, y + ry);
-  if (rx !== 0 || ry !== 0) {
-    path.bezierCurveTo(x, y + ry * bci, x + rx * bci, y, x + rx, y);
+  copy(source) {
+    super.copy(source);
+    this.currentCurve = source.currentCurve.clone();
+    this.style = { ...source.style };
+    return this;
   }
-  return path;
 }
 
-function parseStyle(node, style, stylesheets) {
-  style = Object.assign({}, style);
-  let stylesheetStyles = {};
-  if (node.hasAttribute("class")) {
-    const classSelectors = node.getAttribute("class").split(/\s/).filter(Boolean).map((i) => i.trim());
-    for (let i = 0; i < classSelectors.length; i++) {
-      stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`.${classSelectors[i]}`]);
-    }
+class Path2DSet {
+  constructor(paths = [], viewBox) {
+    this.paths = paths;
+    this.viewBox = viewBox;
   }
-  if (node.hasAttribute("id")) {
-    stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`#${node.getAttribute("id")}`]);
+  getBoundingBox(withStyle = true) {
+    if (!this.paths.length) {
+      return void 0;
+    }
+    const min = Vector2.MAX;
+    const max = Vector2.MIN;
+    this.paths.forEach((path) => path.getMinMax(min, max, withStyle));
+    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
   }
-  for (let len = node.style.length, i = 0; i < len; i++) {
-    const name = node.style.item(i);
-    const value = node.style.getPropertyValue(name);
-    style[name] = value;
-    stylesheetStyles[name] = value;
+  toTriangulatedSvgString(result = this.paths.map((p) => p.fillTriangulate()), padding = 0) {
+    let polygonStr = "";
+    const min = { x: -padding, y: -padding };
+    const max = { x: padding, y: padding };
+    const results = Array.isArray(result) ? result : [result];
+    results.forEach(({ vertices, indices }) => {
+      const getPoint = (indice) => {
+        const x = vertices[indice * 2];
+        const y = vertices[indice * 2 + 1];
+        min.x = Math.min(min.x, x + padding);
+        max.x = Math.max(max.x, x + padding);
+        min.y = Math.min(min.y, y + padding);
+        max.y = Math.max(max.y, y + padding);
+        return [x, y];
+      };
+      for (let i = 0, len = indices.length; i < len; i += 3) {
+        const p1 = getPoint(indices[i]);
+        const p2 = getPoint(indices[i + 1]);
+        const p3 = getPoint(indices[i + 2]);
+        polygonStr += `<polygon points="${p1.join(",")} ${p2.join(",")} ${p3.join(",")}" fill="black" />`;
+      }
+    });
+    const viewBox = [min.x, min.y, max.x - min.x, max.y - min.y];
+    return `<svg width="${viewBox[2]}" height="${viewBox[3]}" viewBox="${viewBox.join(" ")}" xmlns="http://www.w3.org/2000/svg">${polygonStr}</svg>`;
   }
-  function addStyle(svgName, jsName, adjustFunction = copy) {
-    if (node.hasAttribute(svgName))
-      style[jsName] = adjustFunction(node.getAttribute(svgName));
-    if (stylesheetStyles[svgName])
-      style[jsName] = adjustFunction(stylesheetStyles[svgName]);
+  toTriangulatedSvg(result, padding) {
+    return new DOMParser().parseFromString(this.toTriangulatedSvgString(result, padding), "image/svg+xml").documentElement;
   }
-  function copy(v) {
-    if (v.startsWith("url"))
-      console.warn("url access in attributes is not implemented.");
-    return v;
+  toSvgString() {
+    const { x, y, width, height } = this.getBoundingBox();
+    const content = this.paths.map((path) => path.toSvgPathString()).join("");
+    return `<svg viewBox="${x} ${y} ${width} ${height}" width="${width}px" height="${height}px" xmlns="http://www.w3.org/2000/svg">${content}</svg>`;
   }
-  function clamp(v) {
-    return Math.max(0, Math.min(1, parseFloatWithUnits(v)));
+  toSvgUrl() {
+    return `data:image/svg+xml;base64,${btoa(this.toSvgString())}`;
   }
-  function positive(v) {
-    return Math.max(0, parseFloatWithUnits(v));
+  toSvg() {
+    return new DOMParser().parseFromString(this.toSvgString(), "image/svg+xml").documentElement;
   }
-  function array(v) {
-    return v.split(" ").filter((v2) => v2 !== "").map((v2) => parseFloatWithUnits(v2));
+  toCanvas(options = {}) {
+    const { pixelRatio = 2, ...style } = options;
+    const { left, top, width, height } = this.getBoundingBox();
+    const canvas = document.createElement("canvas");
+    canvas.width = width * pixelRatio;
+    canvas.height = height * pixelRatio;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.scale(pixelRatio, pixelRatio);
+      ctx.translate(-left, -top);
+      this.paths.forEach((path) => {
+        path.drawTo(ctx, style);
+      });
+    }
+    return canvas;
   }
-  addStyle("fill", "fill");
-  addStyle("fill-opacity", "fillOpacity", clamp);
-  addStyle("fill-rule", "fillRule");
-  addStyle("opacity", "opacity", clamp);
-  addStyle("stroke", "stroke");
-  addStyle("stroke-opacity", "strokeOpacity", clamp);
-  addStyle("stroke-width", "strokeWidth", positive);
-  addStyle("stroke-linecap", "strokeLinecap");
-  addStyle("stroke-linejoin", "strokeLinejoin");
-  addStyle("stroke-miterlimit", "strokeMiterlimit", positive);
-  addStyle("stroke-dasharray", "strokeDasharray", array);
-  addStyle("stroke-dashoffset", "strokeDashoffset", parseFloatWithUnits);
-  addStyle("visibility", "visibility");
-  return style;
 }
 
-function parseNode(node, style, paths = [], stylesheets = {}) {
-  if (node.nodeType !== 1)
-    return paths;
-  let isDefsNode = false;
-  let path = null;
-  let _style = { ...style };
-  switch (node.nodeName) {
-    case "svg":
-      _style = parseStyle(node, _style, stylesheets);
-      break;
-    case "style":
-      parseCSSStylesheet(node, stylesheets);
-      break;
-    case "g":
-      _style = parseStyle(node, _style, stylesheets);
-      break;
-    case "path":
-      _style = parseStyle(node, _style, stylesheets);
-      if (node.hasAttribute("d"))
-        path = parsePathNode(node);
-      break;
-    case "rect":
-      _style = parseStyle(node, _style, stylesheets);
-      path = parseRectNode(node);
-      break;
-    case "polygon":
-      _style = parseStyle(node, _style, stylesheets);
-      path = parsePolygonNode(node);
-      break;
-    case "polyline":
-      _style = parseStyle(node, _style, stylesheets);
-      path = parsePolylineNode(node);
-      break;
-    case "circle":
-      _style = parseStyle(node, _style, stylesheets);
-      path = parseCircleNode(node);
-      break;
-    case "ellipse":
-      _style = parseStyle(node, _style, stylesheets);
-      path = parseEllipseNode(node);
-      break;
-    case "line":
-      _style = parseStyle(node, _style, stylesheets);
-      path = parseLineNode(node);
-      break;
-    case "defs":
-      isDefsNode = true;
-      break;
-    case "use": {
-      _style = parseStyle(node, _style, stylesheets);
-      const href = node.getAttributeNS("http://www.w3.org/1999/xlink", "href") || node.getAttribute("href") || "";
-      const usedNodeId = href.substring(1);
-      const usedNode = node.viewportElement?.getElementById(usedNodeId);
-      if (usedNode) {
-        parseNode(usedNode, _style, paths, stylesheets);
-      } else {
-        console.warn(`'use node' references non-existent node id: ${usedNodeId}`);
+class FFDControlGrid {
+  constructor(rows, cols, width = 1, height = 1) {
+    this.rows = rows;
+    this.cols = cols;
+    this.width = width;
+    this.height = height;
+    for (let i = 0; i < rows; i++) {
+      this.controlPoints[i] = [];
+      for (let j = 0; j < cols; j++) {
+        this.controlPoints[i][j] = {
+          x: j / (cols - 1) * width,
+          y: i / (rows - 1) * height
+        };
       }
-      break;
     }
-    default:
-      console.warn(node);
-      break;
-  }
-  if (_style.display === "none") {
-    return paths;
-  }
-  const currentTransform = new Matrix3();
-  const transformStack = [];
-  const transform = getNodeTransform(node, currentTransform, transformStack);
-  if (path) {
-    path.applyTransform(currentTransform);
-    paths.push(path);
-    path.style = { ..._style };
   }
-  const childNodes = node.childNodes;
-  for (let i = 0, len = childNodes.length; i < len; i++) {
-    const node2 = childNodes[i];
-    if (isDefsNode && node2.nodeName !== "style" && node2.nodeName !== "defs")
-      continue;
-    parseNode(node2, _style, paths, stylesheets);
+  controlPoints = [];
+  moveControlPoint(i, j, dx, dy) {
+    this.controlPoints[i][j].x += dx;
+    this.controlPoints[i][j].y += dy;
+    return this;
   }
-  if (transform) {
-    transformStack.pop();
-    if (transformStack.length > 0) {
-      currentTransform.copy(transformStack[transformStack.length - 1]);
-    } else {
-      currentTransform.identity();
+}
+function bsplineBasis(t) {
+  const B = [];
+  B[0] = (1 - t) ** 3 / 6;
+  B[1] = (3 * t ** 3 - 6 * t ** 2 + 4) / 6;
+  B[2] = (-3 * t ** 3 + 3 * t ** 2 + 3 * t + 1) / 6;
+  B[3] = t ** 3 / 6;
+  return B;
+}
+function applyFFD(point, grid, width = grid.width, height = grid.height) {
+  const s = point.x / width * (grid.cols - 1);
+  const t = point.y / height * (grid.rows - 1);
+  const i = Math.floor(s);
+  const j = Math.floor(t);
+  const u = s - i;
+  const v = t - j;
+  const bu = bsplineBasis(u);
+  const bv = bsplineBasis(v);
+  let x = 0;
+  let y = 0;
+  for (let m = 0; m < 4; m++) {
+    for (let n = 0; n < 4; n++) {
+      const row = Math.min(Math.max(j - 1 + m, 0), grid.rows - 1);
+      const col = Math.min(Math.max(i - 1 + n, 0), grid.cols - 1);
+      const cp = grid.controlPoints[row][col];
+      const weight = bu[n] * bv[m];
+      x += cp.x * weight;
+      y += cp.y * weight;
     }
   }
-  return paths;
-}
-
-function svgToPath2DSet(svg) {
-  const dom = svgToDOM(svg);
-  return new Path2DSet(
-    parseNode(dom, {}),
-    dom.getAttribute("viewBox")?.trim().split(" ").map((v) => Number(v))
-  );
+  point.set(x, y);
 }
 
-export { ArcCurve, BoundingBox, CompositeCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, EquilateralPloygonCurve, FFDControlGrid, LineCurve, Matrix3, Path2D, Path2DSet, PloygonCurve, QuadraticBezierCurve, RectangleCurve, RoundRectangleCurve, SplineCurve, Vector2, applyFFD, catmullRom, cubicBezier, drawPoint, fillTriangulate, getAdaptiveCubicBezierCurvePoints, getAdaptiveQuadraticBezierCurvePoints, getDirectedArea, parseArcCommand, parsePathDataArgs, pointInPolygon, quadraticBezier, setCanvasContext, strokeTriangulate, svgPathCommandsAddToPath2D, svgPathCommandsToData, svgPathDataToCommands, svgToDOM, svgToPath2DSet };
+export { ArcCurve, BoundingBox, CompositeCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, EquilateralPloygonCurve, FFDControlGrid, LineCurve, Matrix3, Path2D, Path2DSet, PloygonCurve, QuadraticBezierCurve, RectangleCurve, RoundRectangleCurve, SplineCurve, Vector2, applyFFD, catmullRom, cubicBezier, drawPoint, fillTriangulate, getAdaptiveCubicBezierCurvePoints, getAdaptiveQuadraticBezierCurvePoints, getDirectedArea, parseArcCommand, parsePathDataArgs, pointInPolygon, quadraticBezier, setCanvasContext, strokeTriangulate, svgPathCommandsAddToPath2D, svgPathCommandsToData, svgPathDataToCommands, svgToDom, svgToPath2DSet };