modern-path2d 1.5.1 → 1.5.2

package/dist/index.mjs

@@ -296,980 +296,833 @@ class BoundingBox {
   }
 }
 
-function svgAngle(ux, uy, vx, vy) {
-  const dot = ux * vx + uy * vy;
-  const len = Math.sqrt(ux * ux + uy * uy) * Math.sqrt(vx * vx + vy * vy);
-  let ang = Math.acos(Math.max(-1, Math.min(1, dot / len)));
-  if (ux * vy - uy * vx < 0)
-    ang = -ang;
-  return ang;
+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 parseArcCommand(path, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, start, end) {
-  if (rx === 0 || ry === 0) {
-    path.lineTo(end.x, end.y);
-    return;
+
+const PI = Math.PI;
+const PI_2 = PI * 2;
+function toKebabCase(str) {
+  return str.replace(/[^a-z0-9]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
+}
+function getIntersectionPoint(p1, p2, q1, q2) {
+  const r = p2.clone().sub(p1);
+  const s = q2.clone().sub(q1);
+  const q1p1 = q1.clone().sub(p1);
+  const crossRS = r.cross(s);
+  if (crossRS === 0) {
+    return new Vector2(
+      (p1.x + q1.x) / 2,
+      (p1.y + q1.y) / 2
+    );
   }
-  xAxisRotation = xAxisRotation * Math.PI / 180;
-  rx = Math.abs(rx);
-  ry = Math.abs(ry);
-  const dx2 = (start.x - end.x) / 2;
-  const dy2 = (start.y - end.y) / 2;
-  const x1p = Math.cos(xAxisRotation) * dx2 + Math.sin(xAxisRotation) * dy2;
-  const y1p = -Math.sin(xAxisRotation) * dx2 + Math.cos(xAxisRotation) * dy2;
-  let rxs = rx * rx;
-  let rys = ry * ry;
-  const x1ps = x1p * x1p;
-  const y1ps = y1p * y1p;
-  const cr = x1ps / rxs + y1ps / rys;
-  if (cr > 1) {
-    const s = Math.sqrt(cr);
-    rx = s * rx;
-    ry = s * ry;
-    rxs = rx * rx;
-    rys = ry * ry;
+  const t = q1p1.cross(s) / crossRS;
+  if (Math.abs(t) > 1) {
+    return new Vector2(
+      (p1.x + q1.x) / 2,
+      (p1.y + q1.y) / 2
+    );
   }
-  const dq = rxs * y1ps + rys * x1ps;
-  const pq = (rxs * rys - dq) / dq;
-  let q = Math.sqrt(Math.max(0, pq));
-  if (largeArcFlag === sweepFlag)
-    q = -q;
-  const cxp = q * rx * y1p / ry;
-  const cyp = -q * ry * x1p / rx;
-  const cx = Math.cos(xAxisRotation) * cxp - Math.sin(xAxisRotation) * cyp + (start.x + end.x) / 2;
-  const cy = Math.sin(xAxisRotation) * cxp + Math.cos(xAxisRotation) * cyp + (start.y + end.y) / 2;
-  const theta = svgAngle(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
-  const delta = svgAngle((x1p - cxp) / rx, (y1p - cyp) / ry, (-x1p - cxp) / rx, (-y1p - cyp) / ry) % (Math.PI * 2);
-  path.ellipse(cx, cy, rx, ry, xAxisRotation, theta, theta + delta, sweepFlag === 0);
+  return new Vector2(
+    p1.x + t * r.x,
+    p1.y + t * r.y
+  );
 }
 
-const RE$3 = {
-  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));
+const FUNCTIONS_RE = /([\w-]+)\((.+?)\)/g;
+const ARGS_RE = /[^,]+/g;
+const ARG_RE = /([-e.\d]+)(.*)/;
+function parseCssFunctions(propertyValue, context = {}) {
+  const functions = [];
+  let match;
+  while ((match = FUNCTIONS_RE.exec(propertyValue)) !== null) {
+    const [, name, value] = match;
+    if (name) {
+      functions.push({
+        name,
+        args: parseCssArgs(name, value, context)
+      });
     }
-    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);
-        }
+  return functions;
+}
+function parseCssArgs(name, value, context = {}) {
+  const values = [];
+  let match;
+  let i = 0;
+  while ((match = ARGS_RE.exec(value)) !== null) {
+    values.push(
+      parseCssArg(name, match[0], {
+        ...context,
+        index: i++
+      })
+    );
+  }
+  return values;
+}
+function parseCssArg(name, value, context = {}) {
+  const { width = 1, height = 1, index = 0 } = context;
+  const matched = value.match(ARG_RE);
+  const result = {
+    unit: matched?.[2] ?? null,
+    value,
+    intValue: Number(matched?.[1]),
+    normalizedIntValue: 0,
+    normalizedDefaultIntValue: 0
+  };
+  switch (name) {
+    case "scale":
+    case "scaleX":
+    case "scaleY":
+    case "scale3d":
+      result.normalizedDefaultIntValue = 1;
+      break;
+  }
+  switch (result.unit) {
+    case "%":
+      result.normalizedIntValue = result.intValue / 100;
+      break;
+    case "rad":
+      result.normalizedIntValue = result.intValue / PI_2;
+      break;
+    case "deg":
+      result.normalizedIntValue = result.intValue / 360;
+      break;
+    case "px":
+      switch (index) {
+        case 0:
+          result.normalizedIntValue = result.intValue / width;
+          break;
+        case 1:
+          result.normalizedIntValue = result.intValue / height;
+          break;
       }
-    }
-    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);
-    }
+      break;
+    case "turn":
+    case "em":
+    // div fontSize
+    case "rem":
+    // div fontSize
+    default:
+      result.normalizedIntValue = result.intValue;
+      break;
   }
-  newNumber();
   return result;
 }
 
-function getReflection(a, b) {
-  return a - (b - a);
+function cubicBezierP0(t, p) {
+  const k = 1 - t;
+  return k * k * k * p;
 }
-function svgPathCommandsAddToPath2D(commands, path) {
-  const current = new Vector2();
-  const control = new Vector2();
-  for (let i = 0, l = commands.length; i < l; i++) {
-    const cmd = commands[i];
-    if (cmd.type === "m" || cmd.type === "M") {
-      if (cmd.type === "m") {
-        current.add(cmd);
-      } else {
-        current.copyFrom(cmd);
-      }
-      path.moveTo(current.x, current.y);
-      control.copyFrom(current);
-    } else if (cmd.type === "h" || cmd.type === "H") {
-      if (cmd.type === "h") {
-        current.x += cmd.x;
-      } else {
-        current.x = cmd.x;
-      }
-      path.lineTo(current.x, current.y);
-      control.copyFrom(current);
-    } else if (cmd.type === "v" || cmd.type === "V") {
-      if (cmd.type === "v") {
-        current.y += cmd.y;
-      } else {
-        current.y = cmd.y;
-      }
-      path.lineTo(current.x, current.y);
-      control.copyFrom(current);
-    } else if (cmd.type === "l" || cmd.type === "L") {
-      if (cmd.type === "l") {
-        current.add(cmd);
-      } else {
-        current.copyFrom(cmd);
-      }
-      path.lineTo(current.x, current.y);
-      control.copyFrom(current);
-    } else if (cmd.type === "c" || cmd.type === "C") {
-      if (cmd.type === "c") {
-        path.bezierCurveTo(
-          current.x + cmd.x1,
-          current.y + cmd.y1,
-          current.x + cmd.x2,
-          current.y + cmd.y2,
-          current.x + cmd.x,
-          current.y + cmd.y
-        );
-        control.x = current.x + cmd.x2;
-        control.y = current.y + cmd.y2;
-        current.add(cmd);
-      } else {
-        path.bezierCurveTo(
-          cmd.x1,
-          cmd.y1,
-          cmd.x2,
-          cmd.y2,
-          cmd.x,
-          cmd.y
-        );
-        control.x = cmd.x2;
-        control.y = cmd.y2;
-        current.copyFrom(cmd);
-      }
-    } else if (cmd.type === "s" || cmd.type === "S") {
-      if (cmd.type === "s") {
-        path.bezierCurveTo(
-          getReflection(current.x, control.x),
-          getReflection(current.y, control.y),
-          current.x + cmd.x2,
-          current.y + cmd.y2,
-          current.x + cmd.x,
-          current.y + cmd.y
-        );
-        control.x = current.x + cmd.x2;
-        control.y = current.y + cmd.y2;
-        current.add(cmd);
-      } else {
-        path.bezierCurveTo(
-          getReflection(current.x, control.x),
-          getReflection(current.y, control.y),
-          cmd.x2,
-          cmd.y2,
-          cmd.x,
-          cmd.y
-        );
-        control.x = cmd.x2;
-        control.y = cmd.y2;
-        current.copyFrom(cmd);
-      }
-    } else if (cmd.type === "q" || cmd.type === "Q") {
-      if (cmd.type === "q") {
-        path.quadraticCurveTo(
-          current.x + cmd.x1,
-          current.y + cmd.y1,
-          current.x + cmd.x,
-          current.y + cmd.y
-        );
-        control.x = current.x + cmd.x1;
-        control.y = current.y + cmd.y1;
-        current.add(cmd);
-      } else {
-        path.quadraticCurveTo(
-          cmd.x1,
-          cmd.y1,
-          cmd.x,
-          cmd.y
-        );
-        control.x = cmd.x1;
-        control.y = cmd.y1;
-        current.copyFrom(cmd);
-      }
-    } else if (cmd.type === "t" || cmd.type === "T") {
-      const rx = getReflection(current.x, control.x);
-      const ry = getReflection(current.y, control.y);
-      control.x = rx;
-      control.y = ry;
-      if (cmd.type === "t") {
-        path.quadraticCurveTo(
-          rx,
-          ry,
-          current.x + cmd.x,
-          current.y + cmd.y
-        );
-        current.add(cmd);
-      } else {
-        path.quadraticCurveTo(
-          rx,
-          ry,
-          cmd.x,
-          cmd.y
-        );
-        current.copyFrom(cmd);
+function cubicBezierP1(t, p) {
+  const k = 1 - t;
+  return 3 * k * k * t * p;
+}
+function cubicBezierP2(t, p) {
+  return 3 * (1 - t) * t * t * p;
+}
+function cubicBezierP3(t, p) {
+  return t * t * t * p;
+}
+function cubicBezier(t, p0, p1, p2, p3) {
+  return cubicBezierP0(t, p0) + cubicBezierP1(t, p1) + cubicBezierP2(t, p2) + cubicBezierP3(t, p3);
+}
+
+function fillTriangulate(pointArray, options = {}) {
+  let {
+    vertices = [],
+    indices = [],
+    holes = [],
+    verticesStride = 2,
+    verticesOffset = vertices.length / verticesStride,
+    indicesOffset = indices.length
+  } = options;
+  const triangles = earcut(pointArray, holes, 2);
+  if (triangles.length) {
+    for (let i = 0; i < triangles.length; i += 3) {
+      indices[indicesOffset++] = triangles[i] + verticesOffset;
+      indices[indicesOffset++] = triangles[i + 1] + verticesOffset;
+      indices[indicesOffset++] = triangles[i + 2] + verticesOffset;
+    }
+    let index = verticesOffset * verticesStride;
+    for (let i = 0; i < pointArray.length; i += 2) {
+      vertices[index] = pointArray[i];
+      vertices[index + 1] = pointArray[i + 1];
+      index += verticesStride;
+    }
+  }
+  return {
+    vertices,
+    indices
+  };
+}
+
+const RECURSION_LIMIT$1 = 8;
+const FLT_EPSILON$1 = 11920929e-14;
+const PATH_DISTANCE_EPSILON$1 = 1;
+function getAdaptiveCubicBezierCurvePoints(sX, sY, x1, y1, x2, y2, x, y, smoothness = 0.5, points = []) {
+  const scale = 1;
+  const smoothing = Math.min(
+    0.99,
+    // a value of 1.0 actually inverts smoothing, so we cap it at 0.99
+    Math.max(0, smoothness)
+  );
+  let distanceTolerance = (PATH_DISTANCE_EPSILON$1 - smoothing) / scale;
+  distanceTolerance *= distanceTolerance;
+  recursive$1(sX, sY, x1, y1, x2, y2, x, y, points, distanceTolerance, 0);
+  points.push(x, y);
+  return points;
+}
+function recursive$1(x1, y1, x2, y2, x3, y3, x4, y4, points, distanceTolerance, level) {
+  if (level > RECURSION_LIMIT$1)
+    return;
+  const x12 = (x1 + x2) / 2;
+  const y12 = (y1 + y2) / 2;
+  const x23 = (x2 + x3) / 2;
+  const y23 = (y2 + y3) / 2;
+  const x34 = (x3 + x4) / 2;
+  const y34 = (y3 + y4) / 2;
+  const x123 = (x12 + x23) / 2;
+  const y123 = (y12 + y23) / 2;
+  const x234 = (x23 + x34) / 2;
+  const y234 = (y23 + y34) / 2;
+  const x1234 = (x123 + x234) / 2;
+  const y1234 = (y123 + y234) / 2;
+  if (level > 0) {
+    let dx = x4 - x1;
+    let dy = y4 - y1;
+    const d2 = Math.abs((x2 - x4) * dy - (y2 - y4) * dx);
+    const d3 = Math.abs((x3 - x4) * dy - (y3 - y4) * dx);
+    if (d2 > FLT_EPSILON$1 && d3 > FLT_EPSILON$1) {
+      if ((d2 + d3) * (d2 + d3) <= distanceTolerance * (dx * dx + dy * dy)) {
+        {
+          points.push(x1234, y1234);
+          return;
+        }
       }
-    } else if (cmd.type === "a" || cmd.type === "A") {
-      const start = current.clone();
-      if (cmd.type === "a") {
-        if (cmd.x === 0 && cmd.y === 0)
-          continue;
-        current.add(cmd);
-      } else {
-        if (current.equals(cmd))
-          continue;
-        current.copyFrom(cmd);
+    } else if (d2 > FLT_EPSILON$1) {
+      if (d2 * d2 <= distanceTolerance * (dx * dx + dy * dy)) {
+        {
+          points.push(x1234, y1234);
+          return;
+        }
       }
-      control.copyFrom(current);
-      parseArcCommand(
-        path,
-        cmd.rx,
-        cmd.ry,
-        cmd.angle,
-        cmd.largeArcFlag,
-        cmd.sweepFlag,
-        start,
-        current
-      );
-    } else if (cmd.type === "z" || cmd.type === "Z") {
-      if (path.startPoint) {
-        current.copyFrom(path.startPoint);
+    } else if (d3 > FLT_EPSILON$1) {
+      if (d3 * d3 <= distanceTolerance * (dx * dx + dy * dy)) {
+        {
+          points.push(x1234, y1234);
+          return;
+        }
       }
-      path.closePath();
     } else {
-      console.warn("Unsupported commands", cmd);
+      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);
 }
 
-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}`);
-        prev = { x: cmd.x, y: cmd.y };
-        first = { x: cmd.x, y: cmd.y };
-        break;
-      case "h":
-      case "H":
-        data.push(`${cmd.type} ${cmd.x}`);
-        prev = { x: cmd.x, y: prev?.y ?? 0 };
-        break;
-      case "v":
-      case "V":
-        data.push(`${cmd.type} ${cmd.y}`);
-        prev = { x: prev?.x ?? 0, y: cmd.y };
-        break;
-      case "l":
-      case "L":
-        data.push(`${cmd.type} ${cmd.x} ${cmd.y}`);
-        prev = { x: cmd.x, y: cmd.y };
-        break;
-      case "c":
-      case "C":
-        data.push(`${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`);
-        prev = { x: cmd.x, y: cmd.y };
-        break;
-      case "s":
-      case "S":
-        data.push(`${cmd.type} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`);
-        prev = { x: cmd.x, y: cmd.y };
-        break;
-      case "q":
-      case "Q":
-        data.push(`${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x} ${cmd.y}`);
-        prev = { x: cmd.x, y: cmd.y };
-        break;
-      case "t":
-      case "T":
-        data.push(`${cmd.type} ${cmd.x} ${cmd.y}`);
-        prev = { x: cmd.x, y: cmd.y };
-        break;
-      case "a":
-      case "A":
-        data.push(`${cmd.type} ${cmd.rx} ${cmd.ry} ${cmd.angle} ${cmd.largeArcFlag} ${cmd.sweepFlag} ${cmd.x} ${cmd.y}`);
-        prev = { x: cmd.x, y: cmd.y };
-        break;
-      case "z":
-      case "Z":
-        data.push(cmd.type);
-        if (first) {
-          prev = { x: first.x, y: first.y };
-        }
-        break;
+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;
     }
   }
-  return data.join(" ");
+  recursive(points, x1, y1, x12, y12, x123, y123, distanceTolerance, level + 1);
+  recursive(points, x123, y123, x23, y23, x3, y3, distanceTolerance, level + 1);
 }
 
-const RE$2 = /[a-df-z][^a-df-z]*/gi;
-function svgPathDataToCommands(data) {
-  const commands = [];
-  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 data2 = command.slice(1).trim();
-    let args;
-    switch (type) {
-      case "m":
-      case "M":
-        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] });
-          } else {
-            commands.push({ type: type === "m" ? "l" : "L", x: args[i2], y: args[i2 + 1] });
-          }
-        }
-        break;
-      case "h":
-      case "H":
-        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(data2);
-        for (let i2 = 0, len2 = args.length; i2 < len2; i2++) {
-          commands.push({ type, y: args[i2] });
-        }
-        break;
-      case "l":
-      case "L":
-        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(data2);
-        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 6) {
-          commands.push({
-            type,
-            x1: args[i2],
-            y1: args[i2 + 1],
-            x2: args[i2 + 2],
-            y2: args[i2 + 3],
-            x: args[i2 + 4],
-            y: args[i2 + 5]
-          });
-        }
-        break;
-      case "s":
-      case "S":
-        args = parsePathDataArgs(data2);
-        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 4) {
-          commands.push({
-            type,
-            x2: args[i2],
-            y2: args[i2 + 1],
-            x: args[i2 + 2],
-            y: args[i2 + 3]
-          });
-        }
-        break;
-      case "q":
-      case "Q":
-        args = parsePathDataArgs(data2);
-        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 4) {
-          commands.push({
-            type,
-            x1: args[i2],
-            y1: args[i2 + 1],
-            x: args[i2 + 2],
-            y: args[i2 + 3]
-          });
-        }
-        break;
-      case "t":
-      case "T":
-        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 "a":
-      case "A":
-        args = parsePathDataArgs(data2, [3, 4], 7);
-        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 7) {
-          commands.push({
-            type,
-            rx: args[i2],
-            ry: args[i2 + 1],
-            angle: args[i2 + 2],
-            largeArcFlag: args[i2 + 3],
-            sweepFlag: args[i2 + 4],
-            x: args[i2 + 5],
-            y: args[i2 + 6]
-          });
-        }
-        break;
-      case "z":
-      case "Z":
-        commands.push({
-          type
-        });
-        break;
-      default:
-        console.warn(command);
-    }
+function getDirectedArea(vertices) {
+  let area = 0;
+  const n = vertices.length;
+  for (let i = 0; i < n; i += 2) {
+    const x0 = vertices[i];
+    const y0 = vertices[i + 1];
+    const x1 = vertices[(i + 2) % (n - 1)];
+    const y1 = vertices[(i + 3) % n];
+    area += x0 * y1 - x1 * y0;
   }
-  return commands;
+  return area / 2;
 }
 
-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);
+function cross(ax, ay, bx, by, cx, cy) {
+  return (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);
+}
+function windingNumber(px, py, polygon) {
+  const polygonLen = polygon.length;
+  let wn = 0;
+  for (let i = 0, j = polygonLen - 2; i < polygonLen; j = i, i += 2) {
+    const xi = polygon[i];
+    const yi = polygon[i + 1];
+    const xj = polygon[j];
+    const yj = polygon[j + 1];
+    if (yi <= py) {
+      if (yj > py && cross(xj, yj, xi, yi, px, py) > 0)
+        wn++;
     } 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}`);
+      if (yj <= py && cross(xj, yj, xi, yi, px, py) < 0)
+        wn--;
     }
-    return doc.documentElement;
-  } else {
-    return svg;
   }
+  return wn;
 }
-
-const defaultUnit = "px";
-const defaultDPI = 90;
-const units = ["mm", "cm", "in", "pt", "pc", "px"];
-const unitConversion = {
-  mm: {
-    mm: 1,
-    cm: 0.1,
-    in: 1 / 25.4,
-    pt: 72 / 25.4,
-    pc: 6 / 25.4,
-    px: -1
-  },
-  cm: {
-    mm: 10,
-    cm: 1,
-    in: 1 / 2.54,
-    pt: 72 / 2.54,
-    pc: 6 / 2.54,
-    px: -1
-  },
-  in: {
-    mm: 25.4,
-    cm: 2.54,
-    in: 1,
-    pt: 72,
-    pc: 6,
-    px: -1
-  },
-  pt: {
-    mm: 25.4 / 72,
-    cm: 2.54 / 72,
-    in: 1 / 72,
-    pt: 1,
-    pc: 6 / 72,
-    px: -1
-  },
-  pc: {
-    mm: 25.4 / 6,
-    cm: 2.54 / 6,
-    in: 1 / 6,
-    pt: 72 / 6,
-    pc: 1,
-    px: -1
-  },
-  px: {
-    px: 1
-  }
-};
-function parseFloatWithUnits(string) {
-  let theUnit = "px";
-  if (typeof string === "string") {
-    for (let i = 0, n = units.length; i < n; i++) {
-      const u = units[i];
-      if (string.endsWith(u)) {
-        theUnit = u;
-        string = string.substring(0, string.length - u.length);
-        break;
+function distance(p1, p2) {
+  const dx = p2[0] - p1[0];
+  const dy = p2[1] - p1[1];
+  return Math.sqrt(dx * dx + dy * dy);
+}
+function nonzeroFillRule(paths) {
+  const results = paths.map((_, i) => ({ index: i }));
+  const testPointsGroups = paths.map((path) => {
+    const len = path.length;
+    if (!len) {
+      return [];
+    }
+    let xMinYAuto = [Number.MAX_SAFE_INTEGER, 0];
+    let xAutoYMin = [0, Number.MAX_SAFE_INTEGER];
+    let xMaxYAuto = [Number.MIN_SAFE_INTEGER, 0];
+    let xAutoYMax = [0, Number.MIN_SAFE_INTEGER];
+    for (let i = 0; i < len; i += 2) {
+      const x = path[i];
+      const y = path[i + 1];
+      if (xMinYAuto[0] > x) {
+        xMinYAuto = [x, y];
+      }
+      if (xAutoYMin[1] > y) {
+        xAutoYMin = [x, y];
+      }
+      if (xMaxYAuto[0] < x) {
+        xMaxYAuto = [x, y];
+      }
+      if (xAutoYMax[1] < y) {
+        xAutoYMax = [x, y];
       }
     }
-  }
-  let scale;
-  {
-    scale = unitConversion[theUnit][defaultUnit];
-    if (scale < 0) {
-      scale = unitConversion[theUnit].in * defaultDPI;
+    const mid = [
+      (xMinYAuto[0] + xMaxYAuto[0]) / 2,
+      (xAutoYMin[1] + xAutoYMax[1]) / 2
+    ];
+    let xMidYMinDx;
+    let xMidYMaxDx;
+    let xMidYMin;
+    let xMidYMax;
+    let xMinYMidDy;
+    let xMaxYMidDy;
+    let xMinYMid;
+    let xMaxYMid;
+    for (let i = 0; i < len; i += 2) {
+      const x = path[i];
+      const y = path[i + 1];
+      const _dx = Math.abs(x - mid[0]);
+      const _dy = Math.abs(y - mid[1]);
+      if (y < mid[1] && (!xMidYMinDx || _dx < xMidYMinDx)) {
+        xMidYMinDx = _dx;
+        xMidYMin = [x, y];
+      }
+      if (y > mid[1] && (!xMidYMaxDx || _dx < xMidYMaxDx)) {
+        xMidYMaxDx = _dx;
+        xMidYMax = [x, y];
+      }
+      if (x < mid[0] && (!xMinYMidDy || _dy < xMinYMidDy)) {
+        xMinYMidDy = _dy;
+        xMinYMid = [x, y];
+      }
+      if (x > mid[0] && (!xMaxYMidDy || _dy < xMaxYMidDy)) {
+        xMaxYMidDy = _dy;
+        xMaxYMid = [x, y];
+      }
     }
-  }
-  return scale * Number.parseFloat(string);
-}
-
-function getNodeTransform(node, currentTransform, transformStack) {
-  if (!(node.hasAttribute("transform") || node.nodeName === "use" && (node.hasAttribute("x") || node.hasAttribute("y")))) {
-    return null;
-  }
-  const transform = parseNodeTransform(node);
-  if (transformStack.length > 0) {
-    transform.prepend(transformStack[transformStack.length - 1]);
-  }
-  currentTransform.copyFrom(transform);
-  transformStack.push(transform);
-  return transform;
-}
-function parseNodeTransform(node) {
-  const transform = new Transform2D();
-  if (node.nodeName === "use" && (node.hasAttribute("x") || node.hasAttribute("y"))) {
-    transform.translate(
-      parseFloatWithUnits(node.getAttribute("x")),
-      parseFloatWithUnits(node.getAttribute("y"))
-    );
-  }
-  if (node.hasAttribute("transform")) {
-    transform.appendCssTransform(node.getAttribute("transform"));
-  }
-  return transform;
-}
-
-function parseCircleNode(node) {
-  return new Path2D().arc(
-    parseFloatWithUnits(node.getAttribute("cx") || 0),
-    parseFloatWithUnits(node.getAttribute("cy") || 0),
-    parseFloatWithUnits(node.getAttribute("r") || 0),
-    0,
-    Math.PI * 2
-  );
-}
-
-function parseCSSStylesheet(node, stylesheets) {
-  if (!node.sheet || !node.sheet.cssRules || !node.sheet.cssRules.length)
-    return;
-  for (let i = 0; i < node.sheet.cssRules.length; i++) {
-    const stylesheet = node.sheet.cssRules[i];
-    if (stylesheet.type !== 1)
-      continue;
-    const selectorList = stylesheet.selectorText.split(/,/g).filter(Boolean).map((i2) => i2.trim());
-    const definitions = {};
-    for (let len = stylesheet.style.length, i2 = 0; i2 < len; i2++) {
-      const name = stylesheet.style.item(i2);
-      definitions[name] = stylesheet.style.getPropertyValue(name);
+    return [
+      xMinYAuto,
+      xAutoYMin,
+      xMaxYAuto,
+      xAutoYMax,
+      xMidYMin,
+      xMidYMax,
+      xMinYMid,
+      xMaxYMid
+    ].filter(Boolean);
+  });
+  for (let i = 0, len = paths.length; i < len; i++) {
+    const _results = [];
+    const testPoints = testPointsGroups[i];
+    for (let j = 0; j < len; j++) {
+      if (i === j)
+        continue;
+      const wnMap = {};
+      const wnList = [];
+      for (let p = 0, pLen = testPoints.length; p < pLen; p++) {
+        const [x, y] = testPoints[p];
+        const winding = windingNumber(x, y, paths[j]);
+        wnMap[winding] = (wnMap[winding] ?? 0) + 1;
+        wnList.push(winding);
+      }
+      if (wnList.filter((v) => v !== 0).length > wnList.filter((v) => v === 0).length) {
+        _results.push({
+          index: i,
+          parentIndex: j,
+          winding: Number(
+            Array.from(Object.entries(wnMap)).sort((a, b) => b[1] - a[1])?.[0]?.[0] ?? 0
+          ),
+          dist: distance(testPointsGroups[i][0], testPointsGroups[j][0])
+        });
+      }
     }
-    for (let j = 0; j < selectorList.length; j++) {
-      stylesheets[selectorList[j]] = Object.assign(
-        stylesheets[selectorList[j]] || {},
-        { ...definitions }
-      );
+    if (_results.reduce((total, item) => total + item.winding, 0) !== 0) {
+      _results.sort((a, b) => a.dist - b.dist);
+      results[i] = _results[0];
     }
   }
+  return results;
 }
 
-function parseEllipseNode(node) {
-  return new Path2D().ellipse(
-    parseFloatWithUnits(node.getAttribute("cx") || 0),
-    parseFloatWithUnits(node.getAttribute("cy") || 0),
-    parseFloatWithUnits(node.getAttribute("rx") || 0),
-    parseFloatWithUnits(node.getAttribute("ry") || 0),
-    0,
-    0,
-    Math.PI * 2
-  );
+function quadraticBezierP0(t, p) {
+  const k = 1 - t;
+  return k * k * p;
 }
-
-function parseLineNode(node) {
-  return new Path2D().moveTo(
-    parseFloatWithUnits(node.getAttribute("x1") || 0),
-    parseFloatWithUnits(node.getAttribute("y1") || 0)
-  ).lineTo(
-    parseFloatWithUnits(node.getAttribute("x2") || 0),
-    parseFloatWithUnits(node.getAttribute("y2") || 0)
-  );
+function quadraticBezierP1(t, p) {
+  return 2 * (1 - t) * t * p;
 }
-
-function parsePathNode(node) {
-  const path = new Path2D();
-  const d = node.getAttribute("d");
-  if (!d || d === "none")
-    return null;
-  path.addData(d);
-  return path;
+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 RE$1 = /([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;
-function parsePolygonNode(node) {
-  const path = new Path2D();
-  let index = 0;
-  node.getAttribute("points")?.replace(RE$1, (match, a, b) => {
-    const x = parseFloatWithUnits(a);
-    const y = parseFloatWithUnits(b);
-    if (index === 0) {
-      path.moveTo(x, y);
-    } else {
-      path.lineTo(x, y);
-    }
-    index++;
-    return match;
-  });
-  path.currentCurve.autoClose = true;
-  return path;
-}
-
-const RE = /([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;
-function parsePolylineNode(node) {
-  const path = new Path2D();
-  let index = 0;
-  node.getAttribute("points")?.replace(RE, (match, a, b) => {
-    const x = parseFloatWithUnits(a);
-    const y = parseFloatWithUnits(b);
-    if (index === 0) {
-      path.moveTo(x, y);
-    } else {
-      path.lineTo(x, y);
-    }
-    index++;
-    return match;
-  });
-  path.currentCurve.autoClose = false;
-  return path;
-}
-
-function parseRectNode(node) {
-  const x = parseFloatWithUnits(node.getAttribute("x") || 0);
-  const y = parseFloatWithUnits(node.getAttribute("y") || 0);
-  const rx = parseFloatWithUnits(node.getAttribute("rx") || node.getAttribute("ry") || 0);
-  const ry = parseFloatWithUnits(node.getAttribute("ry") || node.getAttribute("rx") || 0);
-  const w = parseFloatWithUnits(node.getAttribute("width"));
-  const h = parseFloatWithUnits(node.getAttribute("height"));
-  const bci = 1 - 0.551915024494;
-  const path = new Path2D();
-  path.moveTo(x + rx, y);
-  path.lineTo(x + w - rx, y);
-  if (rx !== 0 || ry !== 0) {
-    path.bezierCurveTo(
-      x + w - rx * bci,
-      y,
-      x + w,
-      y + ry * bci,
-      x + w,
-      y + ry
-    );
-  }
-  path.lineTo(x + w, y + h - ry);
-  if (rx !== 0 || ry !== 0) {
-    path.bezierCurveTo(
-      x + w,
-      y + h - ry * bci,
-      x + w - rx * bci,
-      y + h,
-      x + w - rx,
-      y + h
-    );
-  }
-  path.lineTo(x + rx, y + h);
-  if (rx !== 0 || ry !== 0) {
-    path.bezierCurveTo(
-      x + rx * bci,
-      y + h,
-      x,
-      y + h - ry * bci,
-      x,
-      y + h - ry
-    );
+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 };
   }
-  path.lineTo(x, y + ry);
-  if (rx !== 0 || ry !== 0) {
-    path.bezierCurveTo(x, y + ry * bci, x + rx * bci, y, x + rx, y);
+  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;
   }
-  return path;
-}
-
-function parseStyle(node, style, stylesheets) {
-  style = Object.assign({}, style);
-  let stylesheetStyles = {};
-  if (node.hasAttribute("class")) {
-    const classSelectors = node.getAttribute("class").split(/\s/).filter(Boolean).map((i) => i.trim());
-    for (let i = 0; i < classSelectors.length; i++) {
-      stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`.${classSelectors[i]}`]);
+  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);
   }
-  if (node.hasAttribute("id")) {
-    stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`#${node.getAttribute("id")}`]);
-  }
-  for (let len = node.style.length, i = 0; i < len; i++) {
-    const name = node.style.item(i);
-    const value = node.style.getPropertyValue(name);
-    style[name] = value;
-    stylesheetStyles[name] = value;
-  }
-  function addStyle(svgName, jsName, adjustFunction = copy) {
-    if (node.hasAttribute(svgName))
-      style[jsName] = adjustFunction(node.getAttribute(svgName));
-    if (stylesheetStyles[svgName])
-      style[jsName] = adjustFunction(stylesheetStyles[svgName]);
-  }
-  function copy(v) {
-    if (v.startsWith("url"))
-      console.warn("url access in attributes is not implemented.");
-    return v;
-  }
-  function clamp(v) {
-    return Math.max(0, Math.min(1, parseFloatWithUnits(v)));
-  }
-  function positive(v) {
-    return Math.max(0, parseFloatWithUnits(v));
-  }
-  function array(v) {
-    return v.split(" ").filter((v2) => v2 !== "").map((v2) => parseFloatWithUnits(v2));
+  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);
+    }
   }
-  addStyle("fill", "fill");
-  addStyle("fill-opacity", "fillOpacity", clamp);
-  addStyle("fill-rule", "fillRule");
-  addStyle("opacity", "opacity", clamp);
-  addStyle("stroke", "stroke");
-  addStyle("stroke-opacity", "strokeOpacity", clamp);
-  addStyle("stroke-width", "strokeWidth", positive);
-  addStyle("stroke-linecap", "strokeLinecap");
-  addStyle("stroke-linejoin", "strokeLinejoin");
-  addStyle("stroke-miterlimit", "strokeMiterlimit", positive);
-  addStyle("stroke-dasharray", "strokeDasharray", array);
-  addStyle("stroke-dashoffset", "strokeDashoffset", parseFloatWithUnits);
-  addStyle("visibility", "visibility");
-  return style;
-}
-
-function parseNode(node, style, paths = [], stylesheets = {}) {
-  if (node.nodeType !== 1)
-    return paths;
-  let isDefsNode = false;
-  let path = null;
-  let _style = { ...style };
-  switch (node.nodeName) {
-    case "svg":
-      _style = parseStyle(node, _style, stylesheets);
-      break;
-    case "style":
-      parseCSSStylesheet(node, stylesheets);
-      break;
-    case "g":
-      _style = parseStyle(node, _style, stylesheets);
-      break;
-    case "path":
-      _style = parseStyle(node, _style, stylesheets);
-      if (node.hasAttribute("d"))
-        path = parsePathNode(node);
-      break;
-    case "rect":
-      _style = parseStyle(node, _style, stylesheets);
-      path = parseRectNode(node);
-      break;
-    case "polygon":
-      _style = parseStyle(node, _style, stylesheets);
-      path = parsePolygonNode(node);
-      break;
-    case "polyline":
-      _style = parseStyle(node, _style, stylesheets);
-      path = parsePolylineNode(node);
-      break;
-    case "circle":
-      _style = parseStyle(node, _style, stylesheets);
-      path = parseCircleNode(node);
-      break;
-    case "ellipse":
-      _style = parseStyle(node, _style, stylesheets);
-      path = parseEllipseNode(node);
-      break;
-    case "line":
-      _style = parseStyle(node, _style, stylesheets);
-      path = parseLineNode(node);
-      break;
-    case "defs":
-      isDefsNode = true;
-      break;
-    case "use": {
-      _style = parseStyle(node, _style, stylesheets);
-      const href = node.getAttributeNS("http://www.w3.org/1999/xlink", "href") || node.getAttribute("href") || "";
-      const usedNodeId = href.substring(1);
-      const usedNode = node.viewportElement?.getElementById(usedNodeId);
-      if (usedNode) {
-        parseNode(usedNode, _style, paths, stylesheets);
+  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 {
-        console.warn(`'use node' references non-existent node id: ${usedNodeId}`);
+        verts.push(imx, imy);
+        verts.push(omx, omy);
       }
-      break;
+    } 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;
     }
-    default:
-      console.warn(node);
-      break;
-  }
-  if (_style.display === "none") {
-    return paths;
   }
-  const currentTransform = new Transform2D();
-  const transformStack = [];
-  const transform = getNodeTransform(node, currentTransform, transformStack);
-  if (path) {
-    path.applyTransform(currentTransform);
-    paths.push(path);
-    path.style = { ..._style };
+  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 childNodes = node.childNodes;
-  for (let i = 0, len = childNodes.length; i < len; i++) {
-    const node2 = childNodes[i];
-    if (isDefsNode && node2.nodeName !== "style" && node2.nodeName !== "defs")
+  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;
-    parseNode(node2, _style, paths, stylesheets);
-  }
-  if (transform) {
-    transformStack.pop();
-    if (transformStack.length > 0) {
-      currentTransform.copyFrom(transformStack[transformStack.length - 1]);
-    } else {
-      currentTransform.identity();
     }
+    indices.push(i, i + 1, i + 2);
   }
-  return paths;
-}
-
-function svgToPath2DSet(svg) {
-  const dom = svgToDom(svg);
-  return new Path2DSet(
-    parseNode(dom, {}),
-    dom.getAttribute("viewBox")?.trim().split(" ").map((v) => Number(v))
-  );
+  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;
 }
-
-const PI = Math.PI;
-const PI_2 = PI * 2;
 
 class Transform2D {
   constructor(a = 1, b = 0, c = 0, d = 1, tx = 0, ty = 0) {
@@ -1552,115 +1405,78 @@ class Transform2D {
   equals(t2d) {
     return t2d.a === this.a && t2d.b === this.b && t2d.c === this.c && t2d.d === this.d && t2d.tx === this.tx && t2d.ty === this.ty;
   }
-  appendCssTransform(cssTransform) {
-    const transformsTexts = cssTransform.split(")");
-    const transform = new Transform2D();
-    for (let tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex--) {
-      const transformText = transformsTexts[tIndex].trim();
-      if (transformText === "")
-        continue;
-      const openParPos = transformText.indexOf("(");
-      const closeParPos = transformText.length;
-      if (openParPos > 0 && openParPos < closeParPos) {
-        const transformType = transformText.slice(0, openParPos);
-        const array = parsePathDataArgs(transformText.slice(openParPos + 1));
-        transform.identity();
-        switch (transformType) {
-          case "translateX":
-            transform.translateX(array[0]);
-            break;
-          case "translateY":
-            transform.translateY(array[0]);
-            break;
-          case "translateZ":
-            transform.translateZ(array[0]);
-            break;
-          case "translate":
-            transform.translate(
-              array[0],
-              array[1] ?? array[0]
-            );
-            break;
-          case "translate3d":
-            transform.translate3d(
-              array[0],
-              array[1] ?? array[0],
-              array[2] ?? array[1] ?? array[0]
-            );
-            break;
-          case "scaleX":
-            transform.scaleX(array[0]);
-            break;
-          case "scaleY":
-            transform.scaleY(array[0]);
-            break;
-          case "scale":
-            transform.scale(
-              array[0],
-              array[1] ?? array[0]
-            );
-            break;
-          case "scale3d":
-            transform.scale3d(
-              array[0],
-              array[1] ?? array[0],
-              array[2] ?? array[1] ?? array[0]
-            );
-            break;
-          case "rotate": {
-            const rad = array[0] * Math.PI / 180;
-            if (array.length >= 3) {
-              const cx = array[1];
-              const cy = array[2];
-              transform.translate(-cx, -cy).rotate(rad).translate(cx, cy);
-            } else {
-              transform.rotate(rad);
-            }
-            break;
-          }
-          case "rotateX":
-            transform.rotateX(array[0] * Math.PI / 180);
-            break;
-          case "rotateY":
-            transform.rotateY(array[0] * Math.PI / 180);
-            break;
-          case "rotateZ":
-            transform.rotateZ(array[0] * Math.PI / 180);
-            break;
-          case "rotate3d":
-            transform.rotate3d(
-              array[0] * Math.PI / 180,
-              (array[1] ?? array[0]) * Math.PI / 180,
-              (array[2] ?? array[1] ?? array[0]) * Math.PI / 180,
-              (array[3] ?? array[2] ?? array[1] ?? array[0]) * Math.PI / 180
-            );
-            break;
-          case "skewX":
-            transform.set(1, 0, Math.tan(array[0] * Math.PI / 180), 1, 0, 0);
-            break;
-          case "skewY":
-            transform.set(1, Math.tan(array[0] * Math.PI / 180), 0, 1, 0, 0);
-            break;
-          case "skew": {
-            const ax = array[0];
-            const ay = array[1] ?? 0;
-            transform.set(1, Math.tan(ay * Math.PI / 180), Math.tan(ax * Math.PI / 180), 1, 0, 0);
-            break;
-          }
-          case "matrix":
-            transform.set(
-              array[0],
-              array[1],
-              array[2],
-              array[3],
-              array[4],
-              array[5]
-            );
-            break;
-        }
+  appendCssTransform(cssTransform, ctx = {}) {
+    const { width = 1, height = 1 } = ctx;
+    const output = new Transform2D();
+    parseCssFunctions(cssTransform, { width, height }).reverse().forEach(({ name, args }) => {
+      const values = args.map((arg) => arg.normalizedIntValue);
+      switch (name) {
+        case "translate":
+          output.translate(values[0] * width, (values[1] ?? values[0]) * height);
+          break;
+        case "translateX":
+          output.translateX(values[0] * width);
+          break;
+        case "translateY":
+          output.translateY(values[0] * height);
+          break;
+        case "translateZ":
+          output.translateZ(values[0]);
+          break;
+        case "translate3d":
+          output.translate3d(
+            values[0] * width,
+            (values[1] ?? values[0]) * height,
+            values[2] ?? values[1] ?? values[0]
+          );
+          break;
+        case "scale":
+          output.scale(values[0], values[1] ?? values[0]);
+          break;
+        case "scaleX":
+          output.scaleX(values[0]);
+          break;
+        case "scaleY":
+          output.scaleY(values[0]);
+          break;
+        case "scale3d":
+          output.scale3d(values[0], values[1] ?? values[0], values[2] ?? values[1] ?? values[0]);
+          break;
+        case "rotate":
+          output.rotate(values[0] * PI_2);
+          break;
+        case "rotateX":
+          output.rotateX(values[0] * PI_2);
+          break;
+        case "rotateY":
+          output.rotateY(values[0] * PI_2);
+          break;
+        case "rotateZ":
+          output.rotateZ(values[0] * PI_2);
+          break;
+        case "rotate3d":
+          output.rotate3d(
+            values[0] * PI_2,
+            (values[1] ?? values[0]) * PI_2,
+            (values[2] ?? values[1] ?? values[0]) * PI_2,
+            (values[3] ?? values[2] ?? values[1] ?? values[0]) * PI_2
+          );
+          break;
+        case "skew":
+          output.skew(values[0], values[0] ?? values[1]);
+          break;
+        case "skewX":
+          output.skewX(values[0]);
+          break;
+        case "skewY":
+          output.skewY(values[0]);
+          break;
+        case "matrix":
+          output.set(values[0], values[1], values[2], values[3], values[4], values[5]);
+          break;
       }
-      this.prepend(transform);
-    }
+    });
+    this.prepend(output);
     return this;
   }
   clone() {
@@ -1702,749 +1518,976 @@ class Transform2D {
   }
 }
 
-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 svgAngle(ux, uy, vx, vy) {
+  const dot = ux * vx + uy * vy;
+  const len = Math.sqrt(ux * ux + uy * uy) * Math.sqrt(vx * vx + vy * vy);
+  let ang = Math.acos(Math.max(-1, Math.min(1, dot / len)));
+  if (ux * vy - uy * vx < 0)
+    ang = -ang;
+  return ang;
 }
-function cubicBezier(t, p0, p1, p2, p3) {
-  return cubicBezierP0(t, p0) + cubicBezierP1(t, p1) + cubicBezierP2(t, p2) + cubicBezierP3(t, p3);
+function parseArcCommand(path, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, start, end) {
+  if (rx === 0 || ry === 0) {
+    path.lineTo(end.x, end.y);
+    return;
+  }
+  xAxisRotation = xAxisRotation * Math.PI / 180;
+  rx = Math.abs(rx);
+  ry = Math.abs(ry);
+  const dx2 = (start.x - end.x) / 2;
+  const dy2 = (start.y - end.y) / 2;
+  const x1p = Math.cos(xAxisRotation) * dx2 + Math.sin(xAxisRotation) * dy2;
+  const y1p = -Math.sin(xAxisRotation) * dx2 + Math.cos(xAxisRotation) * dy2;
+  let rxs = rx * rx;
+  let rys = ry * ry;
+  const x1ps = x1p * x1p;
+  const y1ps = y1p * y1p;
+  const cr = x1ps / rxs + y1ps / rys;
+  if (cr > 1) {
+    const s = Math.sqrt(cr);
+    rx = s * rx;
+    ry = s * ry;
+    rxs = rx * rx;
+    rys = ry * ry;
+  }
+  const dq = rxs * y1ps + rys * x1ps;
+  const pq = (rxs * rys - dq) / dq;
+  let q = Math.sqrt(Math.max(0, pq));
+  if (largeArcFlag === sweepFlag)
+    q = -q;
+  const cxp = q * rx * y1p / ry;
+  const cyp = -q * ry * x1p / rx;
+  const cx = Math.cos(xAxisRotation) * cxp - Math.sin(xAxisRotation) * cyp + (start.x + end.x) / 2;
+  const cy = Math.sin(xAxisRotation) * cxp + Math.cos(xAxisRotation) * cyp + (start.y + end.y) / 2;
+  const theta = svgAngle(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
+  const delta = svgAngle((x1p - cxp) / rx, (y1p - cyp) / ry, (-x1p - cxp) / rx, (-y1p - cyp) / ry) % (Math.PI * 2);
+  path.ellipse(cx, cy, rx, ry, xAxisRotation, theta, theta + delta, sweepFlag === 0);
 }
 
-function fillTriangulate(pointArray, options = {}) {
-  let {
-    vertices = [],
-    indices = [],
-    holes = [],
-    verticesStride = 2,
-    verticesOffset = vertices.length / verticesStride,
-    indicesOffset = indices.length
-  } = options;
-  const triangles = earcut(pointArray, holes, 2);
-  if (triangles.length) {
-    for (let i = 0; i < triangles.length; i += 3) {
-      indices[indicesOffset++] = triangles[i] + verticesOffset;
-      indices[indicesOffset++] = triangles[i + 1] + verticesOffset;
-      indices[indicesOffset++] = triangles[i + 2] + verticesOffset;
-    }
-    let index = verticesOffset * verticesStride;
-    for (let i = 0; i < pointArray.length; i += 2) {
-      vertices[index] = pointArray[i];
-      vertices[index + 1] = pointArray[i + 1];
-      index += verticesStride;
+const RE$3 = {
+  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 = "";
   }
-  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;
-        }
+  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;
       }
-    } else if (d2 > FLT_EPSILON$1) {
-      if (d2 * d2 <= distanceTolerance * (dx * dx + dy * dy)) {
-        {
-          points.push(x1234, y1234);
-          return;
-        }
+      if (RE$3.DIGIT.test(current) || RE$3.SIGN.test(current)) {
+        state = INT;
+        number = current;
+        continue;
       }
-    } else if (d3 > FLT_EPSILON$1) {
-      if (d3 * d3 <= distanceTolerance * (dx * dx + dy * dy)) {
-        {
-          points.push(x1234, y1234);
-          return;
+      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;
       }
-    } else {
-      dx = x1234 - (x1 + x4) / 2;
-      dy = y1234 - (y1 + y4) / 2;
-      if (dx * dx + dy * dy <= distanceTolerance) {
-        points.push(x1234, y1234);
-        return;
+    }
+    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);
       }
     }
-  }
-  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;
+    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);
       }
     }
-  } else {
-    dx = x123 - (x1 + x3) / 2;
-    dy = y123 - (y1 + y3) / 2;
-    if (dx * dx + dy * dy <= distanceTolerance) {
-      points.push(x123, y123);
-      return;
+    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);
+        }
+      }
     }
-  }
-  recursive(points, x1, y1, x12, y12, x123, y123, distanceTolerance, level + 1);
-  recursive(points, x123, y123, x23, y23, x3, y3, distanceTolerance, level + 1);
-}
-
-function getDirectedArea(vertices) {
-  let area = 0;
-  const n = vertices.length;
-  for (let i = 0; i < n; i += 2) {
-    const x0 = vertices[i];
-    const y0 = vertices[i + 1];
-    const x1 = vertices[(i + 2) % (n - 1)];
-    const y1 = vertices[(i + 3) % n];
-    area += x0 * y1 - x1 * y0;
-  }
-  return area / 2;
-}
-
-function toKebabCase(str) {
-  return str.replace(/[^a-z0-9]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
-}
-function getIntersectionPoint(p1, p2, q1, q2) {
-  const r = p2.clone().sub(p1);
-  const s = q2.clone().sub(q1);
-  const q1p1 = q1.clone().sub(p1);
-  const crossRS = r.cross(s);
-  if (crossRS === 0) {
-    return new Vector2(
-      (p1.x + q1.x) / 2,
-      (p1.y + q1.y) / 2
-    );
-  }
-  const t = q1p1.cross(s) / crossRS;
-  if (Math.abs(t) > 1) {
-    return new Vector2(
-      (p1.x + q1.x) / 2,
-      (p1.y + q1.y) / 2
-    );
-  }
-  return new Vector2(
-    p1.x + t * r.x,
-    p1.y + t * r.y
-  );
-}
-
-function cross(ax, ay, bx, by, cx, cy) {
-  return (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);
-}
-function windingNumber(px, py, polygon) {
-  const polygonLen = polygon.length;
-  let wn = 0;
-  for (let i = 0, j = polygonLen - 2; i < polygonLen; j = i, i += 2) {
-    const xi = polygon[i];
-    const yi = polygon[i + 1];
-    const xj = polygon[j];
-    const yj = polygon[j + 1];
-    if (yi <= py) {
-      if (yj > py && cross(xj, yj, xi, yi, px, py) > 0)
-        wn++;
+    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 {
-      if (yj <= py && cross(xj, yj, xi, yi, px, py) < 0)
-        wn--;
+      throwSyntaxError(current, i, result);
     }
   }
-  return wn;
+  newNumber();
+  return result;
 }
-function distance(p1, p2) {
-  const dx = p2[0] - p1[0];
-  const dy = p2[1] - p1[1];
-  return Math.sqrt(dx * dx + dy * dy);
+
+function getReflection(a, b) {
+  return a - (b - a);
 }
-function nonzeroFillRule(paths) {
-  const results = paths.map((_, i) => ({ index: i }));
-  const testPointsGroups = paths.map((path) => {
-    const len = path.length;
-    if (!len) {
-      return [];
-    }
-    let xMinYAuto = [Number.MAX_SAFE_INTEGER, 0];
-    let xAutoYMin = [0, Number.MAX_SAFE_INTEGER];
-    let xMaxYAuto = [Number.MIN_SAFE_INTEGER, 0];
-    let xAutoYMax = [0, Number.MIN_SAFE_INTEGER];
-    for (let i = 0; i < len; i += 2) {
-      const x = path[i];
-      const y = path[i + 1];
-      if (xMinYAuto[0] > x) {
-        xMinYAuto = [x, y];
+function svgPathCommandsAddToPath2D(commands, path) {
+  const current = new Vector2();
+  const control = new Vector2();
+  for (let i = 0, l = commands.length; i < l; i++) {
+    const cmd = commands[i];
+    if (cmd.type === "m" || cmd.type === "M") {
+      if (cmd.type === "m") {
+        current.add(cmd);
+      } else {
+        current.copyFrom(cmd);
       }
-      if (xAutoYMin[1] > y) {
-        xAutoYMin = [x, y];
+      path.moveTo(current.x, current.y);
+      control.copyFrom(current);
+    } else if (cmd.type === "h" || cmd.type === "H") {
+      if (cmd.type === "h") {
+        current.x += cmd.x;
+      } else {
+        current.x = cmd.x;
       }
-      if (xMaxYAuto[0] < x) {
-        xMaxYAuto = [x, y];
+      path.lineTo(current.x, current.y);
+      control.copyFrom(current);
+    } else if (cmd.type === "v" || cmd.type === "V") {
+      if (cmd.type === "v") {
+        current.y += cmd.y;
+      } else {
+        current.y = cmd.y;
       }
-      if (xAutoYMax[1] < y) {
-        xAutoYMax = [x, y];
+      path.lineTo(current.x, current.y);
+      control.copyFrom(current);
+    } else if (cmd.type === "l" || cmd.type === "L") {
+      if (cmd.type === "l") {
+        current.add(cmd);
+      } else {
+        current.copyFrom(cmd);
       }
-    }
-    const mid = [
-      (xMinYAuto[0] + xMaxYAuto[0]) / 2,
-      (xAutoYMin[1] + xAutoYMax[1]) / 2
-    ];
-    let xMidYMinDx;
-    let xMidYMaxDx;
-    let xMidYMin;
-    let xMidYMax;
-    let xMinYMidDy;
-    let xMaxYMidDy;
-    let xMinYMid;
-    let xMaxYMid;
-    for (let i = 0; i < len; i += 2) {
-      const x = path[i];
-      const y = path[i + 1];
-      const _dx = Math.abs(x - mid[0]);
-      const _dy = Math.abs(y - mid[1]);
-      if (y < mid[1] && (!xMidYMinDx || _dx < xMidYMinDx)) {
-        xMidYMinDx = _dx;
-        xMidYMin = [x, y];
+      path.lineTo(current.x, current.y);
+      control.copyFrom(current);
+    } else if (cmd.type === "c" || cmd.type === "C") {
+      if (cmd.type === "c") {
+        path.bezierCurveTo(
+          current.x + cmd.x1,
+          current.y + cmd.y1,
+          current.x + cmd.x2,
+          current.y + cmd.y2,
+          current.x + cmd.x,
+          current.y + cmd.y
+        );
+        control.x = current.x + cmd.x2;
+        control.y = current.y + cmd.y2;
+        current.add(cmd);
+      } else {
+        path.bezierCurveTo(
+          cmd.x1,
+          cmd.y1,
+          cmd.x2,
+          cmd.y2,
+          cmd.x,
+          cmd.y
+        );
+        control.x = cmd.x2;
+        control.y = cmd.y2;
+        current.copyFrom(cmd);
       }
-      if (y > mid[1] && (!xMidYMaxDx || _dx < xMidYMaxDx)) {
-        xMidYMaxDx = _dx;
-        xMidYMax = [x, y];
+    } else if (cmd.type === "s" || cmd.type === "S") {
+      if (cmd.type === "s") {
+        path.bezierCurveTo(
+          getReflection(current.x, control.x),
+          getReflection(current.y, control.y),
+          current.x + cmd.x2,
+          current.y + cmd.y2,
+          current.x + cmd.x,
+          current.y + cmd.y
+        );
+        control.x = current.x + cmd.x2;
+        control.y = current.y + cmd.y2;
+        current.add(cmd);
+      } else {
+        path.bezierCurveTo(
+          getReflection(current.x, control.x),
+          getReflection(current.y, control.y),
+          cmd.x2,
+          cmd.y2,
+          cmd.x,
+          cmd.y
+        );
+        control.x = cmd.x2;
+        control.y = cmd.y2;
+        current.copyFrom(cmd);
       }
-      if (x < mid[0] && (!xMinYMidDy || _dy < xMinYMidDy)) {
-        xMinYMidDy = _dy;
-        xMinYMid = [x, y];
+    } else if (cmd.type === "q" || cmd.type === "Q") {
+      if (cmd.type === "q") {
+        path.quadraticCurveTo(
+          current.x + cmd.x1,
+          current.y + cmd.y1,
+          current.x + cmd.x,
+          current.y + cmd.y
+        );
+        control.x = current.x + cmd.x1;
+        control.y = current.y + cmd.y1;
+        current.add(cmd);
+      } else {
+        path.quadraticCurveTo(
+          cmd.x1,
+          cmd.y1,
+          cmd.x,
+          cmd.y
+        );
+        control.x = cmd.x1;
+        control.y = cmd.y1;
+        current.copyFrom(cmd);
       }
-      if (x > mid[0] && (!xMaxYMidDy || _dy < xMaxYMidDy)) {
-        xMaxYMidDy = _dy;
-        xMaxYMid = [x, y];
+    } else if (cmd.type === "t" || cmd.type === "T") {
+      const rx = getReflection(current.x, control.x);
+      const ry = getReflection(current.y, control.y);
+      control.x = rx;
+      control.y = ry;
+      if (cmd.type === "t") {
+        path.quadraticCurveTo(
+          rx,
+          ry,
+          current.x + cmd.x,
+          current.y + cmd.y
+        );
+        current.add(cmd);
+      } else {
+        path.quadraticCurveTo(
+          rx,
+          ry,
+          cmd.x,
+          cmd.y
+        );
+        current.copyFrom(cmd);
       }
-    }
-    return [
-      xMinYAuto,
-      xAutoYMin,
-      xMaxYAuto,
-      xAutoYMax,
-      xMidYMin,
-      xMidYMax,
-      xMinYMid,
-      xMaxYMid
-    ].filter(Boolean);
-  });
-  for (let i = 0, len = paths.length; i < len; i++) {
-    const _results = [];
-    const testPoints = testPointsGroups[i];
-    for (let j = 0; j < len; j++) {
-      if (i === j)
-        continue;
-      const wnMap = {};
-      const wnList = [];
-      for (let p = 0, pLen = testPoints.length; p < pLen; p++) {
-        const [x, y] = testPoints[p];
-        const winding = windingNumber(x, y, paths[j]);
-        wnMap[winding] = (wnMap[winding] ?? 0) + 1;
-        wnList.push(winding);
+    } else if (cmd.type === "a" || cmd.type === "A") {
+      const start = current.clone();
+      if (cmd.type === "a") {
+        if (cmd.x === 0 && cmd.y === 0)
+          continue;
+        current.add(cmd);
+      } else {
+        if (current.equals(cmd))
+          continue;
+        current.copyFrom(cmd);
       }
-      if (wnList.filter((v) => v !== 0).length > wnList.filter((v) => v === 0).length) {
-        _results.push({
-          index: i,
-          parentIndex: j,
-          winding: Number(
-            Array.from(Object.entries(wnMap)).sort((a, b) => b[1] - a[1])?.[0]?.[0] ?? 0
-          ),
-          dist: distance(testPointsGroups[i][0], testPointsGroups[j][0])
-        });
+      control.copyFrom(current);
+      parseArcCommand(
+        path,
+        cmd.rx,
+        cmd.ry,
+        cmd.angle,
+        cmd.largeArcFlag,
+        cmd.sweepFlag,
+        start,
+        current
+      );
+    } else if (cmd.type === "z" || cmd.type === "Z") {
+      if (path.startPoint) {
+        current.copyFrom(path.startPoint);
       }
-    }
-    if (_results.reduce((total, item) => total + item.winding, 0) !== 0) {
-      _results.sort((a, b) => a.dist - b.dist);
-      results[i] = _results[0];
+      path.closePath();
+    } else {
+      console.warn("Unsupported commands", cmd);
     }
   }
-  return results;
-}
-
-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];
+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}`);
+        prev = { x: cmd.x, y: cmd.y };
+        first = { x: cmd.x, y: cmd.y };
+        break;
+      case "h":
+      case "H":
+        data.push(`${cmd.type} ${cmd.x}`);
+        prev = { x: cmd.x, y: prev?.y ?? 0 };
+        break;
+      case "v":
+      case "V":
+        data.push(`${cmd.type} ${cmd.y}`);
+        prev = { x: prev?.x ?? 0, y: cmd.y };
+        break;
+      case "l":
+      case "L":
+        data.push(`${cmd.type} ${cmd.x} ${cmd.y}`);
+        prev = { x: cmd.x, y: cmd.y };
+        break;
+      case "c":
+      case "C":
+        data.push(`${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`);
+        prev = { x: cmd.x, y: cmd.y };
+        break;
+      case "s":
+      case "S":
+        data.push(`${cmd.type} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`);
+        prev = { x: cmd.x, y: cmd.y };
+        break;
+      case "q":
+      case "Q":
+        data.push(`${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x} ${cmd.y}`);
+        prev = { x: cmd.x, y: cmd.y };
+        break;
+      case "t":
+      case "T":
+        data.push(`${cmd.type} ${cmd.x} ${cmd.y}`);
+        prev = { x: cmd.x, y: cmd.y };
+        break;
+      case "a":
+      case "A":
+        data.push(`${cmd.type} ${cmd.rx} ${cmd.ry} ${cmd.angle} ${cmd.largeArcFlag} ${cmd.sweepFlag} ${cmd.x} ${cmd.y}`);
+        prev = { x: cmd.x, y: cmd.y };
+        break;
+      case "z":
+      case "Z":
+        data.push(cmd.type);
+        if (first) {
+          prev = { x: first.x, y: first.y };
+        }
+        break;
     }
-    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);
-    }
+  return data.join(" ");
+}
+
+const RE$2 = /[a-df-z][^a-df-z]*/gi;
+function svgPathDataToCommands(data) {
+  const commands = [];
+  const matched = data.match(RE$2);
+  if (!matched) {
+    return commands;
   }
-  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;
+  for (let i = 0, len = matched.length; i < len; i++) {
+    const command = matched[i];
+    const type = command.charAt(0);
+    const data2 = command.slice(1).trim();
+    let args;
+    switch (type) {
+      case "m":
+      case "M":
+        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] });
+          } else {
+            commands.push({ type: type === "m" ? "l" : "L", x: args[i2], y: args[i2 + 1] });
+          }
         }
-        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);
+        break;
+      case "h":
+      case "H":
+        args = parsePathDataArgs(data2);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2++) {
+          commands.push({ type, x: args[i2] });
         }
-        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);
+        break;
+      case "v":
+      case "V":
+        args = parsePathDataArgs(data2);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2++) {
+          commands.push({ type, y: args[i2] });
         }
-      } 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;
+        break;
+      case "l":
+      case "L":
+        args = parsePathDataArgs(data2);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 2) {
+          commands.push({ type, x: args[i2], y: args[i2 + 1] });
         }
-      } 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);
+        break;
+      case "c":
+      case "C":
+        args = parsePathDataArgs(data2);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 6) {
+          commands.push({
+            type,
+            x1: args[i2],
+            y1: args[i2 + 1],
+            x2: args[i2 + 2],
+            y2: args[i2 + 3],
+            x: args[i2 + 4],
+            y: args[i2 + 5]
+          });
         }
-        indexCount += 2;
+        break;
+      case "s":
+      case "S":
+        args = parsePathDataArgs(data2);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 4) {
+          commands.push({
+            type,
+            x2: args[i2],
+            y2: args[i2 + 1],
+            x: args[i2 + 2],
+            y: args[i2 + 3]
+          });
+        }
+        break;
+      case "q":
+      case "Q":
+        args = parsePathDataArgs(data2);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 4) {
+          commands.push({
+            type,
+            x1: args[i2],
+            y1: args[i2 + 1],
+            x: args[i2 + 2],
+            y: args[i2 + 3]
+          });
+        }
+        break;
+      case "t":
+      case "T":
+        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 "a":
+      case "A":
+        args = parsePathDataArgs(data2, [3, 4], 7);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 7) {
+          commands.push({
+            type,
+            rx: args[i2],
+            ry: args[i2 + 1],
+            angle: args[i2 + 2],
+            largeArcFlag: args[i2 + 3],
+            sweepFlag: args[i2 + 4],
+            x: args[i2 + 5],
+            y: args[i2 + 6]
+          });
+        }
+        break;
+      case "z":
+      case "Z":
+        commands.push({
+          type
+        });
+        break;
+      default:
+        console.warn(command);
+    }
+  }
+  return commands;
+}
+
+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;
+  }
+}
+
+const defaultUnit = "px";
+const defaultDPI = 90;
+const units = ["mm", "cm", "in", "pt", "pc", "px"];
+const unitConversion = {
+  mm: {
+    mm: 1,
+    cm: 0.1,
+    in: 1 / 25.4,
+    pt: 72 / 25.4,
+    pc: 6 / 25.4,
+    px: -1
+  },
+  cm: {
+    mm: 10,
+    cm: 1,
+    in: 1 / 2.54,
+    pt: 72 / 2.54,
+    pc: 6 / 2.54,
+    px: -1
+  },
+  in: {
+    mm: 25.4,
+    cm: 2.54,
+    in: 1,
+    pt: 72,
+    pc: 6,
+    px: -1
+  },
+  pt: {
+    mm: 25.4 / 72,
+    cm: 2.54 / 72,
+    in: 1 / 72,
+    pt: 1,
+    pc: 6 / 72,
+    px: -1
+  },
+  pc: {
+    mm: 25.4 / 6,
+    cm: 2.54 / 6,
+    in: 1 / 6,
+    pt: 72 / 6,
+    pc: 1,
+    px: -1
+  },
+  px: {
+    px: 1
+  }
+};
+function parseFloatWithUnits(string) {
+  let theUnit = "px";
+  if (typeof string === "string") {
+    for (let i = 0, n = units.length; i < n; i++) {
+      const u = units[i];
+      if (string.endsWith(u)) {
+        theUnit = u;
+        string = string.substring(0, string.length - u.length);
+        break;
       }
-      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);
-    }
+  let scale;
+  {
+    scale = unitConversion[theUnit][defaultUnit];
+    if (scale < 0) {
+      scale = unitConversion[theUnit].in * defaultDPI;
+    }
+  }
+  return scale * Number.parseFloat(string);
+}
+
+function getNodeTransform(node, currentTransform, transformStack) {
+  if (!(node.hasAttribute("transform") || node.nodeName === "use" && (node.hasAttribute("x") || node.hasAttribute("y")))) {
+    return null;
+  }
+  const transform = parseNodeTransform(node);
+  if (transformStack.length > 0) {
+    transform.prepend(transformStack[transformStack.length - 1]);
+  }
+  currentTransform.copyFrom(transform);
+  transformStack.push(transform);
+  return transform;
+}
+function parseNodeTransform(node) {
+  const transform = new Transform2D();
+  if (node.nodeName === "use" && (node.hasAttribute("x") || node.hasAttribute("y"))) {
+    transform.translate(
+      parseFloatWithUnits(node.getAttribute("x")),
+      parseFloatWithUnits(node.getAttribute("y"))
+    );
+  }
+  if (node.hasAttribute("transform")) {
+    transform.appendCssTransform(node.getAttribute("transform"));
+  }
+  return transform;
+}
+
+function parseCircleNode(node) {
+  return new Path2D().arc(
+    parseFloatWithUnits(node.getAttribute("cx") || 0),
+    parseFloatWithUnits(node.getAttribute("cy") || 0),
+    parseFloatWithUnits(node.getAttribute("r") || 0),
+    0,
+    Math.PI * 2
+  );
+}
+
+function parseCSSStylesheet(node, stylesheets) {
+  if (!node.sheet || !node.sheet.cssRules || !node.sheet.cssRules.length)
+    return;
+  for (let i = 0; i < node.sheet.cssRules.length; i++) {
+    const stylesheet = node.sheet.cssRules[i];
+    if (stylesheet.type !== 1)
+      continue;
+    const selectorList = stylesheet.selectorText.split(/,/g).filter(Boolean).map((i2) => i2.trim());
+    const definitions = {};
+    for (let len = stylesheet.style.length, i2 = 0; i2 < len; i2++) {
+      const name = stylesheet.style.item(i2);
+      definitions[name] = stylesheet.style.getPropertyValue(name);
+    }
+    for (let j = 0; j < selectorList.length; j++) {
+      stylesheets[selectorList[j]] = Object.assign(
+        stylesheets[selectorList[j]] || {},
+        { ...definitions }
+      );
+    }
+  }
+}
+
+function parseEllipseNode(node) {
+  return new Path2D().ellipse(
+    parseFloatWithUnits(node.getAttribute("cx") || 0),
+    parseFloatWithUnits(node.getAttribute("cy") || 0),
+    parseFloatWithUnits(node.getAttribute("rx") || 0),
+    parseFloatWithUnits(node.getAttribute("ry") || 0),
+    0,
+    0,
+    Math.PI * 2
+  );
+}
+
+function parseLineNode(node) {
+  return new Path2D().moveTo(
+    parseFloatWithUnits(node.getAttribute("x1") || 0),
+    parseFloatWithUnits(node.getAttribute("y1") || 0)
+  ).lineTo(
+    parseFloatWithUnits(node.getAttribute("x2") || 0),
+    parseFloatWithUnits(node.getAttribute("y2") || 0)
+  );
+}
+
+function parsePathNode(node) {
+  const path = new Path2D();
+  const d = node.getAttribute("d");
+  if (!d || d === "none")
+    return null;
+  path.addData(d);
+  return path;
+}
+
+const RE$1 = /([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;
+function parsePolygonNode(node) {
+  const path = new Path2D();
+  let index = 0;
+  node.getAttribute("points")?.replace(RE$1, (match, a, b) => {
+    const x = parseFloatWithUnits(a);
+    const y = parseFloatWithUnits(b);
+    if (index === 0) {
+      path.moveTo(x, y);
+    } else {
+      path.lineTo(x, y);
+    }
+    index++;
+    return match;
+  });
+  path.currentCurve.autoClose = true;
+  return path;
+}
+
+const RE = /([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;
+function parsePolylineNode(node) {
+  const path = new Path2D();
+  let index = 0;
+  node.getAttribute("points")?.replace(RE, (match, a, b) => {
+    const x = parseFloatWithUnits(a);
+    const y = parseFloatWithUnits(b);
+    if (index === 0) {
+      path.moveTo(x, y);
+    } else {
+      path.lineTo(x, y);
+    }
+    index++;
+    return match;
+  });
+  path.currentCurve.autoClose = false;
+  return path;
+}
+
+function parseRectNode(node) {
+  const x = parseFloatWithUnits(node.getAttribute("x") || 0);
+  const y = parseFloatWithUnits(node.getAttribute("y") || 0);
+  const rx = parseFloatWithUnits(node.getAttribute("rx") || node.getAttribute("ry") || 0);
+  const ry = parseFloatWithUnits(node.getAttribute("ry") || node.getAttribute("rx") || 0);
+  const w = parseFloatWithUnits(node.getAttribute("width"));
+  const h = parseFloatWithUnits(node.getAttribute("height"));
+  const bci = 1 - 0.551915024494;
+  const path = new Path2D();
+  path.moveTo(x + rx, y);
+  path.lineTo(x + w - rx, y);
+  if (rx !== 0 || ry !== 0) {
+    path.bezierCurveTo(
+      x + w - rx * bci,
+      y,
+      x + w,
+      y + ry * bci,
+      x + w,
+      y + ry
+    );
+  }
+  path.lineTo(x + w, y + h - ry);
+  if (rx !== 0 || ry !== 0) {
+    path.bezierCurveTo(
+      x + w,
+      y + h - ry * bci,
+      x + w - rx * bci,
+      y + h,
+      x + w - rx,
+      y + h
+    );
+  }
+  path.lineTo(x + rx, y + h);
+  if (rx !== 0 || ry !== 0) {
+    path.bezierCurveTo(
+      x + rx * bci,
+      y + h,
+      x,
+      y + h - ry * bci,
+      x,
+      y + h - ry
+    );
+  }
+  path.lineTo(x, y + ry);
+  if (rx !== 0 || ry !== 0) {
+    path.bezierCurveTo(x, y + ry * bci, x + rx * bci, y, x + rx, y);
+  }
+  return path;
+}
+
+function parseStyle(node, style, stylesheets) {
+  style = Object.assign({}, style);
+  let stylesheetStyles = {};
+  if (node.hasAttribute("class")) {
+    const classSelectors = node.getAttribute("class").split(/\s/).filter(Boolean).map((i) => i.trim());
+    for (let i = 0; i < classSelectors.length; i++) {
+      stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`.${classSelectors[i]}`]);
+    }
+  }
+  if (node.hasAttribute("id")) {
+    stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`#${node.getAttribute("id")}`]);
   }
-  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);
+  for (let len = node.style.length, i = 0; i < len; i++) {
+    const name = node.style.item(i);
+    const value = node.style.getPropertyValue(name);
+    style[name] = value;
+    stylesheetStyles[name] = value;
   }
-  return {
-    vertices,
-    indices
-  };
-}
-function getOrientationOfPoints(points) {
-  const m = points.length;
-  if (m < 6) {
-    return 1;
+  function addStyle(svgName, jsName, adjustFunction = copy) {
+    if (node.hasAttribute(svgName))
+      style[jsName] = adjustFunction(node.getAttribute(svgName));
+    if (stylesheetStyles[svgName])
+      style[jsName] = adjustFunction(stylesheetStyles[svgName]);
   }
-  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;
+  function copy(v) {
+    if (v.startsWith("url"))
+      console.warn("url access in attributes is not implemented.");
+    return v;
   }
-  if (area < 0) {
-    return -1;
+  function clamp(v) {
+    return Math.max(0, Math.min(1, parseFloatWithUnits(v)));
   }
-  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;
+  function positive(v) {
+    return Math.max(0, parseFloatWithUnits(v));
   }
-  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;
+  function array(v) {
+    return v.split(" ").filter((v2) => v2 !== "").map((v2) => parseFloatWithUnits(v2));
   }
-  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);
+  addStyle("fill", "fill");
+  addStyle("fill-opacity", "fillOpacity", clamp);
+  addStyle("fill-rule", "fillRule");
+  addStyle("opacity", "opacity", clamp);
+  addStyle("stroke", "stroke");
+  addStyle("stroke-opacity", "strokeOpacity", clamp);
+  addStyle("stroke-width", "strokeWidth", positive);
+  addStyle("stroke-linecap", "strokeLinecap");
+  addStyle("stroke-linejoin", "strokeLinejoin");
+  addStyle("stroke-miterlimit", "strokeMiterlimit", positive);
+  addStyle("stroke-dasharray", "strokeDasharray", array);
+  addStyle("stroke-dashoffset", "strokeDashoffset", parseFloatWithUnits);
+  addStyle("visibility", "visibility");
+  return style;
+}
+
+function parseNode(node, style, paths = [], stylesheets = {}) {
+  if (node.nodeType !== 1)
+    return paths;
+  let isDefsNode = false;
+  let path = null;
+  let _style = { ...style };
+  switch (node.nodeName) {
+    case "svg":
+      _style = parseStyle(node, _style, stylesheets);
+      break;
+    case "style":
+      parseCSSStylesheet(node, stylesheets);
+      break;
+    case "g":
+      _style = parseStyle(node, _style, stylesheets);
+      break;
+    case "path":
+      _style = parseStyle(node, _style, stylesheets);
+      if (node.hasAttribute("d"))
+        path = parsePathNode(node);
+      break;
+    case "rect":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parseRectNode(node);
+      break;
+    case "polygon":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parsePolygonNode(node);
+      break;
+    case "polyline":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parsePolylineNode(node);
+      break;
+    case "circle":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parseCircleNode(node);
+      break;
+    case "ellipse":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parseEllipseNode(node);
+      break;
+    case "line":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parseLineNode(node);
+      break;
+    case "defs":
+      isDefsNode = true;
+      break;
+    case "use": {
+      _style = parseStyle(node, _style, stylesheets);
+      const href = node.getAttributeNS("http://www.w3.org/1999/xlink", "href") || node.getAttribute("href") || "";
+      const usedNodeId = href.substring(1);
+      const usedNode = node.viewportElement?.getElementById(usedNodeId);
+      if (usedNode) {
+        parseNode(usedNode, _style, paths, stylesheets);
+      } else {
+        console.warn(`'use node' references non-existent node id: ${usedNodeId}`);
+      }
+      break;
     }
-    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);
+    default:
+      console.warn(node);
+      break;
+  }
+  if (_style.display === "none") {
+    return paths;
+  }
+  const currentTransform = new Transform2D();
+  const transformStack = [];
+  const transform = getNodeTransform(node, currentTransform, transformStack);
+  if (path) {
+    path.applyTransform(currentTransform);
+    paths.push(path);
+    path.style = { ..._style };
+  }
+  const childNodes = node.childNodes;
+  for (let i = 0, len = childNodes.length; i < len; i++) {
+    const node2 = childNodes[i];
+    if (isDefsNode && node2.nodeName !== "style" && node2.nodeName !== "defs")
+      continue;
+    parseNode(node2, _style, paths, stylesheets);
+  }
+  if (transform) {
+    transformStack.pop();
+    if (transformStack.length > 0) {
+      currentTransform.copyFrom(transformStack[transformStack.length - 1]);
+    } else {
+      currentTransform.identity();
     }
-    verts.push(ex, ey);
-    verts.push(cx, cy);
   }
-  return segCount * 2;
+  return paths;
+}
+
+function svgToPath2DSet(svg) {
+  const dom = svgToDom(svg);
+  return new Path2DSet(
+    parseNode(dom, {}),
+    dom.getAttribute("viewBox")?.trim().split(" ").map((v) => Number(v))
+  );
 }
 
 class Curve {
@@ -4442,4 +4485,4 @@ function applyFFD(point, grid, width = grid.width, height = grid.height) {
   point.set(x, y);
 }
 
-export { ArcCurve, BoundingBox, CompositeCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, EquilateralPloygonCurve, FFDControlGrid, LineCurve, PI, PI_2, Path2D, Path2DSet, PloygonCurve, QuadraticBezierCurve, RectangleCurve, RoundRectangleCurve, SplineCurve, Transform2D, Vector2, applyFFD, catmullRom, cubicBezier, drawPoint, fillTriangulate, getAdaptiveCubicBezierCurvePoints, getAdaptiveQuadraticBezierCurvePoints, getDirectedArea, getIntersectionPoint, nonzeroFillRule, parseArcCommand, parsePathDataArgs, quadraticBezier, setCanvasContext, strokeTriangulate, svgPathCommandsAddToPath2D, svgPathCommandsToData, svgPathDataToCommands, svgToDom, svgToPath2DSet, toKebabCase };
+export { ArcCurve, BoundingBox, CompositeCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, EquilateralPloygonCurve, FFDControlGrid, LineCurve, PI, PI_2, Path2D, Path2DSet, PloygonCurve, QuadraticBezierCurve, RectangleCurve, RoundRectangleCurve, SplineCurve, Transform2D, Vector2, applyFFD, catmullRom, cubicBezier, drawPoint, fillTriangulate, getAdaptiveCubicBezierCurvePoints, getAdaptiveQuadraticBezierCurvePoints, getDirectedArea, getIntersectionPoint, nonzeroFillRule, parseArcCommand, parseCssArg, parseCssArgs, parseCssFunctions, parsePathDataArgs, quadraticBezier, setCanvasContext, strokeTriangulate, svgPathCommandsAddToPath2D, svgPathCommandsToData, svgPathDataToCommands, svgToDom, svgToPath2DSet, toKebabCase };