modern-path2d 1.0.1 → 1.2.0

package/dist/index.cjs

@@ -1,5 +1,17 @@
 'use strict';
 
+const earcut = require('earcut');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const earcut__default = /*#__PURE__*/_interopDefaultCompat(earcut);
+
+function drawPoint(ctx, x, y, options = {}) {
+  const { radius = 1 } = options;
+  ctx.moveTo(x, y);
+  ctx.arc(x, y, radius, 0, Math.PI * 2);
+}
+
 const lineJoinMap = {
   "arcs": "bevel",
   "bevel": "bevel",
@@ -494,10 +506,145 @@ function parseArcCommand(path, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, s
   path.ellipse(cx, cy, rx, ry, xAxisRotation, theta, theta + delta, sweepFlag === 0);
 }
 
+const RE$3 = {
+  SEPARATOR: /[ \t\r\n,.\-+]/,
+  WHITESPACE: /[ \t\r\n]/,
+  DIGIT: /\d/,
+  SIGN: /[-+]/,
+  POINT: /\./,
+  COMMA: /,/,
+  EXP: /e/i,
+  FLAGS: /[01]/
+};
+function parsePathDataArgs(input, flags, stride = 0) {
+  const SEP = 0;
+  const INT = 1;
+  const FLOAT = 2;
+  const EXP = 3;
+  let state = SEP;
+  let seenComma = true;
+  let number = "";
+  let exponent = "";
+  const result = [];
+  function throwSyntaxError(current2, i, partial) {
+    const error = new SyntaxError(`Unexpected character "${current2}" at index ${i}.`);
+    error.partial = partial;
+    throw error;
+  }
+  function newNumber() {
+    if (number !== "") {
+      if (exponent === "")
+        result.push(Number(number));
+      else result.push(Number(number) * 10 ** Number(exponent));
+    }
+    number = "";
+    exponent = "";
+  }
+  let current;
+  const length = input.length;
+  for (let i = 0; i < length; i++) {
+    current = input[i];
+    if (Array.isArray(flags) && flags.includes(result.length % stride) && RE$3.FLAGS.test(current)) {
+      state = INT;
+      number = current;
+      newNumber();
+      continue;
+    }
+    if (state === SEP) {
+      if (RE$3.WHITESPACE.test(current)) {
+        continue;
+      }
+      if (RE$3.DIGIT.test(current) || RE$3.SIGN.test(current)) {
+        state = INT;
+        number = current;
+        continue;
+      }
+      if (RE$3.POINT.test(current)) {
+        state = FLOAT;
+        number = current;
+        continue;
+      }
+      if (RE$3.COMMA.test(current)) {
+        if (seenComma) {
+          throwSyntaxError(current, i, result);
+        }
+        seenComma = true;
+      }
+    }
+    if (state === INT) {
+      if (RE$3.DIGIT.test(current)) {
+        number += current;
+        continue;
+      }
+      if (RE$3.POINT.test(current)) {
+        number += current;
+        state = FLOAT;
+        continue;
+      }
+      if (RE$3.EXP.test(current)) {
+        state = EXP;
+        continue;
+      }
+      if (RE$3.SIGN.test(current) && number.length === 1 && RE$3.SIGN.test(number[0])) {
+        throwSyntaxError(current, i, result);
+      }
+    }
+    if (state === FLOAT) {
+      if (RE$3.DIGIT.test(current)) {
+        number += current;
+        continue;
+      }
+      if (RE$3.EXP.test(current)) {
+        state = EXP;
+        continue;
+      }
+      if (RE$3.POINT.test(current) && number[number.length - 1] === ".") {
+        throwSyntaxError(current, i, result);
+      }
+    }
+    if (state === EXP) {
+      if (RE$3.DIGIT.test(current)) {
+        exponent += current;
+        continue;
+      }
+      if (RE$3.SIGN.test(current)) {
+        if (exponent === "") {
+          exponent += current;
+          continue;
+        }
+        if (exponent.length === 1 && RE$3.SIGN.test(exponent)) {
+          throwSyntaxError(current, i, result);
+        }
+      }
+    }
+    if (RE$3.WHITESPACE.test(current)) {
+      newNumber();
+      state = SEP;
+      seenComma = false;
+    } else if (RE$3.COMMA.test(current)) {
+      newNumber();
+      state = SEP;
+      seenComma = true;
+    } else if (RE$3.SIGN.test(current)) {
+      newNumber();
+      state = INT;
+      number = current;
+    } else if (RE$3.POINT.test(current)) {
+      newNumber();
+      state = FLOAT;
+      number = current;
+    } else {
+      throwSyntaxError(current, i, result);
+    }
+  }
+  newNumber();
+  return result;
+}
+
 function getReflection(a, b) {
   return a - (b - a);
 }
-function addPathCommandsToPath2D(commands, path) {
+function svgPathCommandsAddToPath2D(commands, path) {
   const current = new Vector2();
   const control = new Vector2();
   for (let i = 0, l = commands.length; i < l; i++) {
@@ -663,151 +810,16 @@ function addPathCommandsToPath2D(commands, path) {
   }
 }
 
-const RE$3 = {
-  SEPARATOR: /[ \t\r\n,.\-+]/,
-  WHITESPACE: /[ \t\r\n]/,
-  DIGIT: /\d/,
-  SIGN: /[-+]/,
-  POINT: /\./,
-  COMMA: /,/,
-  EXP: /e/i,
-  FLAGS: /[01]/
-};
-function parsePathDataArgs(input, flags, stride = 0) {
-  const SEP = 0;
-  const INT = 1;
-  const FLOAT = 2;
-  const EXP = 3;
-  let state = SEP;
-  let seenComma = true;
-  let number = "";
-  let exponent = "";
-  const result = [];
-  function throwSyntaxError(current2, i, partial) {
-    const error = new SyntaxError(`Unexpected character "${current2}" at index ${i}.`);
-    error.partial = partial;
-    throw error;
-  }
-  function newNumber() {
-    if (number !== "") {
-      if (exponent === "")
-        result.push(Number(number));
-      else result.push(Number(number) * 10 ** Number(exponent));
-    }
-    number = "";
-    exponent = "";
-  }
-  let current;
-  const length = input.length;
-  for (let i = 0; i < length; i++) {
-    current = input[i];
-    if (Array.isArray(flags) && flags.includes(result.length % stride) && RE$3.FLAGS.test(current)) {
-      state = INT;
-      number = current;
-      newNumber();
-      continue;
-    }
-    if (state === SEP) {
-      if (RE$3.WHITESPACE.test(current)) {
-        continue;
-      }
-      if (RE$3.DIGIT.test(current) || RE$3.SIGN.test(current)) {
-        state = INT;
-        number = current;
-        continue;
-      }
-      if (RE$3.POINT.test(current)) {
-        state = FLOAT;
-        number = current;
-        continue;
-      }
-      if (RE$3.COMMA.test(current)) {
-        if (seenComma) {
-          throwSyntaxError(current, i, result);
-        }
-        seenComma = true;
-      }
-    }
-    if (state === INT) {
-      if (RE$3.DIGIT.test(current)) {
-        number += current;
-        continue;
-      }
-      if (RE$3.POINT.test(current)) {
-        number += current;
-        state = FLOAT;
-        continue;
-      }
-      if (RE$3.EXP.test(current)) {
-        state = EXP;
-        continue;
-      }
-      if (RE$3.SIGN.test(current) && number.length === 1 && RE$3.SIGN.test(number[0])) {
-        throwSyntaxError(current, i, result);
-      }
-    }
-    if (state === FLOAT) {
-      if (RE$3.DIGIT.test(current)) {
-        number += current;
-        continue;
-      }
-      if (RE$3.EXP.test(current)) {
-        state = EXP;
-        continue;
-      }
-      if (RE$3.POINT.test(current) && number[number.length - 1] === ".") {
-        throwSyntaxError(current, i, result);
-      }
-    }
-    if (state === EXP) {
-      if (RE$3.DIGIT.test(current)) {
-        exponent += current;
-        continue;
-      }
-      if (RE$3.SIGN.test(current)) {
-        if (exponent === "") {
-          exponent += current;
-          continue;
-        }
-        if (exponent.length === 1 && RE$3.SIGN.test(exponent)) {
-          throwSyntaxError(current, i, result);
-        }
-      }
-    }
-    if (RE$3.WHITESPACE.test(current)) {
-      newNumber();
-      state = SEP;
-      seenComma = false;
-    } else if (RE$3.COMMA.test(current)) {
-      newNumber();
-      state = SEP;
-      seenComma = true;
-    } else if (RE$3.SIGN.test(current)) {
-      newNumber();
-      state = INT;
-      number = current;
-    } else if (RE$3.POINT.test(current)) {
-      newNumber();
-      state = FLOAT;
-      number = current;
-    } else {
-      throwSyntaxError(current, i, result);
-    }
-  }
-  newNumber();
-  return result;
-}
-
-function pathCommandsToPathData(commands) {
-  let first;
-  let prev;
-  const data = [];
-  for (let i = 0, len = commands.length; i < len; i++) {
-    const cmd = commands[i];
-    switch (cmd.type) {
-      case "m":
-      case "M":
-        if (cmd.x.toFixed(4) === prev?.x.toFixed(4) && cmd.y.toFixed(4) === prev?.y.toFixed(4)) {
+function svgPathCommandsToData(commands) {
+  let first;
+  let prev;
+  const data = [];
+  for (let i = 0, len = commands.length; i < len; i++) {
+    const cmd = commands[i];
+    switch (cmd.type) {
+      case "m":
+      case "M":
+        if (cmd.x.toFixed(4) === prev?.x.toFixed(4) && cmd.y.toFixed(4) === prev?.y.toFixed(4)) {
           continue;
         }
         data.push(`${cmd.type} ${cmd.x} ${cmd.y}`);
@@ -867,21 +879,21 @@ function pathCommandsToPathData(commands) {
 }
 
 const RE$2 = /[a-df-z][^a-df-z]*/gi;
-function pathDataToPathCommands(d) {
+function svgPathDataToCommands(data) {
   const commands = [];
-  const matched = d.match(RE$2);
+  const matched = data.match(RE$2);
   if (!matched) {
     return commands;
   }
   for (let i = 0, len = matched.length; i < len; i++) {
     const command = matched[i];
     const type = command.charAt(0);
-    const data = command.slice(1).trim();
+    const data2 = command.slice(1).trim();
     let args;
     switch (type) {
       case "m":
       case "M":
-        args = parsePathDataArgs(data);
+        args = parsePathDataArgs(data2);
         for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 2) {
           if (i2 === 0) {
             commands.push({ type, x: args[i2], y: args[i2 + 1] });
@@ -892,28 +904,28 @@ function pathDataToPathCommands(d) {
         break;
       case "h":
       case "H":
-        args = parsePathDataArgs(data);
+        args = parsePathDataArgs(data2);
         for (let i2 = 0, len2 = args.length; i2 < len2; i2++) {
           commands.push({ type, x: args[i2] });
         }
         break;
       case "v":
       case "V":
-        args = parsePathDataArgs(data);
+        args = parsePathDataArgs(data2);
         for (let i2 = 0, len2 = args.length; i2 < len2; i2++) {
           commands.push({ type, y: args[i2] });
         }
         break;
       case "l":
       case "L":
-        args = parsePathDataArgs(data);
+        args = parsePathDataArgs(data2);
         for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 2) {
           commands.push({ type, x: args[i2], y: args[i2 + 1] });
         }
         break;
       case "c":
       case "C":
-        args = parsePathDataArgs(data);
+        args = parsePathDataArgs(data2);
         for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 6) {
           commands.push({
             type,
@@ -928,7 +940,7 @@ function pathDataToPathCommands(d) {
         break;
       case "s":
       case "S":
-        args = parsePathDataArgs(data);
+        args = parsePathDataArgs(data2);
         for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 4) {
           commands.push({
             type,
@@ -941,7 +953,7 @@ function pathDataToPathCommands(d) {
         break;
       case "q":
       case "Q":
-        args = parsePathDataArgs(data);
+        args = parsePathDataArgs(data2);
         for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 4) {
           commands.push({
             type,
@@ -954,7 +966,7 @@ function pathDataToPathCommands(d) {
         break;
       case "t":
       case "T":
-        args = parsePathDataArgs(data);
+        args = parsePathDataArgs(data2);
         for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 2) {
           commands.push({
             type,
@@ -965,7 +977,7 @@ function pathDataToPathCommands(d) {
         break;
       case "a":
       case "A":
-        args = parsePathDataArgs(data, [3, 4], 7);
+        args = parsePathDataArgs(data2, [3, 4], 7);
         for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 7) {
           commands.push({
             type,
@@ -992,80 +1004,690 @@ function pathDataToPathCommands(d) {
   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(points, options = {}) {
+  let {
+    vertices = [],
+    indices = [],
+    holes = [],
+    verticesStride = 2,
+    verticesOffset = 0,
+    indicesOffset = 0
+  } = options;
+  const triangles = earcut__default(points, holes, 2);
+  if (triangles) {
+    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 < points.length; i += 2) {
+      vertices[index] = points[i];
+      vertices[index + 1] = points[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 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];
+  let y0 = points[1];
+  let x1 = points[2];
+  let y1 = points[3];
+  let x2 = 0;
+  let y2 = 0;
+  let perpX = -(y0 - y1);
+  let perpY = x0 - x1;
+  let perp1x = 0;
+  let perp1y = 0;
+  let dist = Math.sqrt(perpX * perpX + perpY * perpY);
+  perpX /= dist;
+  perpY /= dist;
+  perpX *= width;
+  perpY *= width;
+  const ratio = alignment;
+  const innerWeight = (1 - ratio) * 2;
+  const outerWeight = ratio * 2;
+  if (!closedShape) {
+    if (style.cap === "round") {
+      indexCount += round(
+        x0 - perpX * (innerWeight - outerWeight) * 0.5,
+        y0 - perpY * (innerWeight - outerWeight) * 0.5,
+        x0 - perpX * innerWeight,
+        y0 - perpY * innerWeight,
+        x0 + perpX * outerWeight,
+        y0 + perpY * outerWeight,
+        verts,
+        true
+      ) + 2;
+    } else if (style.cap === "square") {
+      indexCount += square(x0, y0, perpX, perpY, innerWeight, outerWeight, true, verts);
+    }
+  }
+  verts.push(
+    x0 - perpX * innerWeight,
+    y0 - perpY * innerWeight
+  );
+  verts.push(
+    x0 + perpX * outerWeight,
+    y0 + perpY * outerWeight
+  );
+  for (let i = 1; i < length - 1; ++i) {
+    x0 = points[(i - 1) * 2];
+    y0 = points[(i - 1) * 2 + 1];
+    x1 = points[i * 2];
+    y1 = points[i * 2 + 1];
+    x2 = points[(i + 1) * 2];
+    y2 = points[(i + 1) * 2 + 1];
+    perpX = -(y0 - y1);
+    perpY = x0 - x1;
+    dist = Math.sqrt(perpX * perpX + perpY * perpY);
+    perpX /= dist;
+    perpY /= dist;
+    perpX *= width;
+    perpY *= width;
+    perp1x = -(y1 - y2);
+    perp1y = x1 - x2;
+    dist = Math.sqrt(perp1x * perp1x + perp1y * perp1y);
+    perp1x /= dist;
+    perp1y /= dist;
+    perp1x *= width;
+    perp1y *= width;
+    const dx0 = x1 - x0;
+    const dy0 = y0 - y1;
+    const dx1 = x1 - x2;
+    const dy1 = y2 - y1;
+    const dot = dx0 * dx1 + dy0 * dy1;
+    const cross = dy0 * dx1 - dy1 * dx0;
+    const clockwise = cross < 0;
+    if (Math.abs(cross) < 1e-3 * Math.abs(dot)) {
+      verts.push(
+        x1 - perpX * innerWeight,
+        y1 - perpY * innerWeight
+      );
+      verts.push(
+        x1 + perpX * outerWeight,
+        y1 + perpY * outerWeight
+      );
+      if (dot >= 0) {
+        if (style.join === "round") {
+          indexCount += round(
+            x1,
+            y1,
+            x1 - perpX * innerWeight,
+            y1 - perpY * innerWeight,
+            x1 - perp1x * innerWeight,
+            y1 - perp1y * innerWeight,
+            verts,
+            false
+          ) + 4;
+        } else {
+          indexCount += 2;
+        }
+        verts.push(
+          x1 - perp1x * outerWeight,
+          y1 - perp1y * outerWeight
+        );
+        verts.push(
+          x1 + perp1x * innerWeight,
+          y1 + perp1y * innerWeight
+        );
+      }
+      continue;
+    }
+    const c1 = (-perpX + x0) * (-perpY + y1) - (-perpX + x1) * (-perpY + y0);
+    const c2 = (-perp1x + x2) * (-perp1y + y1) - (-perp1x + x1) * (-perp1y + y2);
+    const px = (dx0 * c2 - dx1 * c1) / cross;
+    const py = (dy1 * c1 - dy0 * c2) / cross;
+    const pDist = (px - x1) * (px - x1) + (py - y1) * (py - y1);
+    const imx = x1 + (px - x1) * innerWeight;
+    const imy = y1 + (py - y1) * innerWeight;
+    const omx = x1 - (px - x1) * outerWeight;
+    const omy = y1 - (py - y1) * outerWeight;
+    const smallerInsideSegmentSq = Math.min(dx0 * dx0 + dy0 * dy0, dx1 * dx1 + dy1 * dy1);
+    const insideWeight = clockwise ? innerWeight : outerWeight;
+    const smallerInsideDiagonalSq = smallerInsideSegmentSq + insideWeight * insideWeight * widthSquared;
+    const insideMiterOk = pDist <= smallerInsideDiagonalSq;
+    if (insideMiterOk) {
+      if (style.join === "bevel" || pDist / widthSquared > miterLimitSquared) {
+        if (clockwise) {
+          verts.push(imx, imy);
+          verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
+          verts.push(imx, imy);
+          verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
+        } else {
+          verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
+          verts.push(omx, omy);
+          verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
+          verts.push(omx, omy);
+        }
+        indexCount += 2;
+      } else if (style.join === "round") {
+        if (clockwise) {
+          verts.push(imx, imy);
+          verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
+          indexCount += round(
+            x1,
+            y1,
+            x1 + perpX * outerWeight,
+            y1 + perpY * outerWeight,
+            x1 + perp1x * outerWeight,
+            y1 + perp1y * outerWeight,
+            verts,
+            true
+          ) + 4;
+          verts.push(imx, imy);
+          verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
+        } else {
+          verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
+          verts.push(omx, omy);
+          indexCount += round(
+            x1,
+            y1,
+            x1 - perpX * innerWeight,
+            y1 - perpY * innerWeight,
+            x1 - perp1x * innerWeight,
+            y1 - perp1y * innerWeight,
+            verts,
+            false
+          ) + 4;
+          verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
+          verts.push(omx, omy);
+        }
+      } else {
+        verts.push(imx, imy);
+        verts.push(omx, omy);
+      }
+    } else {
+      verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
+      verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
+      if (style.join === "round") {
+        if (clockwise) {
+          indexCount += round(
+            x1,
+            y1,
+            x1 + perpX * outerWeight,
+            y1 + perpY * outerWeight,
+            x1 + perp1x * outerWeight,
+            y1 + perp1y * outerWeight,
+            verts,
+            true
+          ) + 2;
+        } else {
+          indexCount += round(
+            x1,
+            y1,
+            x1 - perpX * innerWeight,
+            y1 - perpY * innerWeight,
+            x1 - perp1x * innerWeight,
+            y1 - perp1y * innerWeight,
+            verts,
+            false
+          ) + 2;
+        }
+      } else if (style.join === "miter" && pDist / widthSquared <= miterLimitSquared) {
+        if (clockwise) {
+          verts.push(omx, omy);
+          verts.push(omx, omy);
+        } else {
+          verts.push(imx, imy);
+          verts.push(imx, imy);
+        }
+        indexCount += 2;
+      }
+      verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
+      verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
+      indexCount += 2;
+    }
+  }
+  x0 = points[(length - 2) * 2];
+  y0 = points[(length - 2) * 2 + 1];
+  x1 = points[(length - 1) * 2];
+  y1 = points[(length - 1) * 2 + 1];
+  perpX = -(y0 - y1);
+  perpY = x0 - x1;
+  dist = Math.sqrt(perpX * perpX + perpY * perpY);
+  perpX /= dist;
+  perpY /= dist;
+  perpX *= width;
+  perpY *= width;
+  verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
+  verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
+  if (!closedShape) {
+    if (style.cap === "round") {
+      indexCount += round(
+        x1 - perpX * (innerWeight - outerWeight) * 0.5,
+        y1 - perpY * (innerWeight - outerWeight) * 0.5,
+        x1 - perpX * innerWeight,
+        y1 - perpY * innerWeight,
+        x1 + perpX * outerWeight,
+        y1 + perpY * outerWeight,
+        verts,
+        false
+      ) + 2;
+    } else if (style.cap === "square") {
+      indexCount += square(x1, y1, perpX, perpY, innerWeight, outerWeight, false, verts);
+    }
+  }
+  const eps2 = curveEps * curveEps;
+  for (let i = indexStart; i < indexCount + indexStart - 2; ++i) {
+    x0 = verts[i * 2];
+    y0 = verts[i * 2 + 1];
+    x1 = verts[(i + 1) * 2];
+    y1 = verts[(i + 1) * 2 + 1];
+    x2 = verts[(i + 2) * 2];
+    y2 = verts[(i + 2) * 2 + 1];
+    if (Math.abs(x0 * (y1 - y2) + x1 * (y2 - y0) + x2 * (y0 - y1)) < eps2) {
+      continue;
+    }
+    indices.push(i, i + 1, i + 2);
+  }
+  return {
+    vertices,
+    indices
+  };
+}
+function getOrientationOfPoints(points) {
+  const m = points.length;
+  if (m < 6) {
+    return 1;
+  }
+  let area = 0;
+  for (let i = 0, x1 = points[m - 2], y1 = points[m - 1]; i < m; i += 2) {
+    const x2 = points[i];
+    const y2 = points[i + 1];
+    area += (x2 - x1) * (y2 + y1);
+    x1 = x2;
+    y1 = y2;
+  }
+  if (area < 0) {
+    return -1;
+  }
+  return 1;
+}
+function square(x, y, nx, ny, innerWeight, outerWeight, clockwise, verts) {
+  const ix = x - nx * innerWeight;
+  const iy = y - ny * innerWeight;
+  const ox = x + nx * outerWeight;
+  const oy = y + ny * outerWeight;
+  let exx;
+  let eyy;
+  if (clockwise) {
+    exx = ny;
+    eyy = -nx;
+  } else {
+    exx = -ny;
+    eyy = nx;
+  }
+  const eix = ix + exx;
+  const eiy = iy + eyy;
+  const eox = ox + exx;
+  const eoy = oy + eyy;
+  verts.push(eix, eiy);
+  verts.push(eox, eoy);
+  return 2;
+}
+function round(cx, cy, sx, sy, ex, ey, verts, clockwise) {
+  const cx2p0x = sx - cx;
+  const cy2p0y = sy - cy;
+  let angle0 = Math.atan2(cx2p0x, cy2p0y);
+  let angle1 = Math.atan2(ex - cx, ey - cy);
+  if (clockwise && angle0 < angle1) {
+    angle0 += Math.PI * 2;
+  } else if (!clockwise && angle0 > angle1) {
+    angle1 += Math.PI * 2;
+  }
+  let startAngle = angle0;
+  const angleDiff = angle1 - angle0;
+  const absAngleDiff = Math.abs(angleDiff);
+  const radius = Math.sqrt(cx2p0x * cx2p0x + cy2p0y * cy2p0y);
+  const segCount = (15 * absAngleDiff * Math.sqrt(radius) / Math.PI >> 0) + 1;
+  const angleInc = angleDiff / segCount;
+  startAngle += angleInc;
+  if (clockwise) {
+    verts.push(cx, cy);
+    verts.push(sx, sy);
+    for (let i = 1, angle = startAngle; i < segCount; i++, angle += angleInc) {
+      verts.push(cx, cy);
+      verts.push(cx + Math.sin(angle) * radius, cy + Math.cos(angle) * radius);
+    }
+    verts.push(cx, cy);
+    verts.push(ex, ey);
+  } else {
+    verts.push(sx, sy);
+    verts.push(cx, cy);
+    for (let i = 1, angle = startAngle; i < segCount; i++, angle += angleInc) {
+      verts.push(cx + Math.sin(angle) * radius, cy + Math.cos(angle) * radius);
+      verts.push(cx, cy);
+    }
+    verts.push(ex, ey);
+    verts.push(cx, cy);
+  }
+  return segCount * 2;
+}
+
 class Curve {
-  arcLengthDivisions = 200;
-  _cacheArcLengths;
-  _needsUpdate = false;
+  startT = 0;
+  endT = 1;
+  arcLengthDivision = 200;
+  _arcLengths;
+  getPointAt(u, output = new Vector2()) {
+    return this.getPoint(this.getUToTMapping(u), output);
+  }
   isClockwise() {
     const prev = this.getPoint(1);
     const cur = this.getPoint(0.5);
     const next = this.getPoint(1);
     return (cur.x - prev.x) * (next.y - cur.y) - (cur.y - prev.y) * (next.x - cur.x) < 0;
   }
-  getPointAt(u, output = new Vector2()) {
-    return this.getPoint(this.getUToTMapping(u), output);
+  getControlPointRefs() {
+    return [];
   }
-  getPoints(divisions = 5) {
-    const points = [];
-    for (let i = 0; i <= divisions; i++) {
-      points.push(this.getPoint(i / divisions));
+  applyTransform(transform) {
+    this.getControlPointRefs().forEach((p) => {
+      p.applyMatrix3(transform);
+    });
+    return this;
+  }
+  getUnevenPointArray(count = 5, output = []) {
+    const p = new Vector2();
+    for (let i = 0, len = Math.max(1, count) - 1; i <= len; i++) {
+      this.getPoint(i / len, p);
+      output.push(p.x, p.y);
     }
-    return points;
+    return output;
   }
-  forEachControlPoints(cb) {
-    this.getControlPoints().forEach(cb);
-    return this;
+  getSpacedPointArray(count = 5, output = []) {
+    const p = new Vector2();
+    for (let i = 0, len = Math.max(1, count) - 1; i <= len; i++) {
+      this.getPointAt(i / len, p);
+      output.push(p.x, p.y);
+    }
+    return output;
   }
-  getSpacedPoints(divisions = 5) {
-    const points = [];
-    for (let i = 0; i <= divisions; i++) {
-      points.push(this.getPointAt(i / divisions));
+  getAdaptivePointArray(output = []) {
+    return this.getUnevenPointArray(5, output);
+  }
+  _pointArrayToPoint(array, output = []) {
+    for (let i = 0, len = array.length; i < len; i += 2) {
+      const x = array[i];
+      const y = array[i + 1];
+      output.push(new Vector2(x, y));
     }
-    return points;
+    return output;
+  }
+  getSpacedPoints(count, output = []) {
+    const array = this.getSpacedPointArray(count);
+    this._pointArrayToPoint(array, output);
+    return output;
+  }
+  getUnevenPoints(count, output = []) {
+    const array = this.getUnevenPointArray(count);
+    this._pointArrayToPoint(array, output);
+    return output;
+  }
+  getAdaptivePoints(output = []) {
+    const array = this.getAdaptivePointArray();
+    this._pointArrayToPoint(array, output);
+    return output;
+  }
+  getPoints(count, output = []) {
+    let array;
+    if (count) {
+      array = this.getUnevenPointArray(count);
+    } else {
+      array = this.getAdaptivePointArray();
+    }
+    this._pointArrayToPoint(array, output);
+    return output;
   }
   getLength() {
     const lengths = this.getLengths();
     return lengths[lengths.length - 1];
   }
-  getLengths(divisions = this.arcLengthDivisions) {
-    if (this._cacheArcLengths && this._cacheArcLengths.length === divisions + 1 && !this._needsUpdate) {
-      return this._cacheArcLengths;
-    }
-    this._needsUpdate = false;
-    const cache = [];
-    let current;
-    let last = this.getPoint(0);
-    let sum = 0;
-    cache.push(0);
-    for (let i = 1; i <= divisions; i++) {
-      current = this.getPoint(i / divisions);
-      sum += current.distanceTo(last);
-      cache.push(sum);
-      last = current;
-    }
-    this._cacheArcLengths = cache;
-    return cache;
-  }
-  updateArcLengths() {
-    this._needsUpdate = true;
-    this.getLengths();
+  getLengths() {
+    if (!this._arcLengths || this._arcLengths.length !== this.arcLengthDivision + 1) {
+      this.updateLengths();
+    }
+    return this._arcLengths;
+  }
+  updateLengths() {
+    const divisions = this.arcLengthDivision;
+    const arcLengths = [0];
+    for (let sum = 0, prev = this.getPoint(0), i = 1; i <= divisions; i++) {
+      const current = this.getPoint(i / divisions);
+      sum += current.distanceTo(prev);
+      arcLengths.push(sum);
+      prev = current;
+    }
+    this._arcLengths = arcLengths;
   }
   getUToTMapping(u, distance) {
     const lengths = this.getLengths();
-    let i = 0;
     const lengthsLen = lengths.length;
-    let targetLength;
-    if (distance) {
-      targetLength = distance;
-    } else {
-      targetLength = u * lengths[lengthsLen - 1];
+    const targetLen = distance ?? u * lengths[lengthsLen - 1];
+    if (lengthsLen < 2) {
+      return targetLen / lengths[0];
     }
+    let i = 0;
     let low = 0;
     let high = lengthsLen - 1;
     let comparison;
     while (low <= high) {
       i = Math.floor(low + (high - low) / 2);
-      comparison = lengths[i] - targetLength;
+      comparison = lengths[i] - targetLen;
       if (comparison < 0) {
         low = i + 1;
       } else if (comparison > 0) {
@@ -1076,13 +1698,13 @@ class Curve {
       }
     }
     i = high;
-    if (lengths[i] === targetLength) {
+    if (lengths[i] === targetLen) {
       return i / (lengthsLen - 1);
     }
-    const lengthBefore = lengths[i];
-    const lengthAfter = lengths[i + 1];
-    const segmentLength = lengthAfter - lengthBefore;
-    const segmentFraction = (targetLength - lengthBefore) / segmentLength;
+    const before = lengths[i];
+    const after = lengths[i + 1];
+    const segmentLength = after - before;
+    const segmentFraction = (targetLen - before) / segmentLength;
     return (i + segmentFraction) / (lengthsLen - 1);
   }
   getTangent(t, output = new Vector2()) {
@@ -1120,32 +1742,52 @@ class Curve {
     }
     return mid;
   }
-  matrix(matrix) {
-    this.forEachControlPoints((point) => point.applyMatrix3(matrix));
-    return this;
-  }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-    this.getPoints().forEach((point) => {
-      min.min(point);
-      max.max(point);
-    });
+    const potins = this.getPoints();
+    for (let i = 0, len = potins.length; i < len; i++) {
+      const p = potins[i];
+      min.min(p);
+      max.max(p);
+    }
     return { min, max };
   }
   getBoundingBox() {
     const { min, max } = this.getMinMax();
     return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
   }
+  fillTriangulate(options) {
+    return fillTriangulate(
+      this.getPoints().reduce((arr, p) => {
+        arr.push(p.x, p.y);
+        return arr;
+      }, []),
+      options
+    );
+  }
+  strokeTriangulate(options) {
+    return strokeTriangulate(
+      this.getPoints().reduce((arr, p) => {
+        arr.push(p.x, p.y);
+        return arr;
+      }, []),
+      options
+    );
+  }
   toCommands() {
-    return this.getPoints().map((point, i) => {
+    const comds = [];
+    const potins = this.getPoints();
+    for (let i = 0, len = potins.length; i < len; i++) {
+      const p = potins[i];
       if (i === 0) {
-        return { type: "M", x: point.x, y: point.y };
+        comds.push({ type: "M", x: p.x, y: p.y });
       } else {
-        return { type: "L", x: point.x, y: point.y };
+        comds.push({ type: "L", x: p.x, y: p.y });
       }
-    });
+    }
+    return comds;
   }
   toData() {
-    return pathCommandsToPathData(this.toCommands());
+    return svgPathCommandsToData(this.toCommands());
   }
   drawTo(ctx) {
     this.toCommands().forEach((cmd) => {
@@ -1161,7 +1803,7 @@ class Curve {
     return this;
   }
   copy(source) {
-    this.arcLengthDivisions = source.arcLengthDivisions;
+    this.arcLengthDivision = source.arcLengthDivision;
     return this;
   }
   clone() {
@@ -1169,178 +1811,56 @@ class Curve {
   }
 }
 
-class CircleCurve extends Curve {
-  constructor(center, radius, start = 0, end = Math.PI * 2) {
+const tempTransform0$1 = new Matrix3();
+const tempTransform1$1 = new Matrix3();
+const tempTransform2$1 = new Matrix3();
+const tempV2 = new Vector2();
+class RoundCurve extends Curve {
+  constructor(_center, _radius, _diff, rotate = 0, startAngle = 0, endAngle = Math.PI * 2, clockwise = false) {
     super();
-    this.center = center;
-    this.radius = radius;
-    this.start = start;
-    this.end = end;
-  }
-  getPoint(t) {
-    const { radius, center } = this;
-    return center.clone().add(this.getNormal(t).clone().scale(radius));
+    this._center = _center;
+    this._radius = _radius;
+    this._diff = _diff;
+    this.rotate = rotate;
+    this.startAngle = startAngle;
+    this.endAngle = endAngle;
+    this.clockwise = clockwise;
   }
-  getTangent(t, output = new Vector2()) {
-    const { x, y } = this.getNormal(t);
-    return output.set(-y, x);
+  get cx() {
+    return this._center.x;
   }
-  getNormal(t, output = new Vector2()) {
-    const { start, end } = this;
-    const _t = t * (end - start) + start - 0.5 * Math.PI;
-    return output.set(Math.cos(_t), Math.sin(_t));
+  set cx(val) {
+    this._center.x = val;
   }
-  getControlPoints() {
-    return [this.center];
+  get cy() {
+    return this._center.y;
   }
-  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-    min.x = Math.min(min.x, this.center.x - this.radius);
-    min.y = Math.min(min.y, this.center.y - this.radius);
-    max.x = Math.max(max.x, this.center.x + this.radius);
-    max.y = Math.max(max.y, this.center.y + this.radius);
-    return { min, max };
-  }
-}
-
-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 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);
-}
-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);
-}
-
-class CubicBezierCurve extends Curve {
-  constructor(start = new Vector2(), startControl = new Vector2(), endControl = new Vector2(), end = new Vector2()) {
-    super();
-    this.start = start;
-    this.startControl = startControl;
-    this.endControl = endControl;
-    this.end = end;
+  set cy(val) {
+    this._center.y = val;
   }
-  getPoint(t, output = new Vector2()) {
-    const { start, startControl, endControl, end } = this;
-    return output.set(
-      cubicBezier(t, start.x, startControl.x, endControl.x, end.x),
-      cubicBezier(t, start.y, startControl.y, endControl.y, end.y)
-    );
+  get rx() {
+    return this._radius.x;
   }
-  getControlPoints() {
-    return [
-      this.start,
-      this.startControl,
-      this.endControl,
-      this.end
-    ];
+  set rx(val) {
+    this._radius.x = val;
   }
-  _solveQuadratic(a, b, c) {
-    const discriminant = b * b - 4 * a * c;
-    if (discriminant < 0)
-      return [];
-    const sqrtDiscriminant = Math.sqrt(discriminant);
-    const t1 = (-b + sqrtDiscriminant) / (2 * a);
-    const t2 = (-b - sqrtDiscriminant) / (2 * a);
-    return [t1, t2].filter((t) => t >= 0 && t <= 1);
+  get ry() {
+    return this._radius.y;
   }
-  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-    const p0 = this.start;
-    const p1 = this.startControl;
-    const p2 = this.endControl;
-    const p3 = this.end;
-    const dxRoots = this._solveQuadratic(
-      3 * (p1.x - p0.x),
-      6 * (p2.x - p1.x),
-      3 * (p3.x - p2.x)
-    );
-    const dyRoots = this._solveQuadratic(
-      3 * (p1.y - p0.y),
-      6 * (p2.y - p1.y),
-      3 * (p3.y - p2.y)
-    );
-    const tValues = [0, 1, ...dxRoots, ...dyRoots];
-    const samplePoints = (tValues2, precision) => {
-      for (const t of tValues2) {
-        for (let i = 0; i <= precision; i++) {
-          const delta = i / precision - 0.5;
-          const refinedT = Math.min(1, Math.max(0, t + delta));
-          const point = this.getPoint(refinedT);
-          min.x = Math.min(min.x, point.x);
-          min.y = Math.min(min.y, point.y);
-          max.x = Math.max(max.x, point.x);
-          max.y = Math.max(max.y, point.y);
-        }
-      }
-    };
-    samplePoints(tValues, 10);
-    return { min, max };
+  set ry(val) {
+    this._radius.y = val;
   }
-  toCommands() {
-    const { start, startControl, endControl, end } = this;
-    return [
-      { type: "M", x: start.x, y: start.y },
-      { type: "C", x1: startControl.x, y1: startControl.y, x2: endControl.x, y2: endControl.y, x: end.x, y: end.y }
-    ];
+  get dx() {
+    return this._diff.x;
   }
-  drawTo(ctx) {
-    const { start, startControl, endControl, end } = this;
-    ctx.lineTo(start.x, start.y);
-    ctx.bezierCurveTo(startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y);
-    return this;
+  set dx(val) {
+    this._diff.x = val;
   }
-  copy(source) {
-    super.copy(source);
-    this.start.copy(source.start);
-    this.startControl.copy(source.startControl);
-    this.endControl.copy(source.endControl);
-    this.end.copy(source.end);
-    return this;
+  get dy() {
+    return this._diff.y;
   }
-}
-
-const tempTransform0$1 = new Matrix3();
-const tempTransform1$1 = new Matrix3();
-const tempTransform2$1 = new Matrix3();
-const tempV2 = new Vector2();
-class EllipseCurve extends Curve {
-  constructor(center = new Vector2(), radiusX = 1, radiusY = 1, rotation = 0, startAngle = 0, endAngle = Math.PI * 2, clockwise = false) {
-    super();
-    this.center = center;
-    this.radiusX = radiusX;
-    this.radiusY = radiusY;
-    this.rotation = rotation;
-    this.startAngle = startAngle;
-    this.endAngle = endAngle;
-    this.clockwise = clockwise;
+  set dy(val) {
+    this._diff.y = val;
   }
   isClockwise() {
     return this.clockwise;
@@ -1366,39 +1886,38 @@ class EllipseCurve extends Curve {
       }
     }
     const angle = this.startAngle + t * deltaAngle;
-    let _x = this.center.x + this.radiusX * Math.cos(angle);
-    let _y = this.center.y + this.radiusY * Math.sin(angle);
-    if (this.rotation !== 0) {
-      const cos = Math.cos(this.rotation);
-      const sin = Math.sin(this.rotation);
-      const tx = _x - this.center.x;
-      const ty = _y - this.center.y;
-      _x = tx * cos - ty * sin + this.center.x;
-      _y = tx * sin + ty * cos + this.center.y;
+    let _x = this.cx + this.rx * Math.cos(angle);
+    let _y = this.cy + this.ry * Math.sin(angle);
+    if (this.rotate !== 0) {
+      const cos = Math.cos(this.rotate);
+      const sin = Math.sin(this.rotate);
+      const tx = _x - this.cx;
+      const ty = _y - this.cy;
+      _x = tx * cos - ty * sin + this.cx;
+      _y = tx * sin + ty * cos + this.cy;
     }
     return output.set(_x, _y);
   }
   toCommands() {
-    const { center, radiusX: rx, radiusY: ry, startAngle, endAngle, clockwise, rotation } = this;
-    const { x: cx, y: cy } = center;
-    const startX = cx + rx * Math.cos(startAngle) * Math.cos(rotation) - ry * Math.sin(startAngle) * Math.sin(rotation);
-    const startY = cy + rx * Math.cos(startAngle) * Math.sin(rotation) + ry * Math.sin(startAngle) * Math.cos(rotation);
+    const { cx, cy, rx, ry, startAngle, endAngle, clockwise, rotate } = this;
+    const startX = cx + rx * Math.cos(startAngle) * Math.cos(rotate) - ry * Math.sin(startAngle) * Math.sin(rotate);
+    const startY = cy + rx * Math.cos(startAngle) * Math.sin(rotate) + ry * Math.sin(startAngle) * Math.cos(rotate);
     const angleDiff = Math.abs(startAngle - endAngle);
     const largeArcFlag = angleDiff > Math.PI ? 1 : 0;
     const sweepFlag = clockwise ? 1 : 0;
-    const angle = rotation * 180 / Math.PI;
+    const angle = rotate * 180 / Math.PI;
     if (angleDiff >= 2 * Math.PI) {
       const midAngle = startAngle + Math.PI;
-      const midX = cx + rx * Math.cos(midAngle) * Math.cos(rotation) - ry * Math.sin(midAngle) * Math.sin(rotation);
-      const midY = cy + rx * Math.cos(midAngle) * Math.sin(rotation) + ry * Math.sin(midAngle) * Math.cos(rotation);
+      const midX = cx + rx * Math.cos(midAngle) * Math.cos(rotate) - ry * Math.sin(midAngle) * Math.sin(rotate);
+      const midY = cy + rx * Math.cos(midAngle) * Math.sin(rotate) + ry * Math.sin(midAngle) * Math.cos(rotate);
       return [
         { type: "M", x: startX, y: startY },
         { type: "A", rx, ry, angle, largeArcFlag: 0, sweepFlag, x: midX, y: midY },
         { type: "A", rx, ry, angle, largeArcFlag: 0, sweepFlag, x: startX, y: startY }
       ];
     } else {
-      const endX = cx + rx * Math.cos(endAngle) * Math.cos(rotation) - ry * Math.sin(endAngle) * Math.sin(rotation);
-      const endY = cy + rx * Math.cos(endAngle) * Math.sin(rotation) + ry * Math.sin(endAngle) * Math.cos(rotation);
+      const endX = cx + rx * Math.cos(endAngle) * Math.cos(rotate) - ry * Math.sin(endAngle) * Math.sin(rotate);
+      const endY = cy + rx * Math.cos(endAngle) * Math.sin(rotate) + ry * Math.sin(endAngle) * Math.cos(rotate);
       return [
         { type: "M", x: startX, y: startY },
         { type: "A", rx, ry, angle, largeArcFlag, sweepFlag, x: endX, y: endY }
@@ -1406,24 +1925,24 @@ class EllipseCurve extends Curve {
     }
   }
   drawTo(ctx) {
-    const { center, radiusX, radiusY, rotation, startAngle, endAngle, clockwise } = this;
+    const { cx, cy, rx, ry, rotate, startAngle, endAngle, clockwise } = this;
     ctx.ellipse(
-      center.x,
-      center.y,
-      radiusX,
-      radiusY,
-      rotation,
+      cx,
+      cy,
+      rx,
+      ry,
+      rotate,
       startAngle,
       endAngle,
       !clockwise
     );
     return this;
   }
-  matrix(matrix) {
-    tempV2.set(this.center.x, this.center.y);
+  applyTransform(matrix) {
+    tempV2.set(this.cx, this.cy);
     tempV2.applyMatrix3(matrix);
-    this.center.x = tempV2.x;
-    this.center.y = tempV2.y;
+    this.cx = tempV2.x;
+    this.cy = tempV2.y;
     if (isTransformSkewed(matrix)) {
       transfEllipseGeneric(this, matrix);
     } else {
@@ -1431,14 +1950,129 @@ class EllipseCurve extends Curve {
     }
     return this;
   }
-  getControlPoints() {
-    return [this.center];
+  getControlPointRefs() {
+    return [this._center];
+  }
+  getAdaptivePointArray(output = []) {
+    const { cx, cy, rx, ry, dx, dy } = this;
+    if (!(rx >= 0 && ry >= 0 && dx >= 0 && dy >= 0)) {
+      return output;
+    }
+    const n = Math.ceil(2.3 * Math.sqrt(rx + ry));
+    const m = n * 8 + (dx ? 4 : 0) + (dy ? 4 : 0);
+    if (m === 0) {
+      return output;
+    }
+    const array = [];
+    if (n === 0) {
+      array[0] = array[6] = cx + dx;
+      array[1] = array[3] = cy + dy;
+      array[2] = array[4] = cx - dx;
+      array[5] = array[7] = cy - dy;
+    } else {
+      let j1 = 0;
+      let j2 = n * 4 + (dx ? 2 : 0) + 2;
+      let j3 = j2;
+      let j4 = m;
+      let x0 = dx + rx;
+      let y0 = dy;
+      let x1 = cx + x0;
+      let x2 = cx - x0;
+      let y1 = cy + y0;
+      array[j1++] = x1;
+      array[j1++] = y1;
+      array[--j2] = y1;
+      array[--j2] = x2;
+      if (dy) {
+        const y22 = cy - y0;
+        array[j3++] = x2;
+        array[j3++] = y22;
+        array[--j4] = y22;
+        array[--j4] = x1;
+      }
+      for (let i = 1; i < n; i++) {
+        const a = Math.PI / 2 * (i / n);
+        const x02 = dx + Math.cos(a) * rx;
+        const y02 = dy + Math.sin(a) * ry;
+        const x12 = cx + x02;
+        const x22 = cx - x02;
+        const y12 = cy + y02;
+        const y22 = cy - y02;
+        array[j1++] = x12;
+        array[j1++] = y12;
+        array[--j2] = y12;
+        array[--j2] = x22;
+        array[j3++] = x22;
+        array[j3++] = y22;
+        array[--j4] = y22;
+        array[--j4] = x12;
+      }
+      x0 = dx;
+      y0 = dy + ry;
+      x1 = cx + x0;
+      x2 = cx - x0;
+      y1 = cy + y0;
+      const y2 = cy - y0;
+      array[j1++] = x1;
+      array[j1++] = y1;
+      array[--j4] = y2;
+      array[--j4] = x1;
+      if (dx) {
+        array[j1++] = x2;
+        array[j1++] = y1;
+        array[--j4] = y2;
+        array[--j4] = x2;
+      }
+    }
+    Array.prototype.push.apply(output, array);
+    return output;
+  }
+  fillTriangulate(options = {}) {
+    let {
+      vertices = [],
+      indices = [],
+      verticesStride = 2,
+      verticesOffset = 0,
+      indicesOffset = 0
+    } = options;
+    const points = this.getAdaptivePointArray();
+    if (points.length === 0) {
+      return { vertices, indices };
+    }
+    let centerX = 0;
+    let centerY = 0;
+    for (let i = 0; i < points.length; i += 2) {
+      centerX += points[i];
+      centerY += points[i + 1];
+    }
+    centerX /= points.length / 2;
+    centerY /= points.length / 2;
+    let count = verticesOffset;
+    vertices[count * verticesStride] = centerX;
+    vertices[count * verticesStride + 1] = centerY;
+    const centerIndex = count++;
+    for (let i = 0; i < points.length; i += 2) {
+      vertices[count * verticesStride] = points[i];
+      vertices[count * verticesStride + 1] = points[i + 1];
+      if (i > 0) {
+        indices[indicesOffset++] = count;
+        indices[indicesOffset++] = centerIndex;
+        indices[indicesOffset++] = count - 1;
+      }
+      count++;
+    }
+    indices[indicesOffset++] = centerIndex + 1;
+    indices[indicesOffset++] = centerIndex;
+    indices[indicesOffset++] = count - 1;
+    return {
+      vertices,
+      indices
+    };
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-    const { center, radiusX: rx, radiusY: ry, rotation: theta } = this;
-    const { x: cx, y: cy } = center;
-    const cosTheta = Math.cos(theta);
-    const sinTheta = Math.sin(theta);
+    const { cx, cy, rx, ry, rotate } = this;
+    const cosTheta = Math.cos(rotate);
+    const sinTheta = Math.sin(rotate);
     const halfWidth = Math.sqrt(
       rx * rx * cosTheta * cosTheta + ry * ry * sinTheta * sinTheta
     );
@@ -1453,22 +2087,22 @@ class EllipseCurve extends Curve {
   }
   copy(source) {
     super.copy(source);
-    this.center.x = source.center.x;
-    this.center.y = source.center.y;
-    this.radiusX = source.radiusX;
-    this.radiusY = source.radiusY;
+    this.cx = source.cx;
+    this.cy = source.cy;
+    this.rx = source.rx;
+    this.ry = source.ry;
     this.startAngle = source.startAngle;
     this.endAngle = source.endAngle;
     this.clockwise = source.clockwise;
-    this.rotation = source.rotation;
+    this.rotate = source.rotate;
     return this;
   }
 }
 function transfEllipseGeneric(curve, m) {
-  const a = curve.radiusX;
-  const b = curve.radiusY;
-  const cosTheta = Math.cos(curve.rotation);
-  const sinTheta = Math.sin(curve.rotation);
+  const a = curve.rx;
+  const b = curve.ry;
+  const cosTheta = Math.cos(curve.rotate);
+  const sinTheta = Math.sin(curve.rotate);
   const v1 = new Vector2(a * cosTheta, a * sinTheta);
   const v2 = new Vector2(-b * sinTheta, b * cosTheta);
   const f1 = v1.applyMatrix3(m);
@@ -1491,9 +2125,9 @@ function transfEllipseGeneric(curve, m) {
   const ed = eigenDecomposition(mQe[0], mQe[1], mQe[4]);
   const rt1sqrt = Math.sqrt(ed.rt1);
   const rt2sqrt = Math.sqrt(ed.rt2);
-  curve.radiusX = 1 / rt1sqrt;
-  curve.radiusY = 1 / rt2sqrt;
-  curve.rotation = Math.atan2(ed.sn, ed.cs);
+  curve.rx = 1 / rt1sqrt;
+  curve.ry = 1 / rt2sqrt;
+  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(
@@ -1533,10 +2167,10 @@ function transfEllipseGeneric(curve, m) {
 function transfEllipseNoSkew(curve, m) {
   const sx = getTransformScaleX(m);
   const sy = getTransformScaleY(m);
-  curve.radiusX *= sx;
-  curve.radiusY *= sy;
+  curve.rx *= sx;
+  curve.ry *= sy;
   const theta = sx > Number.EPSILON ? Math.atan2(m.elements[1], m.elements[0]) : Math.atan2(-m.elements[3], m.elements[4]);
-  curve.rotation += theta;
+  curve.rotate += theta;
   if (isTransformFlipped(m)) {
     curve.startAngle *= -1;
     curve.endAngle *= -1;
@@ -1601,20 +2235,276 @@ function eigenDecomposition(A, B, C) {
     cs = -sn;
     sn = t;
   }
-  return { rt1, rt2, cs, sn };
+  return { rt1, rt2, cs, sn };
+}
+
+class ArcCurve extends RoundCurve {
+  constructor(cx = 0, cy = 0, radius = 1, startAngle = 0, endAngle = Math.PI * 2, clockwise = false) {
+    super(
+      new Vector2(cx, cy),
+      new Vector2(radius, radius),
+      new Vector2(0, 0),
+      0,
+      startAngle,
+      endAngle,
+      clockwise
+    );
+    this.radius = radius;
+  }
+  drawTo(ctx) {
+    const { cx, cy, radius, startAngle, endAngle, clockwise } = this;
+    ctx.arc(
+      cx,
+      cy,
+      radius,
+      startAngle,
+      endAngle,
+      !clockwise
+    );
+    return this;
+  }
+  getAdaptivePointArray(output = []) {
+    const { cx, cy, radius, startAngle, endAngle, clockwise } = this;
+    let dist = Math.abs(startAngle - endAngle);
+    if (!clockwise && startAngle > endAngle) {
+      dist = 2 * Math.PI - dist;
+    } else if (clockwise && endAngle > startAngle) {
+      dist = 2 * Math.PI - dist;
+    }
+    let steps = Math.max(6, Math.floor(6 * radius ** (1 / 3) * (dist / Math.PI)));
+    steps = Math.max(steps, 3);
+    let f = dist / steps;
+    let t = startAngle;
+    f *= !clockwise ? -1 : 1;
+    for (let i = 0; i < steps + 1; i++) {
+      const cs = Math.cos(t);
+      const sn = Math.sin(t);
+      const nx = cx + cs * radius;
+      const ny = cy + sn * radius;
+      output.push(nx, ny);
+      t += f;
+    }
+    return output;
+  }
+}
+
+class CompositeCurve extends Curve {
+  constructor(curves = []) {
+    super();
+    this.curves = curves;
+  }
+  addCurve(curve) {
+    this.curves.push(curve);
+    return this;
+  }
+  getPoint(t, output = new Vector2()) {
+    const d = t * this.getLength();
+    const lengths = this.getLengths();
+    let i = 0;
+    while (i < lengths.length) {
+      if (lengths[i] >= d) {
+        const diff = lengths[i] - d;
+        const curve = this.curves[i];
+        const length = curve.getLength();
+        return curve.getPointAt(
+          length === 0 ? 0 : 1 - diff / length,
+          output
+        );
+      }
+      i++;
+    }
+    return output;
+  }
+  updateLengths() {
+    const arcLengths = [];
+    for (let i = 0, sum = 0, len = this.curves.length; i < len; i++) {
+      sum += this.curves[i].getLength();
+      arcLengths.push(sum);
+    }
+    this._arcLengths = arcLengths;
+  }
+  getControlPointRefs() {
+    return this.curves.flatMap((curve) => curve.getControlPointRefs());
+  }
+  getAdaptivePointArray(output = []) {
+    let offset;
+    this.curves.forEach((curve) => {
+      curve.getAdaptivePointArray(output);
+      if (offset) {
+        if (output[offset - 1] === output[offset + 1] && output[offset] === output[offset + 2]) {
+          output.splice(offset + 1, 2);
+        }
+      }
+      offset = output.length - 1;
+    });
+    return output;
+  }
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
+    this.curves.forEach((curve) => curve.getMinMax(min, max));
+    return { min, max };
+  }
+  getBoundingBox() {
+    const { min, max } = this.getMinMax();
+    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+  }
+  toCommands() {
+    return this.curves.flatMap((curve) => curve.toCommands());
+  }
+  drawTo(ctx) {
+    const point = this.curves[0]?.getPoint(0);
+    if (point) {
+      ctx.moveTo(point.x, point.y);
+    }
+    this.curves.forEach((curve) => curve.drawTo(ctx));
+    return this;
+  }
+}
+
+class CubicBezierCurve extends Curve {
+  constructor(p1, cp1, cp2, p2) {
+    super();
+    this.p1 = p1;
+    this.cp1 = cp1;
+    this.cp2 = cp2;
+    this.p2 = p2;
+  }
+  static from(p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) {
+    return new CubicBezierCurve(
+      new Vector2(p1x, p1y),
+      new Vector2(cp1x, cp1y),
+      new Vector2(cp2x, cp2y),
+      new Vector2(p2x, p2y)
+    );
+  }
+  getPoint(t, output = new Vector2()) {
+    const { p1, cp1, cp2, p2 } = this;
+    return output.set(
+      cubicBezier(t, p1.x, cp1.x, cp2.x, p2.x),
+      cubicBezier(t, p1.y, cp1.y, cp2.y, p2.y)
+    );
+  }
+  getAdaptivePointArray(output = []) {
+    return getAdaptiveCubicBezierCurvePoints(
+      this.p1.x,
+      this.p1.y,
+      this.cp1.x,
+      this.cp1.y,
+      this.cp2.x,
+      this.cp2.y,
+      this.p2.x,
+      this.p2.y,
+      0.5,
+      output
+    );
+  }
+  getControlPointRefs() {
+    return [this.p1, this.cp1, this.cp2, this.p2];
+  }
+  _solveQuadratic(a, b, c) {
+    const discriminant = b * b - 4 * a * c;
+    if (discriminant < 0)
+      return [];
+    const sqrtDiscriminant = Math.sqrt(discriminant);
+    const t1 = (-b + sqrtDiscriminant) / (2 * a);
+    const t2 = (-b - sqrtDiscriminant) / (2 * a);
+    return [t1, t2].filter((t) => t >= 0 && t <= 1);
+  }
+  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
+    const { p1, cp1, cp2, p2 } = this;
+    const dxRoots = this._solveQuadratic(
+      3 * (cp1.x - p1.x),
+      6 * (cp2.x - cp1.x),
+      3 * (p2.x - cp2.x)
+    );
+    const dyRoots = this._solveQuadratic(
+      3 * (cp1.y - p1.y),
+      6 * (cp2.y - cp1.y),
+      3 * (p2.y - cp2.y)
+    );
+    const tValues = [0, 1, ...dxRoots, ...dyRoots];
+    const samplePoints = (tValues2, precision) => {
+      for (const t of tValues2) {
+        for (let i = 0; i <= precision; i++) {
+          const delta = i / precision - 0.5;
+          const refinedT = Math.min(1, Math.max(0, t + delta));
+          const point = this.getPoint(refinedT);
+          min.x = Math.min(min.x, point.x);
+          min.y = Math.min(min.y, point.y);
+          max.x = Math.max(max.x, point.x);
+          max.y = Math.max(max.y, point.y);
+        }
+      }
+    };
+    samplePoints(tValues, 10);
+    return { min, max };
+  }
+  toCommands() {
+    const { p1, cp1, cp2, p2 } = this;
+    return [
+      { type: "M", x: p1.x, y: p1.y },
+      { type: "C", x1: cp1.x, y1: cp1.y, x2: cp2.x, y2: cp2.y, x: p2.x, y: p2.y }
+    ];
+  }
+  drawTo(ctx) {
+    const { p1, cp1, cp2, p2 } = this;
+    ctx.lineTo(p1.x, p1.y);
+    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, p2.x, p2.y);
+    return this;
+  }
+  copy(source) {
+    super.copy(source);
+    this.p1.copy(source.p1);
+    this.cp1.copy(source.cp1);
+    this.cp2.copy(source.cp2);
+    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 LineCurve extends Curve {
-  constructor(start = new Vector2(), end = new Vector2()) {
+  constructor(p1, p2) {
     super();
-    this.start = start;
-    this.end = end;
+    this.p1 = p1;
+    this.p2 = p2;
+  }
+  static from(p1x, p1y, p2x, p2y) {
+    return new LineCurve(
+      new Vector2(p1x, p1y),
+      new Vector2(p2x, p2y)
+    );
   }
   getPoint(t, output = new Vector2()) {
     if (t === 1) {
-      output.copy(this.end);
+      output.copy(this.p2);
     } else {
-      output.copy(this.end).sub(this.start).scale(t).add(this.start);
+      output.copy(this.p2).sub(this.p1).scale(t).add(this.p1);
     }
     return output;
   }
@@ -1622,330 +2512,247 @@ class LineCurve extends Curve {
     return this.getPoint(u, output);
   }
   getTangent(_t, output = new Vector2()) {
-    return output.subVectors(this.end, this.start).normalize();
+    return output.subVectors(this.p2, this.p1).normalize();
   }
   getTangentAt(u, output = new Vector2()) {
     return this.getTangent(u, output);
   }
-  getControlPoints() {
-    return [
-      this.start,
-      this.end
-    ];
+  getControlPointRefs() {
+    return [this.p1, this.p2];
+  }
+  getAdaptivePointArray(output = []) {
+    output.push(
+      this.p1.x,
+      this.p1.y,
+      this.p2.x,
+      this.p2.y
+    );
+    return output;
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-    const { start, end } = this;
-    min.x = Math.min(min.x, start.x, end.x);
-    min.y = Math.min(min.y, start.y, end.y);
-    max.x = Math.max(max.x, start.x, end.x);
-    max.y = Math.max(max.y, start.y, end.y);
+    const { p1, p2 } = this;
+    min.x = Math.min(min.x, p1.x, p2.x);
+    min.y = Math.min(min.y, p1.y, p2.y);
+    max.x = Math.max(max.x, p1.x, p2.x);
+    max.y = Math.max(max.y, p1.y, p2.y);
     return { min, max };
   }
   toCommands() {
-    const { start, end } = this;
+    const { p1, p2 } = this;
     return [
-      { type: "M", x: start.x, y: start.y },
-      { type: "L", x: end.x, y: end.y }
+      { type: "M", x: p1.x, y: p1.y },
+      { type: "L", x: p2.x, y: p2.y }
     ];
   }
   drawTo(ctx) {
-    const { start, end } = this;
-    ctx.lineTo(start.x, start.y);
-    ctx.lineTo(end.x, end.y);
+    const { p1, p2 } = this;
+    ctx.lineTo(p1.x, p1.y);
+    ctx.lineTo(p2.x, p2.y);
     return this;
   }
   copy(source) {
     super.copy(source);
-    this.start.copy(source.start);
-    this.end.copy(source.end);
+    this.p1.copy(source.p1);
+    this.p2.copy(source.p2);
     return this;
   }
 }
 
-class HeartCurve extends Curve {
-  constructor(center, size, start = 0, end = 1) {
-    super();
-    this.center = center;
-    this.size = size;
-    this.start = start;
-    this.end = end;
-    this.update();
-  }
-  curveT = 0;
-  update() {
-    const { x, y } = this.center;
-    const A = new Vector2(x + 0.5 * this.size, y - 0.5 * this.size);
-    const t = new Vector2(x - 0.5 * this.size, y - 0.5 * this.size);
-    const i = new Vector2(x, y + 0.5 * this.size);
-    const curve1 = new CircleCurve(A, Math.SQRT1_2 * this.size, -0.25 * Math.PI, 0.75 * Math.PI);
-    const curve5 = new CircleCurve(t, Math.SQRT1_2 * this.size, -0.75 * Math.PI, 0.25 * Math.PI);
-    const curve3 = new CircleCurve(i, 0.5 * Math.SQRT1_2 * this.size, 0.75 * Math.PI, 1.25 * Math.PI);
-    const e = new Vector2(x, y + this.size);
-    const l = new Vector2(x + this.size, y);
-    const c = new Vector2().lerpVectors(l, e, 0.75);
-    const h = new Vector2(x - this.size, y);
-    const a = new Vector2().lerpVectors(h, e, 0.75);
-    const curve2 = new LineCurve(l, c);
-    const curve4 = new LineCurve(a, h);
-    this.curves = [curve1, curve2, curve3, curve4, curve5];
-    return this;
-  }
-  getPoint(t) {
-    return this.getCurve(t).getPoint(this.curveT);
-  }
-  getPointAt(t) {
-    return this.getPoint(t);
-  }
-  getCurve(t) {
-    let val = (t * (this.end - this.start) + this.start) % 1;
-    val < 0 && (val += 1);
-    val *= 9 * Math.PI / 8 + 1.5;
-    let index;
-    const PI_1_2 = 0.5 * Math.PI;
-    if (val < PI_1_2) {
-      index = 0;
-      this.curveT = val / PI_1_2;
-    } else if (val < PI_1_2 + 0.75) {
-      index = 1;
-      this.curveT = (val - PI_1_2) / 0.75;
-    } else if (val < 5 * Math.PI / 8 + 0.75) {
-      index = 2;
-      this.curveT = (val - PI_1_2 - 0.75) / (Math.PI / 8);
-    } else if (val < 5 * Math.PI / 8 + 1.5) {
-      index = 3;
-      this.curveT = (val - 5 * Math.PI / 8 - 0.75) / 0.75;
-    } else {
-      index = 4;
-      this.curveT = (val - 5 * Math.PI / 8 - 1.5) / PI_1_2;
-    }
-    return this.curves[index];
-  }
-  getTangent(t, output) {
-    return this.getCurve(t).getTangent(this.curveT, output);
-  }
-  getNormal(t, output) {
-    return this.getCurve(t).getNormal(this.curveT, output);
-  }
-  getControlPoints() {
-    return this.curves.flatMap((curve) => curve.getControlPoints());
-  }
-  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-    this.curves.forEach((curve) => curve.getMinMax(min, max));
-    return { min, max };
-  }
-  toCommands() {
-    return this.curves.flatMap((curve) => curve.toCommands());
-  }
-  drawTo(ctx) {
-    this.curves.forEach((curve) => curve.drawTo(ctx));
-    return this;
-  }
+class PloygonCurve extends CompositeCurve {
+  //
 }
 
-class PloygonCurve extends Curve {
-  constructor(center, radius = 0, number = 0, start = 0, end = 1) {
-    super();
-    this.center = center;
-    this.radius = radius;
-    this.number = number;
-    this.start = start;
-    this.end = end;
-    this.update();
-  }
-  curves = [];
-  curveT = 0;
-  points = [];
-  update() {
-    for (let i = 0; i < this.number; i++) {
-      let radian = i * 2 * Math.PI / this.number;
-      radian -= 0.5 * Math.PI;
-      this.points.push(
+class EquilateralPloygonCurve extends PloygonCurve {
+  constructor(cx = 0, cy = 0, radius = 1, sideCount = 3) {
+    const points = [];
+    for (let i = 0; i < sideCount; i++) {
+      const radian = i * 2 * Math.PI / sideCount - 0.5 * Math.PI;
+      points.push(
         new Vector2(
-          this.radius * Math.cos(radian),
-          this.radius * Math.sin(radian)
-        ).add(this.center)
+          radius * Math.cos(radian),
+          radius * Math.sin(radian)
+        ).add({ x: cx, y: cy })
       );
     }
-    for (let i = 0; i < this.number; i++) {
-      this.curves.push(new LineCurve(this.points[i], this.points[(i + 1) % this.number]));
+    const curves = [];
+    for (let i = 0; i < sideCount; i++) {
+      curves.push(
+        new LineCurve(
+          points[i],
+          points[(i + 1) % sideCount]
+        )
+      );
     }
-    return this;
-  }
-  getCurve(t) {
-    let pos = (t * (this.end - this.start) + this.start) % 1;
-    pos < 0 && (pos += 1);
-    const v = pos * this.number;
-    const index = Math.floor(v);
-    this.curveT = v - index;
-    return this.curves[index];
-  }
-  getPoint(t, output) {
-    return this.getCurve(t).getPoint(this.curveT, output);
-  }
-  getPointAt(u, output) {
-    return this.getPoint(u, output);
-  }
-  getTangent(t, output) {
-    return this.getCurve(t).getTangent(this.curveT, output);
-  }
-  getNormal(t, output) {
-    return this.getCurve(t).getNormal(this.curveT, output);
-  }
-  getControlPoints() {
-    return this.curves.flatMap((curve) => curve.getControlPoints());
-  }
-  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-    this.curves.forEach((curve) => curve.getMinMax(min, max));
-    return { min, max };
-  }
-  toCommands() {
-    return this.curves.flatMap((curve) => curve.toCommands());
-  }
-  drawTo(ctx) {
-    this.curves.forEach((curve) => curve.drawTo(ctx));
-    return this;
+    super(curves);
+    this.cx = cx;
+    this.cy = cy;
+    this.radius = radius;
+    this.sideCount = sideCount;
   }
 }
 
 class QuadraticBezierCurve extends Curve {
-  constructor(start = new Vector2(), control = new Vector2(), end = new Vector2()) {
+  constructor(p1, cp, p2) {
     super();
-    this.start = start;
-    this.control = control;
-    this.end = end;
+    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 { start, control, end } = this;
+    const { p1, cp, p2 } = this;
     output.set(
-      quadraticBezier(t, start.x, control.x, end.x),
-      quadraticBezier(t, start.y, control.y, end.y)
+      quadraticBezier(t, p1.x, cp.x, p2.x),
+      quadraticBezier(t, p1.y, cp.y, p2.y)
     );
     return output;
   }
-  getControlPoints() {
-    return [
-      this.start,
-      this.control,
-      this.end
-    ];
+  getControlPointRefs() {
+    return [this.p1, this.cp, this.p2];
+  }
+  getAdaptivePointArray(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 { start, control, end } = this;
-    const x1 = 0.5 * (start.x + control.x);
-    const y1 = 0.5 * (start.y + control.y);
-    const x2 = 0.5 * (start.x + end.x);
-    const y2 = 0.5 * (start.y + end.y);
-    min.x = Math.min(min.x, start.x, end.x, x1, x2);
-    min.y = Math.min(min.y, start.y, end.y, y1, y2);
-    max.x = Math.max(max.x, start.x, end.x, x1, x2);
-    max.y = Math.max(max.y, start.y, end.y, y1, y2);
+    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, max };
   }
   toCommands() {
-    const { start, control, end } = this;
+    const { p1, cp, p2 } = this;
     return [
-      { type: "M", x: start.x, y: start.y },
-      { type: "Q", x1: control.x, y1: control.y, x: end.x, y: end.y }
+      { 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 { start, control, end } = this;
-    ctx.lineTo(start.x, start.y);
-    ctx.quadraticCurveTo(control.x, control.y, end.x, end.y);
+    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.start.copy(source.start);
-    this.control.copy(source.control);
-    this.end.copy(source.end);
+    this.p1.copy(source.p1);
+    this.cp.copy(source.cp);
+    this.p2.copy(source.p2);
     return this;
   }
 }
 
-class RectangularCurve extends Curve {
-  constructor(center, rx, aspectRatio = 1, start = 0, end = 1) {
-    super();
-    this.center = center;
-    this.rx = rx;
-    this.aspectRatio = aspectRatio;
-    this.start = start;
-    this.end = end;
-    this.update();
-  }
-  curves = [];
-  curveT = 0;
-  get x() {
-    return this.center.x - this.rx;
-  }
-  get y() {
-    return this.center.y - this.rx / this.aspectRatio;
-  }
-  get width() {
-    return this.rx * 2;
-  }
-  get height() {
-    return this.rx / this.aspectRatio * 2;
-  }
-  update() {
-    const { x, y } = this.center;
-    const offsetX = this.rx;
-    const offsetY = this.rx / this.aspectRatio;
+class RectangleCurve extends PloygonCurve {
+  constructor(x = 0, y = 0, width = 0, height = 0) {
     const points = [
-      new Vector2(x - offsetX, y - offsetY),
-      new Vector2(x + offsetX, y - offsetY),
-      new Vector2(x + offsetX, y + offsetY),
-      new Vector2(x - offsetX, y + offsetY)
+      new Vector2(x, y),
+      new Vector2(x + width, y),
+      new Vector2(x + width, y + height),
+      new Vector2(x, y + height)
     ];
-    for (let i = 0; i < 4; i++) {
-      this.curves.push(new LineCurve(points[i].clone(), points[(i + 1) % 4].clone()));
-    }
-    return this;
-  }
-  getCurve(t) {
-    let current = (t * (this.end - this.start) + this.start) % 1;
-    current < 0 && (current += 1);
-    current *= (1 + this.aspectRatio) * 2;
-    let i;
-    if (current < this.aspectRatio) {
-      i = 0;
-      this.curveT = current / this.aspectRatio;
-    } else if (current < this.aspectRatio + 1) {
-      i = 1;
-      this.curveT = (current - this.aspectRatio) / 1;
-    } else if (current < 2 * this.aspectRatio + 1) {
-      i = 2;
-      this.curveT = (current - this.aspectRatio - 1) / this.aspectRatio;
-    } else {
-      i = 3;
-      this.curveT = (current - 2 * this.aspectRatio - 1) / 1;
-    }
-    return this.curves[i];
-  }
-  getPoint(t, output) {
-    return this.getCurve(t).getPoint(this.curveT, output);
-  }
-  getPointAt(u, output) {
-    return this.getPoint(u, output);
-  }
-  getTangent(t, output) {
-    return this.getCurve(t).getTangent(this.curveT, output);
-  }
-  getNormal(t, output) {
-    return this.getCurve(t).getNormal(this.curveT, output);
-  }
-  getControlPoints() {
-    return this.curves.flatMap((curve) => curve.getControlPoints());
+    super([
+      new LineCurve(points[0], points[1]),
+      new LineCurve(points[1], points[2]),
+      new LineCurve(points[2], points[3]),
+      new LineCurve(points[3], points[0])
+    ]);
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
   }
-  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-    this.curves.forEach((curve) => curve.getMinMax(min, max));
-    return { min, max };
+  drawTo(ctx) {
+    ctx.rect(this.x, this.y, this.width, this.height);
+    return this;
+  }
+  fillTriangulate(options = {}) {
+    let {
+      vertices = [],
+      indices = [],
+      verticesStride = 2,
+      verticesOffset = 0,
+      indicesOffset = 0
+    } = options;
+    const { x, y, width, height } = this;
+    const points = [
+      x,
+      y,
+      x + width,
+      y,
+      x + width,
+      y + height,
+      x,
+      y + height
+    ];
+    let count = 0;
+    verticesOffset *= verticesStride;
+    vertices[verticesOffset + count] = points[0];
+    vertices[verticesOffset + count + 1] = points[1];
+    count += verticesStride;
+    vertices[verticesOffset + count] = points[2];
+    vertices[verticesOffset + count + 1] = points[3];
+    count += verticesStride;
+    vertices[verticesOffset + count] = points[6];
+    vertices[verticesOffset + count + 1] = points[7];
+    count += verticesStride;
+    vertices[verticesOffset + count] = points[4];
+    vertices[verticesOffset + count + 1] = points[5];
+    count += verticesStride;
+    const verticesIndex = verticesOffset / verticesStride;
+    indices[indicesOffset++] = verticesIndex;
+    indices[indicesOffset++] = verticesIndex + 1;
+    indices[indicesOffset++] = verticesIndex + 2;
+    indices[indicesOffset++] = verticesIndex + 1;
+    indices[indicesOffset++] = verticesIndex + 3;
+    indices[indicesOffset++] = verticesIndex + 2;
+    return { vertices, indices };
   }
-  toCommands() {
-    return this.curves.flatMap((curve) => curve.toCommands());
+}
+
+class RoundRectangleCurve extends RoundCurve {
+  constructor(x = 0, y = 0, width = 1, height = 1, radius = 1) {
+    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;
+    const dx = halfWidth - rx;
+    const dy = halfHeight - ry;
+    super(
+      new Vector2(cx, cy),
+      new Vector2(rx, ry),
+      new Vector2(dx, dy)
+    );
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.radius = radius;
   }
   drawTo(ctx) {
-    this.curves.forEach((curve) => curve.drawTo(ctx));
+    const { x, y, width, height, radius } = this;
+    ctx.roundRect(x, y, width, height, radius);
     return this;
   }
 }
@@ -1970,7 +2777,7 @@ class SplineCurve extends Curve {
     );
     return output;
   }
-  getControlPoints() {
+  getControlPointRefs() {
     return this.points;
   }
   copy(source) {
@@ -1983,22 +2790,16 @@ class SplineCurve extends Curve {
   }
 }
 
-class CurvePath extends Curve {
-  curves = [];
+class CurvePath extends CompositeCurve {
   startPoint;
   currentPoint;
   autoClose = false;
-  _cacheLengths = [];
   constructor(points) {
     super();
     if (points) {
       this.addPoints(points);
     }
   }
-  addCurve(curve) {
-    this.curves.push(curve);
-    return this;
-  }
   addPoints(points) {
     this.moveTo(points[0].x, points[0].y);
     for (let i = 1, len = points.length; i < len; i++) {
@@ -2008,82 +2809,26 @@ class CurvePath extends Curve {
     return this;
   }
   addCommands(commands) {
-    addPathCommandsToPath2D(commands, this);
+    svgPathCommandsAddToPath2D(commands, this);
     return this;
   }
   addData(data) {
-    this.addCommands(pathDataToPathCommands(data));
+    this.addCommands(svgPathDataToCommands(data));
     return this;
   }
-  getPoint(t, output = new Vector2()) {
-    const d = t * this.getLength();
-    const curveLengths = this.getCurveLengths();
-    let i = 0;
-    while (i < curveLengths.length) {
-      if (curveLengths[i] >= d) {
-        const diff = curveLengths[i] - d;
-        const curve = this.curves[i];
-        const segmentLength = curve.getLength();
-        return curve.getPointAt(segmentLength === 0 ? 0 : 1 - diff / segmentLength, output);
-      }
-      i++;
+  getUnevenPointArray(count = 40, output = []) {
+    super.getUnevenPointArray(count, 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;
   }
-  getControlPoints() {
-    return this.curves.flatMap((curve) => curve.getControlPoints());
-  }
-  getLength() {
-    const lengths = this.getCurveLengths();
-    return lengths[lengths.length - 1];
-  }
-  updateArcLengths() {
-    super.updateArcLengths();
-    this._cacheLengths = [];
-    this.getCurveLengths();
-  }
-  getCurveLengths() {
-    if (this._cacheLengths.length === this.curves.length) {
-      return this._cacheLengths;
-    }
-    const lengths = [];
-    let sums = 0;
-    for (let i = 0, l = this.curves.length; i < l; i++) {
-      sums += this.curves[i].getLength();
-      lengths.push(sums);
-    }
-    this._cacheLengths = lengths;
-    return lengths;
-  }
-  getSpacedPoints(divisions = 40) {
-    const points = [];
-    for (let i = 0; i <= divisions; i++) {
-      points.push(this.getPoint(i / divisions));
-    }
-    if (this.autoClose) {
-      points.push(points[0]);
-    }
-    return points;
-  }
-  getPoints(divisions = 12) {
-    const points = [];
-    const curves = this.curves;
-    let last;
-    for (let i = 0, len = curves.length; i < len; i++) {
-      const curve = curves[i];
-      const curvePoints = curve.getPoints(divisions);
-      for (let i2 = 0; i2 < curvePoints.length; i2++) {
-        const point = curvePoints[i2];
-        if (last?.equals(point))
-          continue;
-        points.push(point);
-        last = point;
-      }
+  getSpacedPointArray(count = 40, output = []) {
+    super.getSpacedPointArray(count, 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]);
     }
-    if (this.autoClose && points.length > 1 && !points[points.length - 1].equals(points[0])) {
-      points.push(points[0]);
-    }
-    return points;
+    return output;
   }
   _setCurrentPoint(point) {
     this.currentPoint = new Vector2(point.x, point.y);
@@ -2092,12 +2837,21 @@ class CurvePath extends Curve {
     }
     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));
+        this.curves.push(new LineCurve(end, start));
         end.copy(start);
       }
       this.startPoint = void 0;
@@ -2113,9 +2867,11 @@ class CurvePath extends Curve {
     const start = this.currentPoint;
     if (!start?.equals({ x, y })) {
       this.curves.push(
-        new LineCurve(
-          start?.clone() ?? new Vector2(),
-          new Vector2(x, y)
+        LineCurve.from(
+          start?.x ?? 0,
+          start?.y ?? 0,
+          x,
+          y
         )
       );
     }
@@ -2126,11 +2882,15 @@ class CurvePath extends Curve {
     const start = this.currentPoint;
     if (!start?.equals({ x, y })) {
       this.curves.push(
-        new CubicBezierCurve(
-          start?.clone() ?? new Vector2(),
-          new Vector2(cp1x, cp1y),
-          new Vector2(cp2x, cp2y),
-          new Vector2(x, y)
+        CubicBezierCurve.from(
+          start?.x ?? 0,
+          start?.y ?? 0,
+          cp1x,
+          cp1y,
+          cp2x,
+          cp2y,
+          x,
+          y
         )
       );
     }
@@ -2141,10 +2901,13 @@ class CurvePath extends Curve {
     const start = this.currentPoint;
     if (!start?.equals({ x, y })) {
       this.curves.push(
-        new QuadraticBezierCurve(
-          start?.clone() ?? new Vector2(),
-          new Vector2(cpx, cpy),
-          new Vector2(x, y)
+        QuadraticBezierCurve.from(
+          start?.x ?? 0,
+          start?.y ?? 0,
+          cpx,
+          cpy,
+          x,
+          y
         )
       );
     }
@@ -2152,12 +2915,23 @@ class CurvePath extends Curve {
     return this;
   }
   arc(x, y, radius, startAngle, endAngle, counterclockwise) {
-    this.ellipse(x, y, radius, radius, 0, 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;
   }
   relativeArc(x, y, radius, startAngle, endAngle, counterclockwise) {
-    const point = this.currentPoint ?? new Vector2();
-    this.arc(x + point.x, y + point.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;
   }
   // TODO
@@ -2168,7 +2942,8 @@ class CurvePath extends Curve {
   }
   ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise = true) {
     const curve = new EllipseCurve(
-      new Vector2(x, y),
+      x,
+      y,
       radiusX,
       radiusY,
       rotation,
@@ -2176,29 +2951,28 @@ class CurvePath extends Curve {
       endAngle,
       !counterclockwise
     );
-    if (this.curves.length > 0) {
-      const first = curve.getPoint(0);
-      if (!this.currentPoint || !first.equals(this.currentPoint)) {
-        this.lineTo(first.x, first.y);
-      }
-    }
+    this._connetLineTo(curve);
     this.curves.push(curve);
     this._setCurrentPoint(curve.getPoint(1));
     return this;
   }
   relativeEllipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-    const point = this.currentPoint ?? new Vector2();
-    this.ellipse(x + point.x, y + point.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;
   }
-  rect(x, y, w, h) {
-    this.curves.push(
-      new RectangularCurve(
-        new Vector2(x + w / 2, y + h / 2),
-        w / 2,
-        w / h
-      )
-    );
+  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;
+  }
+  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;
   }
@@ -2208,17 +2982,6 @@ class CurvePath extends Curve {
     this._setCurrentPoint(points[points.length - 1]);
     return this;
   }
-  getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-    this.curves.forEach((curve) => curve.getMinMax(min, max));
-    return { min, max };
-  }
-  getBoundingBox() {
-    const { min, max } = this.getMinMax();
-    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
-  }
-  toCommands() {
-    return this.curves.flatMap((curve) => curve.toCommands());
-  }
   drawTo(ctx) {
     const point = this.curves[0]?.getPoint(0);
     if (point) {
@@ -2269,20 +3032,22 @@ function getIntersectionPoint(p1, p2, q1, q2) {
   );
 }
 
-class Path2D {
-  currentPath = new CurvePath();
-  paths = [this.currentPath];
+class Path2D extends CompositeCurve {
+  currentCurve = new CurvePath();
   style;
   get startPoint() {
-    return this.currentPath.startPoint;
+    return this.currentCurve.startPoint;
   }
   get currentPoint() {
-    return this.currentPath.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);
@@ -2292,99 +3057,94 @@ class Path2D {
         this.addData(path);
       }
     }
-    this.style = style;
   }
   addPath(path) {
     if (path instanceof Path2D) {
-      this.paths.push(...path.paths.map((v) => v.clone()));
+      this.curves.push(...path.curves.map((v) => v.clone()));
     } else {
-      this.paths.push(path);
+      this.curves.push(path);
     }
     return this;
   }
   closePath() {
     const startPoint = this.startPoint;
     if (startPoint) {
-      this.currentPath.closePath();
-      if (this.currentPath.curves.length > 0) {
-        this.currentPath = new CurvePath().moveTo(startPoint.x, startPoint.y);
-        this.paths.push(this.currentPath);
+      this.currentCurve.closePath();
+      if (this.currentCurve.curves.length > 0) {
+        this.currentCurve = new CurvePath().moveTo(startPoint.x, startPoint.y);
+        this.curves.push(this.currentCurve);
       }
     }
     return this;
   }
   moveTo(x, y) {
-    const { currentPoint, curves } = this.currentPath;
-    if (!currentPoint?.equals({ x, y })) {
-      if (curves.length) {
-        this.currentPath = new CurvePath().moveTo(x, y);
-        this.paths.push(this.currentPath);
-      } else {
-        this.currentPath.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);
     }
     return this;
   }
   lineTo(x, y) {
-    this.currentPath.lineTo(x, y);
+    this.currentCurve.lineTo(x, y);
     return this;
   }
   bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
-    this.currentPath.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+    this.currentCurve.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
     return this;
   }
   quadraticCurveTo(cpx, cpy, x, y) {
-    this.currentPath.quadraticCurveTo(cpx, cpy, x, y);
+    this.currentCurve.quadraticCurveTo(cpx, cpy, x, y);
     return this;
   }
   arc(x, y, radius, startAngle, endAngle, counterclockwise) {
-    this.currentPath.arc(x, y, radius, startAngle, endAngle, counterclockwise);
+    this.currentCurve.arc(x, y, radius, startAngle, endAngle, counterclockwise);
     return this;
   }
   arcTo(x1, y1, x2, y2, radius) {
-    this.currentPath.arcTo(x1, y1, x2, y2, radius);
+    this.currentCurve.arcTo(x1, y1, x2, y2, radius);
     return this;
   }
   ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-    this.currentPath.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
+    this.currentCurve.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
+    return this;
+  }
+  rect(x, y, width, height) {
+    this.currentCurve.rect(x, y, width, height);
     return this;
   }
-  rect(x, y, w, h) {
-    this.currentPath.rect(x, y, w, h);
+  roundRect(x, y, width, height, radii) {
+    this.currentCurve.roundRect(x, y, width, height, radii);
     return this;
   }
   addCommands(commands) {
-    addPathCommandsToPath2D(commands, this);
+    svgPathCommandsAddToPath2D(commands, this);
     return this;
   }
   addData(data) {
-    this.addCommands(pathDataToPathCommands(data));
+    this.addCommands(svgPathDataToCommands(data));
     return this;
   }
   splineThru(points) {
-    this.currentPath.splineThru(points);
+    this.currentCurve.splineThru(points);
     return this;
   }
-  getControlPoints() {
-    return this.paths.flatMap((path) => path.getControlPoints());
-  }
-  getCurves() {
-    return this.paths.flatMap((path) => path.curves);
-  }
   scale(sx, sy = sx, target = { x: 0, y: 0 }) {
-    this.getControlPoints().forEach((point) => {
+    this.getControlPointRefs().forEach((point) => {
       point.scale(sx, sy, target);
     });
     return this;
   }
   skew(ax, ay = 0, target = { x: 0, y: 0 }) {
-    this.getControlPoints().forEach((point) => {
+    this.getControlPointRefs().forEach((point) => {
       point.skew(ax, ay, target);
     });
     return this;
   }
   rotate(a, target = { x: 0, y: 0 }) {
-    this.getControlPoints().forEach((point) => {
+    this.getControlPointRefs().forEach((point) => {
       point.rotate(a, target);
     });
     return this;
@@ -2393,12 +3153,14 @@ class Path2D {
     if (b === 0) {
       return this;
     }
-    const curves = this.getCurves();
+    const curves = this.curves;
     const _list = [];
     const _isClockwise = [];
     const _points = [];
     curves.forEach((curve, index) => {
-      const points = curve.getControlPoints();
+      if (!curve.getLength())
+        return;
+      const points = curve.getControlPointRefs();
       const isClockwise = curve.isClockwise();
       _points[index] = points;
       _isClockwise[index] = isClockwise;
@@ -2420,6 +3182,8 @@ class Path2D {
       });
     });
     curves.forEach((curve, index) => {
+      if (!curve.getLength())
+        return;
       const isClockwise = _isClockwise[index];
       const points = _points[index];
       points.forEach((point) => {
@@ -2446,20 +3210,20 @@ class Path2D {
     });
     return this;
   }
-  matrix(matrix) {
-    this.getCurves().forEach((curve) => curve.matrix(matrix));
+  applyTransform(transform) {
+    this.curves.forEach((curve) => curve.applyTransform(transform));
     return this;
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN, withStyle = true) {
     const strokeWidth = this.strokeWidth;
-    this.getCurves().forEach((curve) => {
+    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.arcLengthDivisions) {
+          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);
@@ -2492,7 +3256,7 @@ class Path2D {
     ctx.beginPath();
     ctx.save();
     setCanvasContext(ctx, style);
-    this.paths.forEach((path) => {
+    this.curves.forEach((path) => {
       path.drawTo(ctx);
     });
     if (fill !== "none") {
@@ -2510,9 +3274,8 @@ class Path2D {
     ctx.beginPath();
     ctx.save();
     setCanvasContext(ctx, style);
-    this.getControlPoints().forEach((point) => {
-      ctx.moveTo(point.x, point.y);
-      ctx.arc(point.x, point.y, 4, 0, Math.PI * 2);
+    this.getControlPointRefs().forEach((point) => {
+      drawPoint(ctx, point.x, point.y, { radius: 4 });
     });
     if (fill !== "none") {
       ctx.fill();
@@ -2524,10 +3287,10 @@ class Path2D {
     return this;
   }
   toCommands() {
-    return this.paths.flatMap((path) => path.toCommands());
+    return this.curves.flatMap((v) => v.toCommands());
   }
   toData() {
-    return this.paths.map((path) => path.toData()).join(" ");
+    return this.curves.filter((v) => v.curves.length).map((v) => v.toData()).join(" ");
   }
   toSVGPathString() {
     const style = {
@@ -2552,10 +3315,34 @@ class Path2D {
     }
     return `<path d="${this.toData()}" style="${cssText}"></path>`;
   }
+  copy(source) {
+    this.currentCurve = source.currentCurve.clone();
+    this.curves = source.curves.map((path) => path.clone());
+    this.style = { ...source.style };
+    return this;
+  }
+  clone() {
+    return new this.constructor().copy(this);
+  }
+}
+
+class Path2DSet {
+  constructor(paths = []) {
+    this.paths = paths;
+  }
+  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);
+  }
   toSVGString() {
     const { x, y, width, height } = this.getBoundingBox();
-    const path = this.toSVGPathString();
-    return `<svg viewBox="${x} ${y} ${width} ${height}" width="${width}px" height="${height}px" xmlns="http://www.w3.org/2000/svg">${path}</svg>`;
+    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>`;
   }
   toSVGUrl() {
     return `data:image/svg+xml;base64,${btoa(this.toSVGString())}`;
@@ -2575,18 +3362,38 @@ class Path2D {
     if (ctx) {
       ctx.scale(pixelRatio, pixelRatio);
       ctx.translate(-left, -top);
-      this.drawTo(ctx, style);
+      this.paths.forEach((path) => {
+        path.drawTo(ctx, style);
+      });
     }
     return canvas;
   }
-  copy(source) {
-    this.currentPath = source.currentPath.clone();
-    this.paths = source.paths.map((path) => path.clone());
-    this.style = { ...source.style };
-    return this;
-  }
-  clone() {
-    return new this.constructor().copy(this);
+}
+
+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;
   }
 }
 
@@ -3067,7 +3874,7 @@ function parseNode(node, style, paths = [], stylesheets = {}) {
   const transformStack = [];
   const transform = getNodeTransform(node, currentTransform, transformStack);
   if (path) {
-    path.matrix(currentTransform);
+    path.applyTransform(currentTransform);
     paths.push(path);
     path.style = style;
   }
@@ -3089,100 +3896,41 @@ function parseNode(node, style, paths = [], stylesheets = {}) {
   return paths;
 }
 
-const dataUri = "data:image/svg+xml;";
-const base64DataUri = `${dataUri}base64,`;
-const utf8DataUri = `${dataUri}charset=utf8,`;
-function parseSVGToDOM(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;
-  }
-}
-function parseSVG(svg) {
-  return parseNode(parseSVGToDOM(svg), {});
-}
-
-function getPathsBoundingBox(paths, withStyle = true) {
-  if (!paths.length) {
-    return void 0;
-  }
-  const min = Vector2.MAX;
-  const max = Vector2.MIN;
-  paths.forEach((path) => path.getMinMax(min, max, withStyle));
-  return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
-}
-function pathsToSVGString(paths) {
-  const { x, y, width, height } = getPathsBoundingBox(paths);
-  const content = 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 pathsToSVGUrl(paths) {
-  return `data:image/svg+xml;base64,${btoa(pathsToSVGString(paths))}`;
-}
-function pathsToSVG(paths) {
-  return new DOMParser().parseFromString(pathsToSVGString(paths), "image/svg+xml").documentElement;
-}
-function pathsToCanvas(paths, options = {}) {
-  const { pixelRatio = 2, ...style } = options;
-  const { left, top, width, height } = getPathsBoundingBox(paths);
-  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);
-    paths.forEach((path) => {
-      path.drawTo(ctx, style);
-    });
-  }
-  return canvas;
+function svgToPath2DSet(svg) {
+  return new Path2DSet(parseNode(svgToDom(svg), {}));
 }
 
+exports.ArcCurve = ArcCurve;
 exports.BoundingBox = BoundingBox;
-exports.CircleCurve = CircleCurve;
+exports.CompositeCurve = CompositeCurve;
 exports.CubicBezierCurve = CubicBezierCurve;
 exports.Curve = Curve;
 exports.CurvePath = CurvePath;
 exports.EllipseCurve = EllipseCurve;
-exports.HeartCurve = HeartCurve;
+exports.EquilateralPloygonCurve = EquilateralPloygonCurve;
 exports.LineCurve = LineCurve;
 exports.Matrix3 = Matrix3;
 exports.Path2D = Path2D;
+exports.Path2DSet = Path2DSet;
 exports.PloygonCurve = PloygonCurve;
 exports.QuadraticBezierCurve = QuadraticBezierCurve;
-exports.RectangularCurve = RectangularCurve;
+exports.RectangleCurve = RectangleCurve;
+exports.RoundRectangleCurve = RoundRectangleCurve;
 exports.SplineCurve = SplineCurve;
 exports.Vector2 = Vector2;
-exports.addPathCommandsToPath2D = addPathCommandsToPath2D;
-exports.getPathsBoundingBox = getPathsBoundingBox;
+exports.catmullRom = catmullRom;
+exports.cubicBezier = cubicBezier;
+exports.drawPoint = drawPoint;
+exports.fillTriangulate = fillTriangulate;
+exports.getAdaptiveCubicBezierCurvePoints = getAdaptiveCubicBezierCurvePoints;
+exports.getAdaptiveQuadraticBezierCurvePoints = getAdaptiveQuadraticBezierCurvePoints;
 exports.parseArcCommand = parseArcCommand;
 exports.parsePathDataArgs = parsePathDataArgs;
-exports.parseSVG = parseSVG;
-exports.parseSVGToDOM = parseSVGToDOM;
-exports.pathCommandsToPathData = pathCommandsToPathData;
-exports.pathDataToPathCommands = pathDataToPathCommands;
-exports.pathsToCanvas = pathsToCanvas;
-exports.pathsToSVG = pathsToSVG;
-exports.pathsToSVGString = pathsToSVGString;
-exports.pathsToSVGUrl = pathsToSVGUrl;
+exports.quadraticBezier = quadraticBezier;
 exports.setCanvasContext = setCanvasContext;
+exports.strokeTriangulate = strokeTriangulate;
+exports.svgPathCommandsAddToPath2D = svgPathCommandsAddToPath2D;
+exports.svgPathCommandsToData = svgPathCommandsToData;
+exports.svgPathDataToCommands = svgPathDataToCommands;
+exports.svgToDom = svgToDom;
+exports.svgToPath2DSet = svgToPath2DSet;