@pixodesk/svg-animator-vue 1.0.48 → 1.0.49

package/dist/index.umd.js

@@ -56761,7 +56761,7 @@ ${codeFrame}` : message);
     PixodeskSvgCssAnimator: () => PixodeskSvgCssAnimator_default
   });
 
-  // ../svg-animator-web/dist/chunk-ZEUVRAKS.js
+  // ../svg-animator-web/dist/chunk-U5Z7OD2T.js
   var __defProp2 = Object.defineProperty;
   var __defProps = Object.defineProperties;
   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -57915,7 +57915,7 @@ ${codeFrame}` : message);
   }));
   var PxStrokeGradientEffectSchema = PxFillGradientEffectSchema;
   var PxTextPathEffectSchema = implementsInterface()(px.object({
-    pathData: px.string(),
+    pathData: PxAnimatableStringSchema,
     // `extend` is what an omitted pathOverflow means (glyphs continue along the tangent); the
     // other three are SVG's own initial values for the native <textPath> attributes.
     pathOverflow: px.enum([PxPathOverflow.clip, PxPathOverflow.extend], PxPathOverflow.extend).optional(),
@@ -59962,11 +59962,11 @@ ${codeFrame}` : message);
     const totalLength = cum[segs.length];
     const start = segs[0].P0, end = segs[segs.length - 1].P3;
     const closed = Math.hypot(end[0] - start[0], end[1] - start[1]) < 1e-3;
-    const sampleOn = (dist) => {
+    const sampleOn = (dist22) => {
       let k = 0;
-      while (k < segs.length - 1 && dist > cum[k + 1]) k++;
+      while (k < segs.length - 1 && dist22 > cum[k + 1]) k++;
       const seg = segs[k];
-      const local = dist - cum[k];
+      const local = dist22 - cum[k];
       const t = seg.len > 0 ? bezier2D_tForDistance(seg.lut, local) : 0;
       const [x, y] = bezier2D_pointAt(seg.P0, seg.P1, seg.P2, seg.P3, t);
       const [dx, dy] = bezier2D_derivativeAt(seg.P0, seg.P1, seg.P2, seg.P3, t);
@@ -59975,17 +59975,17 @@ ${codeFrame}` : message);
     return {
       totalLength,
       closed,
-      sampleAtDistance(dist) {
-        if (closed && totalLength > 0 && (dist < 0 || dist > totalLength)) {
-          return sampleOn((dist % totalLength + totalLength) % totalLength);
+      sampleAtDistance(dist22) {
+        if (closed && totalLength > 0 && (dist22 < 0 || dist22 > totalLength)) {
+          return sampleOn((dist22 % totalLength + totalLength) % totalLength);
         }
-        if (!closed && (dist < 0 || dist > totalLength)) {
-          const edge = dist < 0 ? 0 : totalLength;
+        if (!closed && (dist22 < 0 || dist22 > totalLength)) {
+          const edge = dist22 < 0 ? 0 : totalLength;
           const p = sampleOn(edge);
-          const over = dist - edge;
+          const over = dist22 - edge;
           return { x: p.x + Math.cos(p.angle) * over, y: p.y + Math.sin(p.angle) * over, angle: p.angle };
         }
-        return sampleOn(clamp2(dist, 0, totalLength));
+        return sampleOn(clamp2(dist22, 0, totalLength));
       }
     };
   }
@@ -60067,6 +60067,72 @@ ${codeFrame}` : message);
     if (kf.tangentIn !== void 0) out.tangentIn = kf.tangentIn;
     return out;
   }
+  function pathString(v) {
+    if (typeof v === "string") return v;
+    if (v && typeof v === "object" && typeof v.pathData === "string") return v.pathData;
+    return void 0;
+  }
+  function pathTrackOf(raw) {
+    var _a22, _b;
+    const r = readAnimatable(raw);
+    if (r.kind === "absent") return void 0;
+    if (r.kind === "static" || r.keyframes.length < 2) {
+      const d = pathString(r.kind === "static" ? r.value : (_a22 = r.keyframes[0]) == null ? void 0 : _a22.value);
+      if (!d) return void 0;
+      return {
+        animated: false,
+        times: [],
+        dAt: () => d,
+        maxLength: (lengthOf) => lengthOf(d),
+        moveBetween: () => 0
+      };
+    }
+    const kfs = [...r.keyframes].map((kf) => ({ time: Number(kf.time) || 0, d: pathString(kf.value) })).filter((kf) => !!kf.d).sort((a, b) => a.time - b.time);
+    if (kfs.length < 2) return pathTrackOf((_b = kfs[0]) == null ? void 0 : _b.d);
+    const times = kfs.map((kf) => kf.time);
+    const beziers = kfs.map((kf) => parseSvgPathToBezier(kf.d));
+    const at = (t) => {
+      if (t <= times[0]) return beziers[0];
+      for (let i = 1; i < times.length; i++) {
+        if (t <= times[i]) {
+          const span = times[i] - times[i - 1];
+          const f = span > 0 ? (t - times[i - 1]) / span : 1;
+          return interpolateBeziers(beziers[i - 1], beziers[i], f);
+        }
+      }
+      return beziers[beziers.length - 1];
+    };
+    return {
+      animated: true,
+      times,
+      loop: r.loop,
+      dAt: (t) => at(t).map((bz) => bezierToSvgPath(bz)).join(""),
+      maxLength: (lengthOf) => Math.max(...kfs.map((kf) => lengthOf(kf.d))),
+      moveBetween: (t0, t1) => maxPointMove(at(t0), at(t1))
+    };
+  }
+  function maxPointMove(a, b) {
+    var _a22, _b, _c, _d, _e, _f, _g, _h;
+    let max = 0;
+    const n = Math.min(a.length, b.length);
+    for (let p = 0; p < n; p++) {
+      const pa = a[p], pb = b[p];
+      const count = Math.min(pa.v.length, pb.v.length);
+      for (let k = 0; k < count; k++) {
+        max = Math.max(
+          max,
+          dist(pa.v[k], pb.v[k]),
+          dist((_b = (_a22 = pa.i) == null ? void 0 : _a22[k]) != null ? _b : pa.v[k], (_d = (_c = pb.i) == null ? void 0 : _c[k]) != null ? _d : pb.v[k]),
+          dist((_f = (_e = pa.o) == null ? void 0 : _e[k]) != null ? _f : pa.v[k], (_h = (_g = pb.o) == null ? void 0 : _g[k]) != null ? _h : pb.v[k])
+        );
+      }
+    }
+    return max;
+  }
+  function dist(p, q) {
+    var _a22, _b, _c, _d;
+    return Math.hypot(((_a22 = q[0]) != null ? _a22 : 0) - ((_b = p[0]) != null ? _b : 0), ((_c = q[1]) != null ? _c : 0) - ((_d = p[1]) != null ? _d : 0));
+  }
   function deepClonePxNode(value) {
     if (value === null || typeof value !== "object") return value;
     if (Array.isArray(value)) return value.map(deepClonePxNode);
@@ -60188,7 +60254,7 @@ ${codeFrame}` : message);
   }
   function extendedPathForBrowser(pathD, opts) {
     var _a22;
-    if (opts.pathOverflow === "clip") return { d: pathD, startShift: 0 };
+    if (opts.pathOverflow === PxPathOverflow.clip) return { d: pathD, startShift: 0 };
     const sampler = createPathSampler(pathD);
     if (!sampler || sampler.closed || sampler.totalLength <= 0) return { d: pathD, startShift: 0 };
     const L = sampler.totalLength;
@@ -60215,20 +60281,30 @@ ${codeFrame}` : message);
     return { d, startShift: startExt };
   }
   function applyTextPathEffect(node, fx, ctx) {
-    var _a22;
-    if (!fx || typeof fx.pathData !== "string" || !fx.pathData) return node;
+    var _a22, _b, _c, _d;
+    if (!fx) return node;
+    const read = readAnimatable(fx.pathData);
+    if (read.kind === "absent") return node;
+    const isAnimated = read.kind === "animated";
+    const baseD = pathString(isAnimated ? (_b = read.base) != null ? _b : (_a22 = read.keyframes[0]) == null ? void 0 : _a22.value : read.value);
+    if (!baseD) return node;
     const pathId = genId(ctx, "tpath");
-    const { d, startShift } = extendedPathForBrowser(fx.pathData, {
-      pathOverflow: fx.pathOverflow,
+    const { d, startShift } = extendedPathForBrowser(baseD, {
+      pathOverflow: isAnimated ? PxPathOverflow.clip : fx.pathOverflow,
       startOffset: fx.startOffset,
       textLength: fx.textLength,
       advance: estimateTextAdvance(node)
     });
-    ctx.defs.push({ type: "path", id: pathId, d });
+    const pathDef = { type: "path", id: pathId, d };
+    if (isAnimated) {
+      writeAnimatableChannel(pathDef, "d", read);
+      pathDef.d = (_c = pathString(pathDef.d)) != null ? _c : d;
+    }
+    ctx.defs.push(pathDef);
     const textPath = {
       type: "textPath",
       href: "#" + pathId,
-      children: (_a22 = node.children) != null ? _a22 : []
+      children: (_d = node.children) != null ? _d : []
     };
     if (fx.lengthAdjust !== void 0) textPath.lengthAdjust = fx.lengthAdjust;
     if (fx.method !== void 0) textPath.method = fx.method;
@@ -60527,8 +60603,8 @@ ${codeFrame}` : message);
     walk(node, rootStyleOf(node));
     return { cells, width: adv };
   }
-  function alongAffine(sampler, dist, scale, widthEm, perp = 0) {
-    const { x, y, angle } = sampler.sampleAtDistance(dist);
+  function alongAffine(sampler, dist22, scale, widthEm, perp = 0) {
+    const { x, y, angle } = sampler.sampleAtDistance(dist22);
     const cos = Math.cos(angle), sin = Math.sin(angle), hw = widthEm / 2;
     return [scale * cos, scale * sin, -scale * sin, scale * cos, x - scale * cos * hw - perp * sin, y - scale * sin * hw + perp * cos];
   }
@@ -60540,9 +60616,12 @@ ${codeFrame}` : message);
     };
   }
   function materializeGlyphTextAlongPath(node, pathD, startOffset, opts, textLength, pathOverflow) {
+    var _a22;
     const { glyphs, create = jsonElementFactory, warnings } = opts;
-    const sampler = pathD ? createPathSampler(pathD) : null;
-    if (!sampler) {
+    const pathTrack = pathTrackOf(pathD);
+    const samplerAt = pathTrack ? pathSamplers(pathTrack) : null;
+    const sampler = (_a22 = samplerAt == null ? void 0 : samplerAt(0)) != null ? _a22 : null;
+    if (!pathTrack || !samplerAt || !sampler) {
       warnings == null ? void 0 : warnings.push("textGlyphs: unparsable along-path geometry");
       return null;
     }
@@ -60554,11 +60633,11 @@ ${codeFrame}` : message);
     const tlTrack = numTrackOf(textLength);
     const kOf = (tl) => tl > 0 && width > 0 ? tl / width : 1;
     const isClip = pathOverflow === "clip" && !sampler.closed;
-    if (soTrack.animated || tlTrack.animated) {
-      const times = mergeTrackTimes(soTrack.times, tlTrack.times);
+    if (soTrack.animated || tlTrack.animated || pathTrack.animated) {
+      const times = mergeTrackTimes(mergeTrackTimes(pathTrack.times, soTrack.times), tlTrack.times);
       const distOf = (c, t) => alongOffset + soTrack.at(t) + kOf(tlTrack.at(t)) * c.midBase;
-      const loop = soTrack.animated ? soTrack.loop : tlTrack.loop;
-      return toGroup(node, buildAnimatedAlongPath(cells, sampler, distOf, times, loop, create, isClip, perp), create);
+      const loop = pathTrack.animated && pathTrack.loop !== void 0 ? pathTrack.loop : soTrack.animated ? soTrack.loop : tlTrack.loop;
+      return toGroup(node, buildAnimatedAlongPath(cells, samplerAt, pathTrack, distOf, times, loop, create, isClip, perp), create);
     }
     const k = kOf(tlTrack.at(0));
     const base = alongOffset + soTrack.at(0);
@@ -60613,15 +60692,39 @@ ${codeFrame}` : message);
     const f = __pow(10, n);
     return Math.round(v * f) / f;
   }
-  function buildAnimatedAlongPath(cells, sampler, distOf, times, loop, create, isClip, perp = 0) {
-    const step = Math.max(sampler.totalLength / ALONG_PATH_MAX_STEPS, 0.5);
-    const onPath = (dist) => dist >= 0 && dist <= sampler.totalLength;
+  function pathSamplers(track) {
+    if (!track.animated) {
+      const one = createPathSampler(track.dAt(0));
+      return () => one;
+    }
+    const byTime = /* @__PURE__ */ new Map();
+    return (t) => {
+      let s = byTime.get(t);
+      if (s === void 0) {
+        s = createPathSampler(track.dAt(t));
+        byTime.set(t, s);
+      }
+      return s;
+    };
+  }
+  function buildAnimatedAlongPath(cells, samplerAt, track, distOf, times, loop, create, isClip, perp = 0) {
+    var _a22;
+    const first = samplerAt((_a22 = times[0]) != null ? _a22 : 0);
+    if (!first) return [];
+    const at = (t) => {
+      var _a3;
+      return (_a3 = samplerAt(t)) != null ? _a3 : first;
+    };
+    const maxLength = track.animated ? Math.max(...track.times.map((t) => at(t).totalLength)) : first.totalLength;
+    const step = Math.max(maxLength / ALONG_PATH_MAX_STEPS, 0.5);
+    const onPath = (dist22, t) => dist22 >= 0 && dist22 <= at(t).totalLength;
+    const moved = times.map((t, k) => k ? track.moveBetween(times[k - 1], t) : 0);
     const out = [];
     for (const c of cells) {
       const centered = [c.scale, 0, 0, c.scale, -c.scale * (c.widthEm / 2), 0];
       const d = transformPathData(c.glyphD, centered);
-      const sampleKf = (dist, time) => {
-        const { x, y, angle } = sampler.sampleAtDistance(dist);
+      const sampleKf = (dist22, time) => {
+        const { x, y, angle } = at(time).sampleAtDistance(dist22);
         const cos = Math.cos(angle), sin = Math.sin(angle);
         return {
           time,
@@ -60639,15 +60742,15 @@ ${codeFrame}` : message);
       };
       const kfs = [];
       const opKfs = [];
-      const pushKf = (dist, time) => {
-        kfs.push(sampleKf(dist, time));
-        if (isClip) opKfs.push({ time, value: onPath(dist) ? 1 : 0 });
+      const pushKf = (dist22, time) => {
+        kfs.push(sampleKf(dist22, time));
+        if (isClip) opKfs.push({ time, value: onPath(dist22, time) ? 1 : 0 });
       };
       pushKf(distOf(c, times[0]), times[0]);
       for (let k = 1; k < times.length; k++) {
         const t0 = times[k - 1], t1 = times[k];
         const d0 = distOf(c, t0), d1 = distOf(c, t1);
-        const n = Math.min(ALONG_PATH_MAX_STEPS_PER_SEGMENT, Math.max(1, Math.ceil(Math.abs(d1 - d0) / step)));
+        const n = Math.min(ALONG_PATH_MAX_STEPS_PER_SEGMENT, Math.max(1, Math.ceil(Math.abs(d1 - d0) / step), Math.ceil(moved[k] / step)));
         for (let s = 1; s <= n; s++) {
           const f = s / n;
           const t = t0 + f * (t1 - t0);
@@ -61200,11 +61303,6 @@ ${codeFrame}` : message);
     node.clipPath = "url(#" + clipId + ")";
     return node;
   }
-  function pathString(v) {
-    if (typeof v === "string") return v;
-    if (v && typeof v === "object" && typeof v.pathData === "string") return v.pathData;
-    return void 0;
-  }
   function applyMaskedByEffect(node, fx, transformBy, ctx) {
     if (!fx) return node;
     const sourceId = stripHash(fx.source);
@@ -62187,8 +62285,7 @@ ${codeFrame}` : message);
     let consumedByGlyphs = false;
     if (text == null ? void 0 : text.useGlyphs) {
       if (textPath) {
-        const pathD = typeof textPath.pathData === "string" ? textPath.pathData : void 0;
-        const glyphed = applyTextGlyphsAlongPath(n, ctx, pathD, textPath.startOffset, textPath.textLength, textPath.pathOverflow);
+        const glyphed = applyTextGlyphsAlongPath(n, ctx, textPath.pathData, textPath.startOffset, textPath.textLength, textPath.pathOverflow);
         if (glyphed) {
           n = glyphed;
           consumedByGlyphs = true;
@@ -64406,7 +64503,7 @@ ${codeFrame}` : message);
     return proxy;
   }
 
-  // ../svg-animator-core/dist/chunk-J5V5JJDT.js
+  // ../svg-animator-core/dist/chunk-NDANRP4J.js
   var __defProp3 = Object.defineProperty;
   var __defProps3 = Object.defineProperties;
   var __getOwnPropDescs3 = Object.getOwnPropertyDescriptors;
@@ -65550,7 +65647,7 @@ ${codeFrame}` : message);
   }));
   var PxStrokeGradientEffectSchema2 = PxFillGradientEffectSchema2;
   var PxTextPathEffectSchema2 = implementsInterface2()(px2.object({
-    pathData: px2.string(),
+    pathData: PxAnimatableStringSchema2,
     // `extend` is what an omitted pathOverflow means (glyphs continue along the tangent); the
     // other three are SVG's own initial values for the native <textPath> attributes.
     pathOverflow: px2.enum([PxPathOverflow2.clip, PxPathOverflow2.extend], PxPathOverflow2.extend).optional(),
@@ -67509,11 +67606,11 @@ ${codeFrame}` : message);
     const totalLength = cum[segs.length];
     const start = segs[0].P0, end = segs[segs.length - 1].P3;
     const closed = Math.hypot(end[0] - start[0], end[1] - start[1]) < 1e-3;
-    const sampleOn = (dist) => {
+    const sampleOn = (dist22) => {
       let k = 0;
-      while (k < segs.length - 1 && dist > cum[k + 1]) k++;
+      while (k < segs.length - 1 && dist22 > cum[k + 1]) k++;
       const seg = segs[k];
-      const local = dist - cum[k];
+      const local = dist22 - cum[k];
       const t = seg.len > 0 ? bezier2D_tForDistance2(seg.lut, local) : 0;
       const [x, y] = bezier2D_pointAt2(seg.P0, seg.P1, seg.P2, seg.P3, t);
       const [dx, dy] = bezier2D_derivativeAt2(seg.P0, seg.P1, seg.P2, seg.P3, t);
@@ -67522,17 +67619,17 @@ ${codeFrame}` : message);
     return {
       totalLength,
       closed,
-      sampleAtDistance(dist) {
-        if (closed && totalLength > 0 && (dist < 0 || dist > totalLength)) {
-          return sampleOn((dist % totalLength + totalLength) % totalLength);
+      sampleAtDistance(dist22) {
+        if (closed && totalLength > 0 && (dist22 < 0 || dist22 > totalLength)) {
+          return sampleOn((dist22 % totalLength + totalLength) % totalLength);
         }
-        if (!closed && (dist < 0 || dist > totalLength)) {
-          const edge = dist < 0 ? 0 : totalLength;
+        if (!closed && (dist22 < 0 || dist22 > totalLength)) {
+          const edge = dist22 < 0 ? 0 : totalLength;
           const p = sampleOn(edge);
-          const over = dist - edge;
+          const over = dist22 - edge;
           return { x: p.x + Math.cos(p.angle) * over, y: p.y + Math.sin(p.angle) * over, angle: p.angle };
         }
-        return sampleOn(clamp22(dist, 0, totalLength));
+        return sampleOn(clamp22(dist22, 0, totalLength));
       }
     };
   }
@@ -67614,6 +67711,72 @@ ${codeFrame}` : message);
     if (kf.tangentIn !== void 0) out.tangentIn = kf.tangentIn;
     return out;
   }
+  function pathString2(v) {
+    if (typeof v === "string") return v;
+    if (v && typeof v === "object" && typeof v.pathData === "string") return v.pathData;
+    return void 0;
+  }
+  function pathTrackOf2(raw) {
+    var _a22, _b;
+    const r = readAnimatable2(raw);
+    if (r.kind === "absent") return void 0;
+    if (r.kind === "static" || r.keyframes.length < 2) {
+      const d = pathString2(r.kind === "static" ? r.value : (_a22 = r.keyframes[0]) == null ? void 0 : _a22.value);
+      if (!d) return void 0;
+      return {
+        animated: false,
+        times: [],
+        dAt: () => d,
+        maxLength: (lengthOf) => lengthOf(d),
+        moveBetween: () => 0
+      };
+    }
+    const kfs = [...r.keyframes].map((kf) => ({ time: Number(kf.time) || 0, d: pathString2(kf.value) })).filter((kf) => !!kf.d).sort((a, b) => a.time - b.time);
+    if (kfs.length < 2) return pathTrackOf2((_b = kfs[0]) == null ? void 0 : _b.d);
+    const times = kfs.map((kf) => kf.time);
+    const beziers = kfs.map((kf) => parseSvgPathToBezier2(kf.d));
+    const at = (t) => {
+      if (t <= times[0]) return beziers[0];
+      for (let i = 1; i < times.length; i++) {
+        if (t <= times[i]) {
+          const span = times[i] - times[i - 1];
+          const f = span > 0 ? (t - times[i - 1]) / span : 1;
+          return interpolateBeziers2(beziers[i - 1], beziers[i], f);
+        }
+      }
+      return beziers[beziers.length - 1];
+    };
+    return {
+      animated: true,
+      times,
+      loop: r.loop,
+      dAt: (t) => at(t).map((bz) => bezierToSvgPath2(bz)).join(""),
+      maxLength: (lengthOf) => Math.max(...kfs.map((kf) => lengthOf(kf.d))),
+      moveBetween: (t0, t1) => maxPointMove2(at(t0), at(t1))
+    };
+  }
+  function maxPointMove2(a, b) {
+    var _a22, _b, _c, _d, _e, _f, _g, _h;
+    let max = 0;
+    const n = Math.min(a.length, b.length);
+    for (let p = 0; p < n; p++) {
+      const pa = a[p], pb = b[p];
+      const count = Math.min(pa.v.length, pb.v.length);
+      for (let k = 0; k < count; k++) {
+        max = Math.max(
+          max,
+          dist2(pa.v[k], pb.v[k]),
+          dist2((_b = (_a22 = pa.i) == null ? void 0 : _a22[k]) != null ? _b : pa.v[k], (_d = (_c = pb.i) == null ? void 0 : _c[k]) != null ? _d : pb.v[k]),
+          dist2((_f = (_e = pa.o) == null ? void 0 : _e[k]) != null ? _f : pa.v[k], (_h = (_g = pb.o) == null ? void 0 : _g[k]) != null ? _h : pb.v[k])
+        );
+      }
+    }
+    return max;
+  }
+  function dist2(p, q) {
+    var _a22, _b, _c, _d;
+    return Math.hypot(((_a22 = q[0]) != null ? _a22 : 0) - ((_b = p[0]) != null ? _b : 0), ((_c = q[1]) != null ? _c : 0) - ((_d = p[1]) != null ? _d : 0));
+  }
   function deepClonePxNode2(value) {
     if (value === null || typeof value !== "object") return value;
     if (Array.isArray(value)) return value.map(deepClonePxNode2);
@@ -67735,7 +67898,7 @@ ${codeFrame}` : message);
   }
   function extendedPathForBrowser2(pathD, opts) {
     var _a22;
-    if (opts.pathOverflow === "clip") return { d: pathD, startShift: 0 };
+    if (opts.pathOverflow === PxPathOverflow2.clip) return { d: pathD, startShift: 0 };
     const sampler = createPathSampler2(pathD);
     if (!sampler || sampler.closed || sampler.totalLength <= 0) return { d: pathD, startShift: 0 };
     const L = sampler.totalLength;
@@ -67762,20 +67925,30 @@ ${codeFrame}` : message);
     return { d, startShift: startExt };
   }
   function applyTextPathEffect2(node, fx, ctx) {
-    var _a22;
-    if (!fx || typeof fx.pathData !== "string" || !fx.pathData) return node;
+    var _a22, _b, _c, _d;
+    if (!fx) return node;
+    const read = readAnimatable2(fx.pathData);
+    if (read.kind === "absent") return node;
+    const isAnimated = read.kind === "animated";
+    const baseD = pathString2(isAnimated ? (_b = read.base) != null ? _b : (_a22 = read.keyframes[0]) == null ? void 0 : _a22.value : read.value);
+    if (!baseD) return node;
     const pathId = genId2(ctx, "tpath");
-    const { d, startShift } = extendedPathForBrowser2(fx.pathData, {
-      pathOverflow: fx.pathOverflow,
+    const { d, startShift } = extendedPathForBrowser2(baseD, {
+      pathOverflow: isAnimated ? PxPathOverflow2.clip : fx.pathOverflow,
       startOffset: fx.startOffset,
       textLength: fx.textLength,
       advance: estimateTextAdvance2(node)
     });
-    ctx.defs.push({ type: "path", id: pathId, d });
+    const pathDef = { type: "path", id: pathId, d };
+    if (isAnimated) {
+      writeAnimatableChannel2(pathDef, "d", read);
+      pathDef.d = (_c = pathString2(pathDef.d)) != null ? _c : d;
+    }
+    ctx.defs.push(pathDef);
     const textPath = {
       type: "textPath",
       href: "#" + pathId,
-      children: (_a22 = node.children) != null ? _a22 : []
+      children: (_d = node.children) != null ? _d : []
     };
     if (fx.lengthAdjust !== void 0) textPath.lengthAdjust = fx.lengthAdjust;
     if (fx.method !== void 0) textPath.method = fx.method;
@@ -68074,8 +68247,8 @@ ${codeFrame}` : message);
     walk(node, rootStyleOf2(node));
     return { cells, width: adv };
   }
-  function alongAffine2(sampler, dist, scale, widthEm, perp = 0) {
-    const { x, y, angle } = sampler.sampleAtDistance(dist);
+  function alongAffine2(sampler, dist22, scale, widthEm, perp = 0) {
+    const { x, y, angle } = sampler.sampleAtDistance(dist22);
     const cos = Math.cos(angle), sin = Math.sin(angle), hw = widthEm / 2;
     return [scale * cos, scale * sin, -scale * sin, scale * cos, x - scale * cos * hw - perp * sin, y - scale * sin * hw + perp * cos];
   }
@@ -68087,9 +68260,12 @@ ${codeFrame}` : message);
     };
   }
   function materializeGlyphTextAlongPath2(node, pathD, startOffset, opts, textLength, pathOverflow) {
+    var _a22;
     const { glyphs, create = jsonElementFactory2, warnings } = opts;
-    const sampler = pathD ? createPathSampler2(pathD) : null;
-    if (!sampler) {
+    const pathTrack = pathTrackOf2(pathD);
+    const samplerAt = pathTrack ? pathSamplers2(pathTrack) : null;
+    const sampler = (_a22 = samplerAt == null ? void 0 : samplerAt(0)) != null ? _a22 : null;
+    if (!pathTrack || !samplerAt || !sampler) {
       warnings == null ? void 0 : warnings.push("textGlyphs: unparsable along-path geometry");
       return null;
     }
@@ -68101,11 +68277,11 @@ ${codeFrame}` : message);
     const tlTrack = numTrackOf2(textLength);
     const kOf = (tl) => tl > 0 && width > 0 ? tl / width : 1;
     const isClip = pathOverflow === "clip" && !sampler.closed;
-    if (soTrack.animated || tlTrack.animated) {
-      const times = mergeTrackTimes2(soTrack.times, tlTrack.times);
+    if (soTrack.animated || tlTrack.animated || pathTrack.animated) {
+      const times = mergeTrackTimes2(mergeTrackTimes2(pathTrack.times, soTrack.times), tlTrack.times);
       const distOf = (c, t) => alongOffset + soTrack.at(t) + kOf(tlTrack.at(t)) * c.midBase;
-      const loop = soTrack.animated ? soTrack.loop : tlTrack.loop;
-      return toGroup2(node, buildAnimatedAlongPath2(cells, sampler, distOf, times, loop, create, isClip, perp), create);
+      const loop = pathTrack.animated && pathTrack.loop !== void 0 ? pathTrack.loop : soTrack.animated ? soTrack.loop : tlTrack.loop;
+      return toGroup2(node, buildAnimatedAlongPath2(cells, samplerAt, pathTrack, distOf, times, loop, create, isClip, perp), create);
     }
     const k = kOf(tlTrack.at(0));
     const base = alongOffset + soTrack.at(0);
@@ -68160,15 +68336,39 @@ ${codeFrame}` : message);
     const f = __pow2(10, n);
     return Math.round(v * f) / f;
   }
-  function buildAnimatedAlongPath2(cells, sampler, distOf, times, loop, create, isClip, perp = 0) {
-    const step = Math.max(sampler.totalLength / ALONG_PATH_MAX_STEPS2, 0.5);
-    const onPath = (dist) => dist >= 0 && dist <= sampler.totalLength;
+  function pathSamplers2(track) {
+    if (!track.animated) {
+      const one = createPathSampler2(track.dAt(0));
+      return () => one;
+    }
+    const byTime = /* @__PURE__ */ new Map();
+    return (t) => {
+      let s = byTime.get(t);
+      if (s === void 0) {
+        s = createPathSampler2(track.dAt(t));
+        byTime.set(t, s);
+      }
+      return s;
+    };
+  }
+  function buildAnimatedAlongPath2(cells, samplerAt, track, distOf, times, loop, create, isClip, perp = 0) {
+    var _a22;
+    const first = samplerAt((_a22 = times[0]) != null ? _a22 : 0);
+    if (!first) return [];
+    const at = (t) => {
+      var _a3;
+      return (_a3 = samplerAt(t)) != null ? _a3 : first;
+    };
+    const maxLength = track.animated ? Math.max(...track.times.map((t) => at(t).totalLength)) : first.totalLength;
+    const step = Math.max(maxLength / ALONG_PATH_MAX_STEPS2, 0.5);
+    const onPath = (dist22, t) => dist22 >= 0 && dist22 <= at(t).totalLength;
+    const moved = times.map((t, k) => k ? track.moveBetween(times[k - 1], t) : 0);
     const out = [];
     for (const c of cells) {
       const centered = [c.scale, 0, 0, c.scale, -c.scale * (c.widthEm / 2), 0];
       const d = transformPathData2(c.glyphD, centered);
-      const sampleKf = (dist, time) => {
-        const { x, y, angle } = sampler.sampleAtDistance(dist);
+      const sampleKf = (dist22, time) => {
+        const { x, y, angle } = at(time).sampleAtDistance(dist22);
         const cos = Math.cos(angle), sin = Math.sin(angle);
         return {
           time,
@@ -68186,15 +68386,15 @@ ${codeFrame}` : message);
       };
       const kfs = [];
       const opKfs = [];
-      const pushKf = (dist, time) => {
-        kfs.push(sampleKf(dist, time));
-        if (isClip) opKfs.push({ time, value: onPath(dist) ? 1 : 0 });
+      const pushKf = (dist22, time) => {
+        kfs.push(sampleKf(dist22, time));
+        if (isClip) opKfs.push({ time, value: onPath(dist22, time) ? 1 : 0 });
       };
       pushKf(distOf(c, times[0]), times[0]);
       for (let k = 1; k < times.length; k++) {
         const t0 = times[k - 1], t1 = times[k];
         const d0 = distOf(c, t0), d1 = distOf(c, t1);
-        const n = Math.min(ALONG_PATH_MAX_STEPS_PER_SEGMENT2, Math.max(1, Math.ceil(Math.abs(d1 - d0) / step)));
+        const n = Math.min(ALONG_PATH_MAX_STEPS_PER_SEGMENT2, Math.max(1, Math.ceil(Math.abs(d1 - d0) / step), Math.ceil(moved[k] / step)));
         for (let s = 1; s <= n; s++) {
           const f = s / n;
           const t = t0 + f * (t1 - t0);
@@ -68747,11 +68947,6 @@ ${codeFrame}` : message);
     node.clipPath = "url(#" + clipId + ")";
     return node;
   }
-  function pathString2(v) {
-    if (typeof v === "string") return v;
-    if (v && typeof v === "object" && typeof v.pathData === "string") return v.pathData;
-    return void 0;
-  }
   function applyMaskedByEffect2(node, fx, transformBy, ctx) {
     if (!fx) return node;
     const sourceId = stripHash3(fx.source);
@@ -69734,8 +69929,7 @@ ${codeFrame}` : message);
     let consumedByGlyphs = false;
     if (text == null ? void 0 : text.useGlyphs) {
       if (textPath) {
-        const pathD = typeof textPath.pathData === "string" ? textPath.pathData : void 0;
-        const glyphed = applyTextGlyphsAlongPath2(n, ctx, pathD, textPath.startOffset, textPath.textLength, textPath.pathOverflow);
+        const glyphed = applyTextGlyphsAlongPath2(n, ctx, textPath.pathData, textPath.startOffset, textPath.textLength, textPath.pathOverflow);
         if (glyphed) {
           n = glyphed;
           consumedByGlyphs = true;