modern-path2d 1.4.16 → 1.5.2

package/dist/index.mjs

@@ -43,9 +43,10 @@ function setCanvasContext(ctx, style) {
 }
 
 class Vector2 {
-  constructor(x = 0, y = 0) {
-    this.x = x;
-    this.y = y;
+  constructor(_x = 0, _y = 0, _onUpdate) {
+    this._x = _x;
+    this._y = _y;
+    this._onUpdate = _onUpdate;
   }
   static get MAX() {
     return new Vector2(Infinity, Infinity);
@@ -53,141 +54,173 @@ class Vector2 {
   static get MIN() {
     return new Vector2(-Infinity, -Infinity);
   }
-  get array() {
-    return [this.x, this.y];
+  static lerp(a, b, t) {
+    return new Vector2(b.x, b.y).clone().sub(a).multiply(t).add(a);
   }
-  finite() {
-    this.x = Number.isFinite(this.x) ? this.x : 0;
-    this.y = Number.isFinite(this.y) ? this.y : 0;
-    return this;
+  get width() {
+    return this.x;
   }
-  set(x, y) {
-    this.x = x;
-    this.y = y;
-    return this;
+  set width(val) {
+    this.x = val;
   }
-  add(vec) {
-    this.x += vec.x;
-    this.y += vec.y;
-    return this;
+  get height() {
+    return this.y;
   }
-  sub(vec) {
-    this.x -= vec.x;
-    this.y -= vec.y;
-    return this;
+  set height(val) {
+    this.y = val;
   }
-  multiply(vec) {
-    this.x *= vec.x;
-    this.y *= vec.y;
-    return this;
+  get left() {
+    return this.x;
   }
-  divide(vec) {
-    this.x /= vec.x;
-    this.y /= vec.y;
-    return this;
+  set left(val) {
+    this.x = val;
   }
-  dot(vec) {
-    return this.x * vec.x + this.y * vec.y;
+  get top() {
+    return this.y;
   }
-  cross(vec) {
-    return this.x * vec.y - this.y * vec.x;
+  set top(val) {
+    this.y = val;
   }
-  rotate(a, target = { x: 0, y: 0 }) {
-    const rotation = -a / 180 * Math.PI;
-    const x = this.x - target.x;
-    const y = -(this.y - target.y);
-    const sin = Math.sin(rotation);
-    const cos = Math.cos(rotation);
-    this.set(
-      target.x + (x * cos - y * sin),
-      target.y - (x * sin + y * cos)
-    );
+  get x() {
+    return this._x;
+  }
+  set x(value) {
+    if (this._x !== value) {
+      this._x = value;
+      this._onUpdate?.(this);
+    }
+  }
+  get y() {
+    return this._y;
+  }
+  set y(value) {
+    if (this._y !== value) {
+      this._y = value;
+      this._onUpdate?.(this);
+    }
+  }
+  set(x = 0, y = x) {
+    if (this._x !== x || this._y !== y) {
+      this._x = x;
+      this._y = y;
+      this._onUpdate?.(this);
+    }
     return this;
   }
-  distanceTo(vec) {
-    return Math.sqrt(this.distanceToSquared(vec));
+  add(p) {
+    return this.set(this._x + p.x, this._y + p.y);
   }
-  distanceToSquared(vec) {
-    const dx = this.x - vec.x;
-    const dy = this.y - vec.y;
-    return dx * dx + dy * dy;
+  sub(p) {
+    return this.set(this._x - p.x, this._y - p.y);
   }
-  lengthSquared() {
-    return this.x * this.x + this.y * this.y;
+  subVectors(a, b) {
+    return this.set(a.x - b.x, a.y - b.y);
   }
-  length() {
-    return Math.sqrt(this.lengthSquared());
+  multiply(x = 0, y = x) {
+    return this.set(this._x * x, this._y * y);
   }
-  scale(sx, sy = sx, target = { x: 0, y: 0 }) {
-    const x = sx < 0 ? target.x - this.x + target.x : this.x;
-    const y = sy < 0 ? target.y - this.y + target.y : this.y;
-    this.x = x * Math.abs(sx);
-    this.y = y * Math.abs(sy);
-    return this;
+  divide(x = 0, y = x) {
+    return this.set(this._x / x, this._y / y);
   }
-  skew(ax, ay = 0, target = { x: 0, y: 0 }) {
-    const dx = this.x - target.x;
-    const dy = this.y - target.y;
-    this.x = target.x + (dx + Math.tan(ax) * dy);
-    this.y = target.y + (dy + Math.tan(ay) * dx);
-    return this;
+  cross(p) {
+    return this._x * p.y - this._y * p.x;
   }
-  min(...vecs) {
-    this.x = Math.min(this.x, ...vecs.map((v) => v.x));
-    this.y = Math.min(this.y, ...vecs.map((v) => v.y));
-    return this;
+  dot(p) {
+    return this._x * p.x + this._y * p.y;
   }
-  max(...vecs) {
-    this.x = Math.max(this.x, ...vecs.map((v) => v.x));
-    this.y = Math.max(this.y, ...vecs.map((v) => v.y));
-    return this;
+  rotate(rad, origin = { x: 0, y: 0 }) {
+    const { x, y } = this;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    return this.set(
+      (x - origin.x) * cos - (y - origin.y) * sin + origin.x,
+      (x - origin.x) * sin + (y - origin.y) * cos + origin.y
+    );
   }
-  normalize() {
-    return this.scale(1 / (this.length() || 1));
+  getLength() {
+    const { x, y } = this;
+    return Math.sqrt(x * x + y * y);
   }
-  addVectors(a, b) {
-    this.x = a.x + b.x;
-    this.y = a.y + b.y;
-    return this;
+  getAngle() {
+    return Math.atan2(-this.x, -this.y) + Math.PI;
   }
-  subVectors(a, b) {
-    this.x = a.x - b.x;
-    this.y = a.y - b.y;
-    return this;
+  distanceTo(p) {
+    return Math.hypot(p.x - this.x, p.y - this.y);
   }
-  multiplyVectors(a, b) {
-    this.x = a.x * b.x;
-    this.y = a.y * b.y;
+  normalize() {
+    const scalar = 1 / (this.getLength() || 1);
+    this.set(this.x * scalar, this.y * scalar);
     return this;
   }
-  divideVectors(a, b) {
-    this.x = a.x / b.x;
-    this.y = a.y / b.y;
+  copyFrom(p) {
+    if (this._x !== p.x || this._y !== p.y) {
+      this._x = p.x;
+      this._y = p.y;
+      this._onUpdate?.(this);
+    }
     return this;
   }
-  lerpVectors(v1, v2, alpha) {
-    this.x = v1.x + (v2.x - v1.x) * alpha;
-    this.y = v1.y + (v2.y - v1.y) * alpha;
-    return this;
+  copyTo(p) {
+    p.set(this._x, this._y);
+    return p;
   }
   equals(vec) {
-    return this.x === vec.x && this.y === vec.y;
-  }
-  applyMatrix3(m) {
-    const x = this.x;
-    const y = this.y;
-    const e = m.elements;
-    this.x = e[0] * x + e[3] * y + e[6];
-    this.y = e[1] * x + e[4] * y + e[7];
-    return this;
+    return this._x === vec.x && this._y === vec.y;
   }
-  copy(vec) {
-    this.x = vec.x;
-    this.y = vec.y;
-    return this;
+  get array() {
+    return [this.x, this.y];
   }
-  clone() {
-    return new Vector2(this.x, this.y);
+  finite() {
+    return this.set(
+      Number.isFinite(this._x) ? this._x : 0,
+      Number.isFinite(this._y) ? this._y : 0
+    );
+  }
+  lengthSquared() {
+    return this._x * this._x + this._y * this._y;
+  }
+  length() {
+    return Math.sqrt(this.lengthSquared());
+  }
+  scale(sx, sy = sx, origin = { x: 0, y: 0 }) {
+    const x = sx < 0 ? origin.x - this._x + origin.x : this._x;
+    const y = sy < 0 ? origin.y - this._y + origin.y : this._y;
+    return this.set(
+      x * Math.abs(sx),
+      y * Math.abs(sy)
+    );
+  }
+  skew(ax, ay = 0, origin = { x: 0, y: 0 }) {
+    const dx = this._x - origin.x;
+    const dy = this._y - origin.y;
+    return this.set(
+      origin.x + (dx + Math.tan(ax) * dy),
+      origin.y + (dy + Math.tan(ay) * dx)
+    );
+  }
+  clampMin(...pList) {
+    return this.set(
+      Math.min(this._x, ...pList.map((v) => v.x)),
+      Math.min(this._y, ...pList.map((v) => v.y))
+    );
+  }
+  clampMax(...pList) {
+    return this.set(
+      Math.max(this.x, ...pList.map((v) => v.x)),
+      Math.max(this.y, ...pList.map((v) => v.y))
+    );
+  }
+  clone(_onUpdate) {
+    return new Vector2(this._x, this._y, _onUpdate ?? this._onUpdate);
+  }
+  toJSON() {
+    return {
+      x: this._x,
+      y: this._y
+    };
+  }
+  destroy() {
+    this._onUpdate = void 0;
   }
 }
 
@@ -263,2017 +296,2198 @@ class BoundingBox {
   }
 }
 
-class Matrix3 {
-  elements = [];
-  constructor(n11 = 1, n12 = 0, n13 = 0, n21 = 0, n22 = 1, n23 = 0, n31 = 0, n32 = 0, n33 = 1) {
-    this.set(n11, n12, n13, n21, n22, n23, n31, n32, n33);
-  }
-  set(n11, n12, n13, n21, n22, n23, n31, n32, n33) {
-    const te = this.elements;
-    te[0] = n11;
-    te[1] = n21;
-    te[2] = n31;
-    te[3] = n12;
-    te[4] = n22;
-    te[5] = n32;
-    te[6] = n13;
-    te[7] = n23;
-    te[8] = n33;
-    return this;
-  }
-  identity() {
-    this.set(
-      1,
-      0,
-      0,
-      0,
-      1,
-      0,
-      0,
-      0,
-      1
+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;
+}
+
+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
     );
-    return this;
-  }
-  copy(m) {
-    const te = this.elements;
-    const me = m.elements;
-    te[0] = me[0];
-    te[1] = me[1];
-    te[2] = me[2];
-    te[3] = me[3];
-    te[4] = me[4];
-    te[5] = me[5];
-    te[6] = me[6];
-    te[7] = me[7];
-    te[8] = me[8];
-    return this;
-  }
-  multiply(m) {
-    return this.multiplyMatrices(this, m);
-  }
-  premultiply(m) {
-    return this.multiplyMatrices(m, this);
-  }
-  multiplyMatrices(a, b) {
-    const ae = a.elements;
-    const be = b.elements;
-    const te = this.elements;
-    const a11 = ae[0];
-    const a12 = ae[3];
-    const a13 = ae[6];
-    const a21 = ae[1];
-    const a22 = ae[4];
-    const a23 = ae[7];
-    const a31 = ae[2];
-    const a32 = ae[5];
-    const a33 = ae[8];
-    const b11 = be[0];
-    const b12 = be[3];
-    const b13 = be[6];
-    const b21 = be[1];
-    const b22 = be[4];
-    const b23 = be[7];
-    const b31 = be[2];
-    const b32 = be[5];
-    const b33 = be[8];
-    te[0] = a11 * b11 + a12 * b21 + a13 * b31;
-    te[3] = a11 * b12 + a12 * b22 + a13 * b32;
-    te[6] = a11 * b13 + a12 * b23 + a13 * b33;
-    te[1] = a21 * b11 + a22 * b21 + a23 * b31;
-    te[4] = a21 * b12 + a22 * b22 + a23 * b32;
-    te[7] = a21 * b13 + a22 * b23 + a23 * b33;
-    te[2] = a31 * b11 + a32 * b21 + a33 * b31;
-    te[5] = a31 * b12 + a32 * b22 + a33 * b32;
-    te[8] = a31 * b13 + a32 * b23 + a33 * b33;
-    return this;
-  }
-  invert() {
-    const te = this.elements;
-    const n11 = te[0];
-    const n21 = te[1];
-    const n31 = te[2];
-    const n12 = te[3];
-    const n22 = te[4];
-    const n32 = te[5];
-    const n13 = te[6];
-    const n23 = te[7];
-    const n33 = te[8];
-    const t11 = n33 * n22 - n32 * n23;
-    const t12 = n32 * n13 - n33 * n12;
-    const t13 = n23 * n12 - n22 * n13;
-    const det = n11 * t11 + n21 * t12 + n31 * t13;
-    if (det === 0)
-      return this.set(0, 0, 0, 0, 0, 0, 0, 0, 0);
-    const detInv = 1 / det;
-    te[0] = t11 * detInv;
-    te[1] = (n31 * n23 - n33 * n21) * detInv;
-    te[2] = (n32 * n21 - n31 * n22) * detInv;
-    te[3] = t12 * detInv;
-    te[4] = (n33 * n11 - n31 * n13) * detInv;
-    te[5] = (n31 * n12 - n32 * n11) * detInv;
-    te[6] = t13 * detInv;
-    te[7] = (n21 * n13 - n23 * n11) * detInv;
-    te[8] = (n22 * n11 - n21 * n12) * detInv;
-    return this;
-  }
-  transpose() {
-    let tmp;
-    const m = this.elements;
-    tmp = m[1];
-    m[1] = m[3];
-    m[3] = tmp;
-    tmp = m[2];
-    m[2] = m[6];
-    m[6] = tmp;
-    tmp = m[5];
-    m[5] = m[7];
-    m[7] = tmp;
-    return this;
-  }
-  scale(sx, sy) {
-    this.premultiply(_m3.makeScale(sx, sy));
-    return this;
-  }
-  rotate(theta) {
-    this.premultiply(_m3.makeRotation(-theta));
-    return this;
-  }
-  translate(tx, ty) {
-    this.premultiply(_m3.makeTranslation(tx, ty));
-    return this;
   }
-  makeTranslation(x, y) {
-    this.set(
-      1,
-      0,
-      x,
-      0,
-      1,
-      y,
-      0,
-      0,
-      1
+  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 this;
   }
-  makeRotation(theta) {
-    const c = Math.cos(theta);
-    const s = Math.sin(theta);
-    this.set(
-      c,
-      -s,
-      0,
-      s,
-      c,
-      0,
-      0,
-      0,
-      1
-    );
-    return this;
+  return new Vector2(
+    p1.x + t * r.x,
+    p1.y + t * r.y
+  );
+}
+
+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)
+      });
+    }
   }
-  makeScale(x, y) {
-    this.set(
-      x,
-      0,
-      0,
-      0,
-      y,
-      0,
-      0,
-      0,
-      1
+  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 this;
   }
-  fromArray(array, offset = 0) {
-    for (let i = 0; i < 9; i++) {
-      this.elements[i] = array[i + offset];
-    }
-    return this;
+  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;
   }
-  clone() {
-    return new this.constructor().fromArray(this.elements);
+  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;
+      }
+      break;
+    case "turn":
+    case "em":
+    // div fontSize
+    case "rem":
+    // div fontSize
+    default:
+      result.normalizedIntValue = result.intValue;
+      break;
   }
+  return result;
 }
-const _m3 = /* @__PURE__ */ new Matrix3();
 
-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 cubicBezierP0(t, p) {
+  const k = 1 - t;
+  return k * k * k * p;
 }
-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;
+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;
+    }
   }
-  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 {
+    vertices,
+    indices
+  };
 }
 
-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 = "";
-  }
-  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);
+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;
         }
-        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;
+    } else if (d2 > FLT_EPSILON$1) {
+      if (d2 * d2 <= distanceTolerance * (dx * dx + dy * dy)) {
+        {
+          points.push(x1234, y1234);
+          return;
+        }
       }
-      if (RE$3.EXP.test(current)) {
-        state = EXP;
-        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) && number[number.length - 1] === ".") {
-        throwSyntaxError(current, i, result);
+    } else {
+      dx = x1234 - (x1 + x4) / 2;
+      dy = y1234 - (y1 + y4) / 2;
+      if (dx * dx + dy * dy <= distanceTolerance) {
+        points.push(x1234, y1234);
+        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$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 (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);
+  } else {
+    dx = x123 - (x1 + x3) / 2;
+    dy = y123 - (y1 + y3) / 2;
+    if (dx * dx + dy * dy <= distanceTolerance) {
+      points.push(x123, y123);
+      return;
     }
   }
-  newNumber();
-  return result;
+  recursive(points, x1, y1, x12, y12, x123, y123, distanceTolerance, level + 1);
+  recursive(points, x123, y123, x23, y23, x3, y3, distanceTolerance, level + 1);
 }
 
-function getReflection(a, b) {
-  return a - (b - a);
+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 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.copy(cmd);
-      }
-      path.moveTo(current.x, current.y);
-      control.copy(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.copy(current);
-    } else if (cmd.type === "v" || cmd.type === "V") {
-      if (cmd.type === "v") {
-        current.y += cmd.y;
-      } else {
-        current.y = cmd.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++;
+    } else {
+      if (yj <= py && cross(xj, yj, xi, yi, px, py) < 0)
+        wn--;
+    }
+  }
+  return wn;
+}
+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];
       }
-      path.lineTo(current.x, current.y);
-      control.copy(current);
-    } else if (cmd.type === "l" || cmd.type === "L") {
-      if (cmd.type === "l") {
-        current.add(cmd);
-      } else {
-        current.copy(cmd);
+      if (xAutoYMin[1] > y) {
+        xAutoYMin = [x, y];
       }
-      path.lineTo(current.x, current.y);
-      control.copy(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.copy(cmd);
+      if (xMaxYAuto[0] < x) {
+        xMaxYAuto = [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.copy(cmd);
+      if (xAutoYMax[1] < y) {
+        xAutoYMax = [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.copy(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];
       }
-    } 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.copy(cmd);
+      if (y > mid[1] && (!xMidYMaxDx || _dx < xMidYMaxDx)) {
+        xMidYMaxDx = _dx;
+        xMidYMax = [x, y];
       }
-    } 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.copy(cmd);
+      if (x < mid[0] && (!xMinYMidDy || _dy < xMinYMidDy)) {
+        xMinYMidDy = _dy;
+        xMinYMid = [x, y];
       }
-      control.copy(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.copy(path.startPoint);
+      if (x > mid[0] && (!xMaxYMidDy || _dy < xMaxYMidDy)) {
+        xMaxYMidDy = _dy;
+        xMaxYMid = [x, y];
       }
-      path.closePath();
-    } else {
-      console.warn("Unsupported commands", 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);
+      }
+      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])
+        });
+      }
+    }
+    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 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;
-    }
-  }
-  return data.join(" ");
+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 RE$2 = /[a-df-z][^a-df-z]*/gi;
-function svgPathDataToCommands(data) {
-  const commands = [];
-  const matched = data.match(RE$2);
-  if (!matched) {
-    return commands;
+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 };
   }
-  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);
-    }
+  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 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}`);
+  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];
     }
-    return doc.documentElement;
-  } else {
-    return svg;
+    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 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;
-      }
-    }
-  }
-  let scale;
-  {
-    scale = unitConversion[theUnit][defaultUnit];
-    if (scale < 0) {
-      scale = unitConversion[theUnit].in * defaultDPI;
+  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 scale * Number.parseFloat(string);
-}
-
-const tempTransform0$1 = new Matrix3();
-const tempTransform1$1 = new Matrix3();
-const tempTransform2$1 = new Matrix3();
-const tempTransform3 = new Matrix3();
-function getNodeTransform(node, currentTransform, transformStack) {
-  if (!(node.hasAttribute("transform") || node.nodeName === "use" && (node.hasAttribute("x") || node.hasAttribute("y")))) {
-    return null;
-  }
-  const transform = parseNodeTransform(node);
-  if (transformStack.length > 0) {
-    transform.premultiply(transformStack[transformStack.length - 1]);
-  }
-  currentTransform.copy(transform);
-  transformStack.push(transform);
-  return transform;
-}
-function parseNodeTransform(node) {
-  const transform = new Matrix3();
-  const currentTransform = tempTransform0$1;
-  if (node.nodeName === "use" && (node.hasAttribute("x") || node.hasAttribute("y"))) {
-    transform.translate(
-      parseFloatWithUnits(node.getAttribute("x")),
-      parseFloatWithUnits(node.getAttribute("y"))
-    );
-  }
-  if (node.hasAttribute("transform")) {
-    const transformsTexts = node.getAttribute("transform").split(")");
-    for (let tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex--) {
-      const transformText = transformsTexts[tIndex].trim();
-      if (transformText === "")
-        continue;
-      const openParPos = transformText.indexOf("(");
-      const closeParPos = transformText.length;
-      if (openParPos > 0 && openParPos < closeParPos) {
-        const transformType = transformText.slice(0, openParPos);
-        const array = parsePathDataArgs(transformText.slice(openParPos + 1));
-        currentTransform.identity();
-        switch (transformType) {
-          case "translate":
-            if (array.length >= 1) {
-              const tx = array[0];
-              let ty = 0;
-              if (array.length >= 2) {
-                ty = array[1];
-              }
-              currentTransform.translate(tx, ty);
-            }
-            break;
-          case "rotate":
-            if (array.length >= 1) {
-              let angle = 0;
-              let cx = 0;
-              let cy = 0;
-              angle = array[0] * Math.PI / 180;
-              if (array.length >= 3) {
-                cx = array[1];
-                cy = array[2];
-              }
-              tempTransform1$1.makeTranslation(-cx, -cy);
-              tempTransform2$1.makeRotation(angle);
-              tempTransform3.multiplyMatrices(tempTransform2$1, tempTransform1$1);
-              tempTransform1$1.makeTranslation(cx, cy);
-              currentTransform.multiplyMatrices(tempTransform1$1, tempTransform3);
-            }
-            break;
-          case "scale":
-            if (array.length >= 1) {
-              currentTransform.scale(
-                array[0],
-                array[1] ?? array[0]
-              );
-            }
-            break;
-          case "skewX":
-            if (array.length === 1) {
-              currentTransform.set(
-                1,
-                Math.tan(array[0] * Math.PI / 180),
-                0,
-                0,
-                1,
-                0,
-                0,
-                0,
-                1
-              );
-            }
-            break;
-          case "skewY":
-            if (array.length === 1) {
-              currentTransform.set(
-                1,
-                0,
-                0,
-                Math.tan(array[0] * Math.PI / 180),
-                1,
-                0,
-                0,
-                0,
-                1
-              );
-            }
-            break;
-          case "matrix":
-            if (array.length === 6) {
-              currentTransform.set(
-                array[0],
-                array[2],
-                array[4],
-                array[1],
-                array[3],
-                array[5],
-                0,
-                0,
-                1
-              );
-            }
-            break;
+  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
+        );
       }
-      transform.premultiply(currentTransform);
-    }
-  }
-  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);
+    const c1 = (-perpX + x0) * (-perpY + y1) - (-perpX + x1) * (-perpY + y0);
+    const c2 = (-perp1x + x2) * (-perp1y + y1) - (-perp1x + x1) * (-perp1y + y2);
+    const px = (dx0 * c2 - dx1 * c1) / cross;
+    const py = (dy1 * c1 - dy0 * c2) / cross;
+    const pDist = (px - x1) * (px - x1) + (py - y1) * (py - y1);
+    const imx = x1 + (px - x1) * innerWeight;
+    const imy = y1 + (py - y1) * innerWeight;
+    const omx = x1 - (px - x1) * outerWeight;
+    const omy = y1 - (py - y1) * outerWeight;
+    const smallerInsideSegmentSq = Math.min(dx0 * dx0 + dy0 * dy0, dx1 * dx1 + dy1 * dy1);
+    const insideWeight = clockwise ? innerWeight : outerWeight;
+    const smallerInsideDiagonalSq = smallerInsideSegmentSq + insideWeight * insideWeight * widthSquared;
+    const insideMiterOk = pDist <= smallerInsideDiagonalSq;
+    if (insideMiterOk) {
+      if (style.join === "bevel" || pDist / widthSquared > miterLimitSquared) {
+        if (clockwise) {
+          verts.push(imx, imy);
+          verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
+          verts.push(imx, imy);
+          verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
+        } else {
+          verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
+          verts.push(omx, omy);
+          verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
+          verts.push(omx, omy);
+        }
+        indexCount += 2;
+      } else if (style.join === "round") {
+        if (clockwise) {
+          verts.push(imx, imy);
+          verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
+          indexCount += round(
+            x1,
+            y1,
+            x1 + perpX * outerWeight,
+            y1 + perpY * outerWeight,
+            x1 + perp1x * outerWeight,
+            y1 + perp1y * outerWeight,
+            verts,
+            true
+          ) + 4;
+          verts.push(imx, imy);
+          verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
+        } else {
+          verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
+          verts.push(omx, omy);
+          indexCount += round(
+            x1,
+            y1,
+            x1 - perpX * innerWeight,
+            y1 - perpY * innerWeight,
+            x1 - perp1x * innerWeight,
+            y1 - perp1y * innerWeight,
+            verts,
+            false
+          ) + 4;
+          verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
+          verts.push(omx, omy);
+        }
+      } else {
+        verts.push(imx, imy);
+        verts.push(omx, omy);
+      }
     } else {
-      path.lineTo(x, y);
+      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;
     }
-    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
-    );
+  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);
+    }
   }
-  path.lineTo(x, y + ry);
-  if (rx !== 0 || ry !== 0) {
-    path.bezierCurveTo(x, y + ry * bci, x + rx * bci, y, x + rx, y);
+  const eps2 = curveEps * curveEps;
+  for (let i = indexStart; i < indexCount + indexStart - 2; ++i) {
+    x0 = verts[i * 2];
+    y0 = verts[i * 2 + 1];
+    x1 = verts[(i + 1) * 2];
+    y1 = verts[(i + 1) * 2 + 1];
+    x2 = verts[(i + 2) * 2];
+    y2 = verts[(i + 2) * 2 + 1];
+    if (Math.abs(x0 * (y1 - y2) + x1 * (y2 - y0) + x2 * (y0 - y1)) < eps2) {
+      continue;
+    }
+    indices.push(i, i + 1, i + 2);
   }
-  return path;
+  return {
+    vertices,
+    indices
+  };
 }
-
-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]}`]);
-    }
+function getOrientationOfPoints(points) {
+  const m = points.length;
+  if (m < 6) {
+    return 1;
   }
-  if (node.hasAttribute("id")) {
-    stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`#${node.getAttribute("id")}`]);
+  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;
   }
-  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;
+  if (area < 0) {
+    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]);
-  }
-  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)));
+  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);
+    }
+    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);
   }
-  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;
+  return segCount * 2;
 }
 
-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;
+class Transform2D {
+  constructor(a = 1, b = 0, c = 0, d = 1, tx = 0, ty = 0) {
+    this.a = a;
+    this.b = b;
+    this.c = c;
+    this.d = d;
+    this.tx = tx;
+    this.ty = ty;
+  }
+  _array;
+  set(a, b, c, d, tx, ty) {
+    this.a = a;
+    this.b = b;
+    this.c = c;
+    this.d = d;
+    this.tx = tx;
+    this.ty = ty;
+    return this;
+  }
+  append(t2d) {
+    const a1 = this.a;
+    const b1 = this.b;
+    const c1 = this.c;
+    const d1 = this.d;
+    this.a = t2d.a * a1 + t2d.b * c1;
+    this.b = t2d.a * b1 + t2d.b * d1;
+    this.c = t2d.c * a1 + t2d.d * c1;
+    this.d = t2d.c * b1 + t2d.d * d1;
+    this.tx = t2d.tx * a1 + t2d.ty * c1 + this.tx;
+    this.ty = t2d.tx * b1 + t2d.ty * d1 + this.ty;
+    return this;
+  }
+  appendFrom(a, b) {
+    const a1 = a.a;
+    const b1 = a.b;
+    const c1 = a.c;
+    const d1 = a.d;
+    const tx = a.tx;
+    const ty = a.ty;
+    const a2 = b.a;
+    const b2 = b.b;
+    const c2 = b.c;
+    const d2 = b.d;
+    this.a = a1 * a2 + b1 * c2;
+    this.b = a1 * b2 + b1 * d2;
+    this.c = c1 * a2 + d1 * c2;
+    this.d = c1 * b2 + d1 * d2;
+    this.tx = tx * a2 + ty * c2 + b.tx;
+    this.ty = tx * b2 + ty * d2 + b.ty;
+    return this;
+  }
+  setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) {
+    this.a = Math.cos(rotation + skewY) * scaleX;
+    this.b = Math.sin(rotation + skewY) * scaleX;
+    this.c = -Math.sin(rotation - skewX) * scaleY;
+    this.d = Math.cos(rotation - skewX) * scaleY;
+    this.tx = x - (pivotX * this.a + pivotY * this.c);
+    this.ty = y - (pivotX * this.b + pivotY * this.d);
+    return this;
+  }
+  prepend(t2d) {
+    const tx1 = this.tx;
+    if (t2d.a !== 1 || t2d.b !== 0 || t2d.c !== 0 || t2d.d !== 1) {
+      const a1 = this.a;
+      const c1 = this.c;
+      this.a = a1 * t2d.a + this.b * t2d.c;
+      this.b = a1 * t2d.b + this.b * t2d.d;
+      this.c = c1 * t2d.a + this.d * t2d.c;
+      this.d = c1 * t2d.b + this.d * t2d.d;
     }
-    default:
-      console.warn(node);
-      break;
+    this.tx = tx1 * t2d.a + this.ty * t2d.c + t2d.tx;
+    this.ty = tx1 * t2d.b + this.ty * t2d.d + t2d.ty;
+    return this;
   }
-  if (_style.display === "none") {
-    return paths;
+  _skewX;
+  _skewY;
+  _skewXTan = 1;
+  _skewYTan = 1;
+  skewX(x) {
+    return this.skew(x, 0);
   }
-  const currentTransform = new Matrix3();
-  const transformStack = [];
-  const transform = getNodeTransform(node, currentTransform, transformStack);
-  if (path) {
-    path.applyTransform(currentTransform);
-    paths.push(path);
-    path.style = { ..._style };
+  skewY(y) {
+    return this.skew(0, y);
   }
-  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);
+  skew(x, y) {
+    if (x !== this._skewX) {
+      this._skewX = x;
+      this._skewXTan = Math.tan(x);
+    }
+    if (y !== this._skewY) {
+      this._skewY = y;
+      this._skewYTan = Math.tan(y);
+    }
+    this.b *= this._skewXTan;
+    this.c *= this._skewYTan;
+    return this;
   }
-  if (transform) {
-    transformStack.pop();
-    if (transformStack.length > 0) {
-      currentTransform.copy(transformStack[transformStack.length - 1]);
+  translateX(x) {
+    return this.translate(x, 0);
+  }
+  translateY(y) {
+    return this.translate(0, y);
+  }
+  translateZ(z) {
+    return this.translate(0, 0, z);
+  }
+  translate3d(x, y, z) {
+    return this.translate(x, y, z);
+  }
+  translate(x, y, _z = 0) {
+    this.tx += x;
+    this.ty += y;
+    return this;
+  }
+  scaleX(x) {
+    return this.scale(x, 1);
+  }
+  scaleY(y) {
+    return this.scale(1, y);
+  }
+  scale3d(x, y, z = 1) {
+    return this.scale(x, y, z);
+  }
+  scale(x, y, _z = 1) {
+    this.a *= x;
+    this.d *= y;
+    this.c *= x;
+    this.b *= y;
+    this.tx *= x;
+    this.ty *= y;
+    return this;
+  }
+  rotateX(x) {
+    return this.scaleY(this._rotateToScale(x));
+  }
+  rotateY(y) {
+    return this.scaleX(this._rotateToScale(y));
+  }
+  rotateZ(z) {
+    return this.rotate(z);
+  }
+  rotate(angle) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const a1 = this.a;
+    const c1 = this.c;
+    const tx1 = this.tx;
+    this.a = a1 * cos - this.b * sin;
+    this.b = a1 * sin + this.b * cos;
+    this.c = c1 * cos - this.d * sin;
+    this.d = c1 * sin + this.d * cos;
+    this.tx = tx1 * cos - this.ty * sin;
+    this.ty = tx1 * sin + this.ty * cos;
+    return this;
+  }
+  rotate3d(x, y, z, rad) {
+    const [rx, ry, rz] = this._rotate3d(x, y, z, rad);
+    rx && this.rotateX(rx);
+    ry && this.rotateY(ry);
+    rz && this.rotateZ(rz);
+    return this;
+  }
+  _rotateToScale(rad) {
+    const val = rad / PI_2;
+    return val <= 0.5 ? val * -4 + 1 : (val - 1) * 4 + 1;
+  }
+  _rotate3d(x, y, z, rad) {
+    if (x === 1 && y === 0 && z === 0) {
+      return [rad, 0, 0];
+    } else if (x === 0 && y === 1 && z === 0) {
+      return [0, rad, 0];
+    } else if (x === 0 && y === 0) {
+      return [0, 0, rad];
     } else {
-      currentTransform.identity();
+      const cos = Math.cos(rad);
+      const sin = Math.sin(rad);
+      const m11 = cos + x * x * (1 - cos);
+      const m12 = x * y * (1 - cos) - z * sin;
+      const m13 = x * z * (1 - cos) + y * sin;
+      const m22 = cos + y * y * (1 - cos);
+      const m23 = y * z * (1 - cos) - x * sin;
+      const m33 = cos + z * z * (1 - cos);
+      const rotateX = -Math.atan2(-m23, m22);
+      const rotateY = -Math.atan2(m13, Math.sqrt(m23 * m23 + m33 * m33));
+      const rotateZ = -Math.atan2(-m12, m11);
+      return [rotateX, rotateY, rotateZ];
     }
   }
-  return paths;
+  decompose(pivot = { x: 0, y: 0 }, output = {
+    position: { x: 0, y: 0 },
+    scale: { x: 0, y: 0 },
+    skew: { x: 0, y: 0 },
+    rotation: 0
+  }) {
+    const { a, b, c, d, tx, ty } = this;
+    const skewX = -Math.atan2(-c, d);
+    const skewY = Math.atan2(b, a);
+    const delta = Math.abs(skewX + skewY);
+    if (delta < 1e-5 || Math.abs(PI_2 - delta) < 1e-5) {
+      output.rotation = skewY;
+      output.skew.x = output.skew.y = 0;
+    } else {
+      output.rotation = 0;
+      output.skew.x = skewX;
+      output.skew.y = skewY;
+    }
+    output.scale.x = Math.sqrt(a * a + b * b);
+    output.scale.y = Math.sqrt(c * c + d * d);
+    output.position.x = tx + (pivot.x * a + pivot.y * c);
+    output.position.y = ty + (pivot.x * b + pivot.y * d);
+    return output;
+  }
+  apply(pos, newPos) {
+    newPos = newPos || new Vector2();
+    const { x, y } = pos;
+    newPos.x = this.a * x + this.c * y + this.tx;
+    newPos.y = this.b * x + this.d * y + this.ty;
+    return newPos;
+  }
+  affineInvert() {
+    const a1 = this.a;
+    const b1 = this.b;
+    const c1 = this.c;
+    const d1 = this.d;
+    const tx1 = this.tx;
+    const n = a1 * d1 - b1 * c1;
+    this.a = d1 / n;
+    this.b = -b1 / n;
+    this.c = -c1 / n;
+    this.d = a1 / n;
+    this.tx = (c1 * this.ty - d1 * tx1) / n;
+    this.ty = -(a1 * this.ty - b1 * tx1) / n;
+    return this;
+  }
+  affineInverse() {
+    return this.clone().affineInvert();
+  }
+  applyAffineInverse(pos, newPos) {
+    newPos = newPos || new Vector2();
+    const { a, b, c, d, tx, ty } = this;
+    const id = 1 / (a * d + c * -b);
+    const x = pos.x;
+    const y = pos.y;
+    newPos.x = d * id * x + -c * id * y + (ty * c - tx * d) * id;
+    newPos.y = a * id * y + -b * id * x + (-ty * a + tx * b) * id;
+    return newPos;
+  }
+  identity() {
+    this.a = 1;
+    this.b = 0;
+    this.c = 0;
+    this.d = 1;
+    this.tx = 0;
+    this.ty = 0;
+    return this;
+  }
+  isIdentity() {
+    const { a, b, c, d, tx, ty } = this;
+    return a === 1 && b === 0 && c === 0 && d === 1 && tx === 0 && ty === 0;
+  }
+  copyTo(t2d) {
+    t2d.a = this.a;
+    t2d.b = this.b;
+    t2d.c = this.c;
+    t2d.d = this.d;
+    t2d.tx = this.tx;
+    t2d.ty = this.ty;
+    return t2d;
+  }
+  copyFrom(t2d) {
+    this.a = t2d.a;
+    this.b = t2d.b;
+    this.c = t2d.c;
+    this.d = t2d.d;
+    this.tx = t2d.tx;
+    this.ty = t2d.ty;
+    return this;
+  }
+  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, 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(output);
+    return this;
+  }
+  clone() {
+    return new Transform2D(this.a, this.b, this.c, this.d, this.tx, this.ty);
+  }
+  toArray(transpose, out) {
+    if (!this._array) {
+      this._array = new Float32Array(9);
+    }
+    const array = out || this._array;
+    if (transpose) {
+      array[0] = this.a;
+      array[1] = this.b;
+      array[2] = 0;
+      array[3] = this.c;
+      array[4] = this.d;
+      array[5] = 0;
+      array[6] = this.tx;
+      array[7] = this.ty;
+      array[8] = 1;
+    } else {
+      array[0] = this.a;
+      array[1] = this.c;
+      array[2] = this.tx;
+      array[3] = this.b;
+      array[4] = this.d;
+      array[5] = this.ty;
+      array[6] = 0;
+      array[7] = 0;
+      array[8] = 1;
+    }
+    return array;
+  }
+  toString() {
+    return `[Transform2D a=${this.a} b=${this.b} c=${this.c} d=${this.d} tx=${this.tx} ty=${this.ty}]`;
+  }
+  destroy() {
+    this._array = void 0;
+  }
 }
 
-function svgToPath2DSet(svg) {
-  const dom = svgToDom(svg);
-  return new Path2DSet(
-    parseNode(dom, {}),
-    dom.getAttribute("viewBox")?.trim().split(" ").map((v) => Number(v))
-  );
+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 cubicBezierP0(t, p) {
-  const k = 1 - t;
-  return k * k * k * p;
-}
-function cubicBezierP1(t, p) {
-  const k = 1 - t;
-  return 3 * k * k * t * p;
-}
-function cubicBezierP2(t, p) {
-  return 3 * (1 - t) * t * t * p;
-}
-function cubicBezierP3(t, p) {
-  return t * t * t * p;
-}
-function cubicBezier(t, p0, p1, p2, p3) {
-  return cubicBezierP0(t, p0) + cubicBezierP1(t, p1) + cubicBezierP2(t, p2) + cubicBezierP3(t, p3);
+function 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;
       }
-    } else {
-      dx = x1234 - (x1 + x4) / 2;
-      dy = y1234 - (y1 + y4) / 2;
-      if (dx * dx + dy * dy <= distanceTolerance) {
-        points.push(x1234, y1234);
-        return;
+      if (RE$3.COMMA.test(current)) {
+        if (seenComma) {
+          throwSyntaxError(current, i, result);
+        }
+        seenComma = true;
       }
     }
-  }
-  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 === 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);
       }
     }
-  } else {
-    dx = x123 - (x1 + x3) / 2;
-    dy = y123 - (y1 + y3) / 2;
-    if (dx * dx + dy * dy <= distanceTolerance) {
-      points.push(x123, y123);
-      return;
-    }
-  }
-  recursive(points, x1, y1, x12, y12, x123, y123, distanceTolerance, level + 1);
-  recursive(points, x123, y123, x23, y23, x3, y3, distanceTolerance, level + 1);
-}
-
-function getDirectedArea(vertices) {
-  let area = 0;
-  const n = vertices.length;
-  for (let i = 0; i < n; i += 2) {
-    const x0 = vertices[i];
-    const y0 = vertices[i + 1];
-    const x1 = vertices[(i + 2) % (n - 1)];
-    const y1 = vertices[(i + 3) % n];
-    area += x0 * y1 - x1 * y0;
-  }
-  return area / 2;
-}
-
-function 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++;
-    } else {
-      if (yj <= py && cross(xj, yj, xi, yi, px, py) < 0)
-        wn--;
-    }
-  }
-  return wn;
-}
-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];
-      }
-    }
-    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 (state === FLOAT) {
+      if (RE$3.DIGIT.test(current)) {
+        number += current;
+        continue;
       }
-      if (x < mid[0] && (!xMinYMidDy || _dy < xMinYMidDy)) {
-        xMinYMidDy = _dy;
-        xMinYMid = [x, y];
+      if (RE$3.EXP.test(current)) {
+        state = EXP;
+        continue;
       }
-      if (x > mid[0] && (!xMaxYMidDy || _dy < xMaxYMidDy)) {
-        xMaxYMidDy = _dy;
-        xMaxYMid = [x, y];
+      if (RE$3.POINT.test(current) && number[number.length - 1] === ".") {
+        throwSyntaxError(current, i, result);
       }
     }
-    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)
+    if (state === EXP) {
+      if (RE$3.DIGIT.test(current)) {
+        exponent += current;
         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])
-        });
+      if (RE$3.SIGN.test(current)) {
+        if (exponent === "") {
+          exponent += current;
+          continue;
+        }
+        if (exponent.length === 1 && RE$3.SIGN.test(exponent)) {
+          throwSyntaxError(current, i, result);
+        }
       }
     }
-    if (_results.reduce((total, item) => total + item.winding, 0) !== 0) {
-      _results.sort((a, b) => a.dist - b.dist);
-      results[i] = _results[0];
+    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);
     }
   }
-  return results;
+  newNumber();
+  return result;
 }
 
-function quadraticBezierP0(t, p) {
-  const k = 1 - t;
-  return k * k * p;
-}
-function quadraticBezierP1(t, p) {
-  return 2 * (1 - t) * t * p;
-}
-function quadraticBezierP2(t, p) {
-  return t * t * p;
-}
-function quadraticBezier(t, p0, p1, p2) {
-  return quadraticBezierP0(t, p0) + quadraticBezierP1(t, p1) + quadraticBezierP2(t, p2);
+function getReflection(a, b) {
+  return a - (b - a);
 }
-
-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 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);
+      }
+    } 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);
+      }
+      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);
+      }
+      path.closePath();
+    } else {
+      console.warn("Unsupported commands", cmd);
+    }
+  }
+}
+
+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;
+    }
+  }
+  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;
+  }
+  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);
     }
-    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 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;
   }
-  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
-        );
+}
+
+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;
       }
+    }
+  }
+  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);
     }
-    const c1 = (-perpX + x0) * (-perpY + y1) - (-perpX + x1) * (-perpY + y0);
-    const c2 = (-perp1x + x2) * (-perp1y + y1) - (-perp1x + x1) * (-perp1y + y2);
-    const px = (dx0 * c2 - dx1 * c1) / cross;
-    const py = (dy1 * c1 - dy0 * c2) / cross;
-    const pDist = (px - x1) * (px - x1) + (py - y1) * (py - y1);
-    const imx = x1 + (px - x1) * innerWeight;
-    const imy = y1 + (py - y1) * innerWeight;
-    const omx = x1 - (px - x1) * outerWeight;
-    const omy = y1 - (py - y1) * outerWeight;
-    const smallerInsideSegmentSq = Math.min(dx0 * dx0 + dy0 * dy0, dx1 * dx1 + dy1 * dy1);
-    const insideWeight = clockwise ? innerWeight : outerWeight;
-    const smallerInsideDiagonalSq = smallerInsideSegmentSq + insideWeight * insideWeight * widthSquared;
-    const insideMiterOk = pDist <= smallerInsideDiagonalSq;
-    if (insideMiterOk) {
-      if (style.join === "bevel" || pDist / widthSquared > miterLimitSquared) {
-        if (clockwise) {
-          verts.push(imx, imy);
-          verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
-          verts.push(imx, imy);
-          verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
-        } else {
-          verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
-          verts.push(omx, omy);
-          verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
-          verts.push(omx, omy);
-        }
-        indexCount += 2;
-      } else if (style.join === "round") {
-        if (clockwise) {
-          verts.push(imx, imy);
-          verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
-          indexCount += round(
-            x1,
-            y1,
-            x1 + perpX * outerWeight,
-            y1 + perpY * outerWeight,
-            x1 + perp1x * outerWeight,
-            y1 + perp1y * outerWeight,
-            verts,
-            true
-          ) + 4;
-          verts.push(imx, imy);
-          verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
-        } else {
-          verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
-          verts.push(omx, omy);
-          indexCount += round(
-            x1,
-            y1,
-            x1 - perpX * innerWeight,
-            y1 - perpY * innerWeight,
-            x1 - perp1x * innerWeight,
-            y1 - perp1y * innerWeight,
-            verts,
-            false
-          ) + 4;
-          verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
-          verts.push(omx, omy);
-        }
-      } else {
-        verts.push(imx, imy);
-        verts.push(omx, omy);
-      }
-    } else {
-      verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
-      verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
-      if (style.join === "round") {
-        if (clockwise) {
-          indexCount += round(
-            x1,
-            y1,
-            x1 + perpX * outerWeight,
-            y1 + perpY * outerWeight,
-            x1 + perp1x * outerWeight,
-            y1 + perp1y * outerWeight,
-            verts,
-            true
-          ) + 2;
-        } else {
-          indexCount += round(
-            x1,
-            y1,
-            x1 - perpX * innerWeight,
-            y1 - perpY * innerWeight,
-            x1 - perp1x * innerWeight,
-            y1 - perp1y * innerWeight,
-            verts,
-            false
-          ) + 2;
-        }
-      } else if (style.join === "miter" && pDist / widthSquared <= miterLimitSquared) {
-        if (clockwise) {
-          verts.push(omx, omy);
-          verts.push(omx, omy);
-        } else {
-          verts.push(imx, imy);
-          verts.push(imx, imy);
-        }
-        indexCount += 2;
-      }
-      verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
-      verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
-      indexCount += 2;
+    for (let j = 0; j < selectorList.length; j++) {
+      stylesheets[selectorList[j]] = Object.assign(
+        stylesheets[selectorList[j]] || {},
+        { ...definitions }
+      );
     }
   }
-  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);
+}
+
+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
+    );
   }
-  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);
+  path.lineTo(x, y + ry);
+  if (rx !== 0 || ry !== 0) {
+    path.bezierCurveTo(x, y + ry * bci, x + rx * bci, y, x + rx, y);
   }
-  return {
-    vertices,
-    indices
-  };
+  return path;
 }
-function getOrientationOfPoints(points) {
-  const m = points.length;
-  if (m < 6) {
-    return 1;
+
+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]}`]);
+    }
   }
-  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 (node.hasAttribute("id")) {
+    stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`#${node.getAttribute("id")}`]);
   }
-  if (area < 0) {
-    return -1;
+  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 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 addStyle(svgName, jsName, adjustFunction = copy) {
+    if (node.hasAttribute(svgName))
+      style[jsName] = adjustFunction(node.getAttribute(svgName));
+    if (stylesheetStyles[svgName])
+      style[jsName] = adjustFunction(stylesheetStyles[svgName]);
   }
-  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 copy(v) {
+    if (v.startsWith("url"))
+      console.warn("url access in attributes is not implemented.");
+    return v;
   }
-  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);
+  function clamp(v) {
+    return Math.max(0, Math.min(1, parseFloatWithUnits(v)));
+  }
+  function positive(v) {
+    return Math.max(0, parseFloatWithUnits(v));
+  }
+  function array(v) {
+    return v.split(" ").filter((v2) => v2 !== "").map((v2) => parseFloatWithUnits(v2));
+  }
+  addStyle("fill", "fill");
+  addStyle("fill-opacity", "fillOpacity", clamp);
+  addStyle("fill-rule", "fillRule");
+  addStyle("opacity", "opacity", clamp);
+  addStyle("stroke", "stroke");
+  addStyle("stroke-opacity", "strokeOpacity", clamp);
+  addStyle("stroke-width", "strokeWidth", positive);
+  addStyle("stroke-linecap", "strokeLinecap");
+  addStyle("stroke-linejoin", "strokeLinejoin");
+  addStyle("stroke-miterlimit", "strokeMiterlimit", positive);
+  addStyle("stroke-dasharray", "strokeDasharray", array);
+  addStyle("stroke-dashoffset", "strokeDashoffset", parseFloatWithUnits);
+  addStyle("visibility", "visibility");
+  return style;
+}
+
+function parseNode(node, style, paths = [], stylesheets = {}) {
+  if (node.nodeType !== 1)
+    return paths;
+  let isDefsNode = false;
+  let path = null;
+  let _style = { ...style };
+  switch (node.nodeName) {
+    case "svg":
+      _style = parseStyle(node, _style, stylesheets);
+      break;
+    case "style":
+      parseCSSStylesheet(node, stylesheets);
+      break;
+    case "g":
+      _style = parseStyle(node, _style, stylesheets);
+      break;
+    case "path":
+      _style = parseStyle(node, _style, stylesheets);
+      if (node.hasAttribute("d"))
+        path = parsePathNode(node);
+      break;
+    case "rect":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parseRectNode(node);
+      break;
+    case "polygon":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parsePolygonNode(node);
+      break;
+    case "polyline":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parsePolylineNode(node);
+      break;
+    case "circle":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parseCircleNode(node);
+      break;
+    case "ellipse":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parseEllipseNode(node);
+      break;
+    case "line":
+      _style = parseStyle(node, _style, stylesheets);
+      path = parseLineNode(node);
+      break;
+    case "defs":
+      isDefsNode = true;
+      break;
+    case "use": {
+      _style = parseStyle(node, _style, stylesheets);
+      const href = node.getAttributeNS("http://www.w3.org/1999/xlink", "href") || node.getAttribute("href") || "";
+      const usedNodeId = href.substring(1);
+      const usedNode = node.viewportElement?.getElementById(usedNodeId);
+      if (usedNode) {
+        parseNode(usedNode, _style, paths, stylesheets);
+      } else {
+        console.warn(`'use node' references non-existent node id: ${usedNodeId}`);
+      }
+      break;
     }
-    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 {
@@ -2294,7 +2508,7 @@ class Curve {
       if (isFunction) {
         transform(p);
       } else {
-        p.applyMatrix3(transform);
+        transform.apply(p, p);
       }
     });
     return this;
@@ -2409,7 +2623,7 @@ class Curve {
     const delta = 1e-4;
     const t1 = Math.max(0, t - delta);
     const t2 = Math.min(1, t + delta);
-    return output.copy(this.getPoint(t2).sub(this.getPoint(t1)).normalize());
+    return output.copyFrom(this.getPoint(t2).sub(this.getPoint(t1)).normalize());
   }
   getTangentAt(u, output) {
     return this.getTangent(this.getUToTMapping(u), output);
@@ -2444,8 +2658,8 @@ class Curve {
     const potins = this.getPoints();
     for (let i = 0, len = potins.length; i < len; i++) {
       const p = potins[i];
-      min.min(p);
-      max.max(p);
+      min.clampMin(p);
+      max.clampMax(p);
     }
     return { min: min.finite(), max: max.finite() };
   }
@@ -2497,18 +2711,18 @@ class Curve {
     });
     return this;
   }
-  copy(source) {
+  copyFrom(source) {
     this.arcLengthDivision = source.arcLengthDivision;
     return this;
   }
   clone() {
-    return new this.constructor().copy(this);
+    return new this.constructor().copyFrom(this);
   }
 }
 
-const tempTransform0 = new Matrix3();
-const tempTransform1 = new Matrix3();
-const tempTransform2 = new Matrix3();
+const tempTransform0 = new Transform2D();
+const tempTransform1 = new Transform2D();
+const tempTransform2 = new Transform2D();
 const tempV2 = new Vector2();
 class RoundCurve extends Curve {
   constructor(_center = new Vector2(), _radius = new Vector2(), _diff = new Vector2(), rotate = 0, startAngle = 0, endAngle = Math.PI * 2, clockwise = false) {
@@ -2627,15 +2841,15 @@ class RoundCurve extends Curve {
     );
     return this;
   }
-  applyTransform(matrix) {
+  applyTransform(transform) {
     tempV2.set(this.cx, this.cy);
-    tempV2.applyMatrix3(matrix);
+    transform.apply(tempV2, tempV2);
     this.cx = tempV2.x;
     this.cy = tempV2.y;
-    if (isTransformSkewed(matrix)) {
-      transfEllipseGeneric(this, matrix);
+    if (isTransformSkewed(transform)) {
+      transfEllipseGeneric(this, transform);
     } else {
-      transfEllipseNoSkew(this, matrix);
+      transfEllipseNoSkew(this, transform);
     }
     return this;
   }
@@ -2762,8 +2976,8 @@ class RoundCurve extends Curve {
     }
     return this._getAdaptiveVerticesByArc(output);
   }
-  copy(source) {
-    super.copy(source);
+  copyFrom(source) {
+    super.copyFrom(source);
     this.cx = source.cx;
     this.cy = source.cy;
     this.rx = source.rx;
@@ -2784,24 +2998,17 @@ function transfEllipseGeneric(curve, m) {
   const sinTheta = Math.sin(curve.rotate);
   const v1 = new Vector2(a * cosTheta, a * sinTheta);
   const v2 = new Vector2(-b * sinTheta, b * cosTheta);
-  const f1 = v1.applyMatrix3(m);
-  const f2 = v2.applyMatrix3(m);
-  const mF = tempTransform0.set(
-    f1.x,
-    f2.x,
-    0,
-    f1.y,
-    f2.y,
-    0,
-    0,
-    0,
-    1
-  );
-  const mFInv = tempTransform1.copy(mF).invert();
-  const mFInvT = tempTransform2.copy(mFInv).transpose();
-  const mQ = mFInvT.multiply(mFInv);
-  const mQe = mQ.elements;
-  const ed = eigenDecomposition(mQe[0], mQe[1], mQe[4]);
+  const f1x = m.a * v1.x + m.c * v1.y;
+  const f1y = m.b * v1.x + m.d * v1.y;
+  const f2x = m.a * v2.x + m.c * v2.y;
+  const f2y = m.b * v2.x + m.d * v2.y;
+  const mF = tempTransform0.set(f1x, f1y, f2x, f2y, 0, 0);
+  const mFInv = tempTransform1.copyFrom(mF).affineInvert();
+  const { a: ia, b: ib, c: ic, d: id } = mFInv;
+  const qA = ia * ia + ib * ib;
+  const qB = ic * ia + id * ib;
+  const qD = ic * ic + id * id;
+  const ed = eigenDecomposition(qA, qB, qD);
   const rt1sqrt = Math.sqrt(ed.rt1);
   const rt2sqrt = Math.sqrt(ed.rt2);
   curve.rx = 1 / rt1sqrt;
@@ -2813,27 +3020,21 @@ function transfEllipseGeneric(curve, m) {
       rt1sqrt,
       0,
       0,
-      0,
       rt2sqrt,
       0,
-      0,
-      0,
-      1
+      0
     );
     const mRT = tempTransform2.set(
       ed.cs,
       ed.sn,
-      0,
       -ed.sn,
       ed.cs,
       0,
-      0,
-      0,
-      1
+      0
     );
-    const mDRF = mDsqrt.multiply(mRT).multiply(mF);
+    const mDRF = mDsqrt.append(mRT).append(mF);
     const transformAngle = (phi) => {
-      const { x: cosR, y: sinR } = new Vector2(Math.cos(phi), Math.sin(phi)).applyMatrix3(mDRF);
+      const { x: cosR, y: sinR } = mDRF.apply({ x: Math.cos(phi), y: Math.sin(phi) });
       return Math.atan2(sinR, cosR);
     };
     curve.startAngle = transformAngle(curve.startAngle);
@@ -2844,11 +3045,10 @@ function transfEllipseGeneric(curve, m) {
   }
 }
 function transfEllipseNoSkew(curve, m) {
-  const sx = getTransformScaleX(m);
-  const sy = getTransformScaleY(m);
-  curve.rx *= sx;
-  curve.ry *= sy;
-  const theta = sx > Number.EPSILON ? Math.atan2(m.elements[1], m.elements[0]) : Math.atan2(-m.elements[3], m.elements[4]);
+  const { scale } = m.decompose();
+  curve.rx *= scale.x;
+  curve.ry *= scale.y;
+  const theta = scale.x > Number.EPSILON ? Math.atan2(m.b, m.a) : Math.atan2(-m.c, m.d);
   curve.rotate += theta;
   if (isTransformFlipped(m)) {
     curve.startAngle *= -1;
@@ -2857,25 +3057,14 @@ function transfEllipseNoSkew(curve, m) {
   }
 }
 function isTransformFlipped(m) {
-  const te = m.elements;
-  return te[0] * te[4] - te[1] * te[3] < 0;
+  return m.a * m.d - m.c * m.b < 0;
 }
 function isTransformSkewed(m) {
-  const te = m.elements;
-  const basisDot = te[0] * te[3] + te[1] * te[4];
+  const basisDot = m.a * m.c + m.b * m.d;
   if (basisDot === 0)
     return false;
-  const sx = getTransformScaleX(m);
-  const sy = getTransformScaleY(m);
-  return Math.abs(basisDot / (sx * sy)) > Number.EPSILON;
-}
-function getTransformScaleX(m) {
-  const te = m.elements;
-  return Math.sqrt(te[0] * te[0] + te[1] * te[1]);
-}
-function getTransformScaleY(m) {
-  const te = m.elements;
-  return Math.sqrt(te[3] * te[3] + te[4] * te[4]);
+  const { scale } = m.decompose();
+  return Math.abs(basisDot / (scale.x * scale.y)) > Number.EPSILON;
 }
 function eigenDecomposition(A, B, C) {
   let rt1, rt2, cs, sn, t;
@@ -2957,9 +3146,9 @@ class LineCurve extends Curve {
   }
   getPoint(t, output = new Vector2()) {
     if (t === 1) {
-      output.copy(this.p2);
+      output.copyFrom(this.p2);
     } else {
-      output.copy(this.p2).sub(this.p1).scale(t).add(this.p1);
+      output.copyFrom(this.p2).sub(this.p1).scale(t).add(this.p1);
     }
     return output;
   }
@@ -3025,10 +3214,10 @@ class LineCurve extends Curve {
     ctx.lineTo(p2.x, p2.y);
     return this;
   }
-  copy(source) {
-    super.copy(source);
-    this.p1.copy(source.p1);
-    this.p2.copy(source.p2);
+  copyFrom(source) {
+    super.copyFrom(source);
+    this.p1.copyFrom(source.p1);
+    this.p2.copyFrom(source.p2);
     return this;
   }
 }
@@ -3167,8 +3356,8 @@ class CompositeCurve extends Curve {
     this.curves.forEach((curve) => curve.drawTo(ctx));
     return this;
   }
-  copy(source) {
-    super.copy(source);
+  copyFrom(source) {
+    super.copyFrom(source);
     this.curves = source.curves.map((curve) => curve.clone());
     return this;
   }
@@ -3265,12 +3454,12 @@ class CubicBezierCurve extends Curve {
     ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, p2.x, p2.y);
     return this;
   }
-  copy(source) {
-    super.copy(source);
-    this.p1.copy(source.p1);
-    this.cp1.copy(source.cp1);
-    this.cp2.copy(source.cp2);
-    this.p2.copy(source.p2);
+  copyFrom(source) {
+    super.copyFrom(source);
+    this.p1.copyFrom(source.p1);
+    this.cp1.copyFrom(source.cp1);
+    this.cp2.copyFrom(source.cp2);
+    this.p2.copyFrom(source.p2);
     return this;
   }
 }
@@ -3339,8 +3528,8 @@ class EquilateralPloygonCurve extends PloygonCurve {
     this.curves = curves;
     return this;
   }
-  copy(source) {
-    super.copy(source);
+  copyFrom(source) {
+    super.copyFrom(source);
     this.cx = source.cx;
     this.cy = source.cy;
     this.radius = source.radius;
@@ -3412,11 +3601,11 @@ class QuadraticBezierCurve extends Curve {
     ctx.quadraticCurveTo(cp.x, cp.y, p2.x, p2.y);
     return this;
   }
-  copy(source) {
-    super.copy(source);
-    this.p1.copy(source.p1);
-    this.cp.copy(source.cp);
-    this.p2.copy(source.p2);
+  copyFrom(source) {
+    super.copyFrom(source);
+    this.p1.copyFrom(source.p1);
+    this.cp.copyFrom(source.cp);
+    this.p2.copyFrom(source.p2);
     return this;
   }
 }
@@ -3463,8 +3652,8 @@ class RectangleCurve extends PloygonCurve {
       y + height
     ];
   }
-  copy(source) {
-    super.copy(source);
+  copyFrom(source) {
+    super.copyFrom(source);
     this.x = source.x;
     this.y = source.y;
     this.width = source.width;
@@ -3502,8 +3691,8 @@ class RoundRectangleCurve extends RoundCurve {
     ctx.roundRect(x, y, width, height, radius);
     return this;
   }
-  copy(source) {
-    super.copy(source);
+  copyFrom(source) {
+    super.copyFrom(source);
     this.x = source.x;
     this.y = source.y;
     this.width = source.width;
@@ -3537,8 +3726,8 @@ class SplineCurve extends Curve {
   getControlPointRefs() {
     return this.points;
   }
-  copy(source) {
-    super.copy(source);
+  copyFrom(source) {
+    super.copyFrom(source);
     this.points = [];
     for (let i = 0, len = source.points.length; i < len; i++) {
       this.points.push(source.points[i].clone());
@@ -3621,7 +3810,7 @@ class CurvePath extends CompositeCurve {
       const end = this.currentPoint;
       if (end && !start.equals(end)) {
         this.curves.push(new LineCurve(end.clone(), start.clone()));
-        end.copy(start);
+        end.copyFrom(start);
       }
       this.startPoint = void 0;
     }
@@ -3762,8 +3951,8 @@ class CurvePath extends CompositeCurve {
     }
     return this;
   }
-  copy(source) {
-    super.copy(source);
+  copyFrom(source) {
+    super.copyFrom(source);
     this.autoClose = source.autoClose;
     this.currentPoint = source.currentPoint?.clone();
     return this;
@@ -3957,8 +4146,8 @@ class Path2D extends CompositeCurve {
           pointsB[1] ?? pointsB[0]
         );
         if (point) {
-          pointsA[pointsA.length - 1].copy(point);
-          pointsB[0].copy(point);
+          pointsA[pointsA.length - 1].copyFrom(point);
+          pointsB[0].copyFrom(point);
         }
       });
     });
@@ -3989,8 +4178,8 @@ class Path2D extends CompositeCurve {
               point.clone().add({ x: -halfStrokeWidth, y: -halfStrokeWidth })
             );
           }
-          min.min(...points);
-          max.max(...points);
+          min.clampMin(...points);
+          max.clampMax(...points);
         }
       }
     });
@@ -4128,8 +4317,8 @@ class Path2D extends CompositeCurve {
     }
     return `<path d="${this.toData()}" style="${cssText}"></path>`;
   }
-  copy(source) {
-    super.copy(source);
+  copyFrom(source) {
+    super.copyFrom(source);
     this.currentCurve = source.currentCurve.clone();
     this.style = { ...source.style };
     return this;
@@ -4296,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, Matrix3, Path2D, Path2DSet, PloygonCurve, QuadraticBezierCurve, RectangleCurve, RoundRectangleCurve, SplineCurve, 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 };