@plotdb/lotion 0.3.0 → 0.4.2

package/vector.js

@@ -1,6 +1,6 @@
 (function(){
   (function(){
-    var lotion, ref$, props, skip, i$, len$, s, c, textProps, unsupported, b64Bytes, b64, svgUri, fixUri, box, svgProps, svgSrc, bakeTransform, convert, fontCache, unquote, parseRange, parseSrc, faceOf, facesInText, facesInSheet, allFaces, getFaces, loadFont, hb, getHb, WGHT, subset, clamp, weightRank, fontsFor, render, vector;
+    var lotion, ref$, props, skip, i$, len$, s, c, textProps, unsupported, b64Bytes, b64, svgUri, fixShadow, fixUri, box, svgProps, svgSrc, bakeTransform, convert, fontCache, unquote, parseRange, parseSrc, faceOf, facesInText, facesInSheet, allFaces, getFaces, loadFont, hb, getHb, WGHT, subset, clamp, weightRank, fontsFor, render, makeCtx, prepare, vector, IDENT, mul, parseMatrix, motionMatrix, svgMatrix, viewboxMatrix, blurOf, simplify, fmt, pct, SVGGROUP, SVGSTATIC, NUMATTRS, NUMPROPS, LEAFSTYLE, POSATTRS, NUMERIC, xml, styleDiff, leaf, groupAttrs, splitTop, rgba, maskOf, clipOf, sample, drawOn, PAD, draw, attrTol, compose, animate;
     lotion = window.lotion;
     ref$ = lotion.libs;
     ref$.satori = 'https://cdn.jsdelivr.net/npm/satori@0.36.0/+esm';
@@ -62,6 +62,34 @@
     svgUri = function(xml){
       return "data:image/svg+xml;base64," + b64(xml);
     };
+    fixShadow = function(v){
+      var parts, ref$, depth, cur, i$, len$, ch;
+      parts = [];
+      ref$ = [0, ''], depth = ref$[0], cur = ref$[1];
+      for (i$ = 0, len$ = v.length; i$ < len$; ++i$) {
+        ch = v[i$];
+        if (ch === '(') {
+          depth++;
+        }
+        if (ch === ')') {
+          depth--;
+        }
+        if (ch === ',' && depth === 0) {
+          parts.push(cur.trim());
+          cur = '';
+        } else {
+          cur += ch;
+        }
+      }
+      parts.push(cur.trim());
+      return parts.map(function(p){
+        var m;
+        if (!(m = /^((?:rgba?|hsla?|color)\([^)]*\)|#[0-9a-f]+|[a-z]+)\s+(.*)$/i.exec(p)) || m[1] === 'inset') {
+          return p;
+        }
+        return m[2] + " " + m[1];
+      }).join(', ');
+    };
     fixUri = function(v){
       return v.replace(/url\("data:image\/svg\+xml(?:;charset=[^,;]+)?(?:;utf8)?,([^"]*)"\)/g, function(m, d){
         var e;
@@ -187,7 +215,7 @@
         }
         return node.props.src = svgUri(new XMLSerializer().serializeToString(c));
       });
-      return '';
+      return "pending:" + new XMLSerializer().serializeToString(c);
     };
     bakeTransform = function(node, ctx){
       var st, m, v;
@@ -212,9 +240,10 @@
       }
       return node;
     };
-    convert = function(el, ctx, depth){
+    convert = function(el, ctx, depth, o){
       var root, cs, tag, ref$, x, y, w, h, hidden, k, v, blend, kids, texts, elems, style, i$, len$, s, node, children, text, jc, c, that;
       depth == null && (depth = 0);
+      o == null && (o = {});
       root = depth === 0;
       cs = getComputedStyle(el);
       if (cs.display === 'none' || +cs.opacity === 0) {
@@ -263,7 +292,9 @@
         if (!v || skip[k] === v) {
           continue;
         }
-        style[k] = /data:image\/svg/.test(v) ? fixUri(v) : v;
+        style[k] = /data:image\/svg/.test(v)
+          ? fixUri(v)
+          : k === 'boxShadow' || k === 'textShadow' ? fixShadow(v) : v;
       }
       for (i$ = 0, len$ = (ref$ = ['Top', 'Right', 'Bottom', 'Left']).length; i$ < len$; ++i$) {
         s = ref$[i$];
@@ -312,7 +343,9 @@
             return svgSrc(el, w, h, ctx, node);
           }
         }());
-        return bakeTransform(node, ctx);
+        return o.nobake
+          ? node
+          : bakeTransform(node, ctx);
       }
       children = [];
       if (texts.length && !hidden) {
@@ -330,10 +363,12 @@
           style.justifyContent = jc;
         }
       }
-      for (i$ = 0, len$ = elems.length; i$ < len$; ++i$) {
-        c = elems[i$];
-        if (that = convert(c, ctx, depth + 1)) {
-          children.push(that);
+      if (!o.own) {
+        for (i$ = 0, len$ = elems.length; i$ < len$; ++i$) {
+          c = elems[i$];
+          if (that = convert(c, ctx, depth + 1)) {
+            children.push(that);
+          }
         }
       }
       node = {
@@ -346,7 +381,11 @@
       if (blend && depth === 1) {
         node.blend = blend;
       }
-      return bakeTransform(node, ctx);
+      if (o.nobake) {
+        return node;
+      } else {
+        return bakeTransform(node, ctx);
+      }
     };
     fontCache = {};
     unquote = function(s){
@@ -706,26 +745,25 @@
         return "<svg width=\"" + o.width + "\" height=\"" + o.height + "\" viewBox=\"0 0 " + o.width + " " + o.height + "\" xmlns=\"http://www.w3.org/2000/svg\">" + layers.join('') + "</svg>";
       });
     };
-    vector = function(el, opt){
-      var warns, used, laters, ctx, tree, w, h, ref$, that;
-      opt == null && (opt = {});
-      warns = {};
-      used = {};
-      laters = [];
-      ctx = {
+    makeCtx = function(){
+      var ctx;
+      return ctx = {
+        warns: {},
+        used: {},
+        laters: [],
         warn: function(m){
-          return warns[m] = (warns[m] || 0) + 1;
+          return ctx.warns[m] = (ctx.warns[m] || 0) + 1;
         },
         later: function(f){
-          return laters.push(f);
+          return ctx.laters.push(f);
         },
         text: function(cs, text, style){
-          var weight, key, u, ref$, i$, len$, c;
+          var weight, key, u, ref$, ref1$, i$, len$, c;
           weight = +cs.fontWeight || 400;
           key = cs.fontFamily + "|" + weight + "|" + cs.fontStyle;
-          u = (ref$ = used[key]) != null
-            ? ref$
-            : used[key] = {
+          u = (ref1$ = (ref$ = ctx.used)[key]) != null
+            ? ref1$
+            : ref$[key] = {
               families: cs.fontFamily.split(',').map(unquote),
               weight: weight,
               style: cs.fontStyle,
@@ -737,28 +775,30 @@
             u.chars.add(c);
           }
           return u.styles.push(style);
+        },
+        warnings: function(){
+          var k, ref$, v, results$ = [];
+          for (k in ref$ = ctx.warns) {
+            v = ref$[k];
+            results$.push(k + (v > 1 ? " ( x" + v + " )" : ''));
+          }
+          return results$;
         }
       };
-      tree = convert(el, ctx);
-      w = opt.width || el.offsetWidth;
-      h = opt.height || el.offsetHeight;
-      ref$ = tree.props.style;
-      ref$.width = w;
-      ref$.height = h;
-      ref$.overflow = 'hidden';
-      delete tree.props.style.transform;
-      delete tree.props.style.transformOrigin;
+    };
+    prepare = function(ctx, opt){
+      var that;
       return Promise.all([
         (that = opt.satori)
           ? Promise.resolve(that)
           : lotion.lib('satori'), (that = opt.fonts)
           ? Promise.resolve(that)
-          : fontsFor(used, ctx)
+          : fontsFor(ctx.used, ctx)
       ]).then(function(arg$){
-        var m, fonts, k, ref$, u, i$, ref1$, len$, s, f, satori;
+        var m, fonts, k, ref$, u, i$, ref1$, len$, s;
         m = arg$[0], fonts = arg$[1];
         if (!opt.fonts) {
-          for (k in ref$ = used) {
+          for (k in ref$ = ctx.used) {
             u = ref$[k];
             for (i$ = 0, len$ = (ref1$ = u.styles).length; i$ < len$; ++i$) {
               s = ref1$[i$];
@@ -766,34 +806,1288 @@
             }
           }
         }
-        for (i$ = 0, len$ = (ref$ = laters).length; i$ < len$; ++i$) {
+        return [m['default'] || m.satori || m, fonts];
+        function fn$(it){
+          return "'" + it + "'";
+        }
+      });
+    };
+    vector = function(el, opt){
+      var ctx, tree, w, h, ref$;
+      opt == null && (opt = {});
+      ctx = makeCtx();
+      tree = convert(el, ctx);
+      w = opt.width || el.offsetWidth;
+      h = opt.height || el.offsetHeight;
+      ref$ = tree.props.style;
+      ref$.width = w;
+      ref$.height = h;
+      ref$.overflow = 'hidden';
+      delete tree.props.style.transform;
+      delete tree.props.style.transformOrigin;
+      return prepare(ctx, opt).then(function(arg$){
+        var satori, fonts, i$, ref$, len$, f;
+        satori = arg$[0], fonts = arg$[1];
+        for (i$ = 0, len$ = (ref$ = ctx.laters).length; i$ < len$; ++i$) {
           f = ref$[i$];
           f(fonts);
         }
-        satori = m['default'] || m.satori || m;
         return render(satori, tree, {
           width: w,
           height: h,
           fonts: fonts
         });
-        function fn$(it){
-          return "'" + it + "'";
-        }
       }).then(function(svg){
-        var k, v;
         return {
           svg: svg,
-          warnings: (function(){
-            var ref$, results$ = [];
-            for (k in ref$ = warns) {
-              v = ref$[k];
-              results$.push(k + (v > 1 ? " ( x" + v + " )" : ''));
+          warnings: ctx.warnings()
+        };
+      });
+    };
+    IDENT = [1, 0, 0, 1, 0, 0];
+    mul = function(m, n){
+      return [m[0] * n[0] + m[2] * n[1], m[1] * n[0] + m[3] * n[1], m[0] * n[2] + m[2] * n[3], m[1] * n[2] + m[3] * n[3], m[0] * n[4] + m[2] * n[5] + m[4], m[1] * n[4] + m[3] * n[5] + m[5]];
+    };
+    parseMatrix = function(v, ctx){
+      var m, a;
+      if (!v || v === 'none') {
+        return IDENT;
+      }
+      if (m = /^matrix\(([^)]+)\)$/.exec(v)) {
+        return m[1].split(',').map(function(it){
+          return +it;
+        });
+      }
+      if (m = /^matrix3d\(([^)]+)\)$/.exec(v)) {
+        a = m[1].split(',').map(function(it){
+          return +it;
+        });
+        ctx.warn("3d transform flattened to 2d");
+        return [a[0], a[1], a[4], a[5], a[12], a[13]];
+      }
+      return IDENT;
+    };
+    motionMatrix = function(x, y, cs, ctx){
+      var m, ref$, ox, oy;
+      m = parseMatrix(cs.transform, ctx);
+      if (m === IDENT) {
+        return [1, 0, 0, 1, x, y];
+      }
+      ref$ = cs.transformOrigin.split(' ').map(function(it){
+        return parseFloat(it) || 0;
+      }), ox = ref$[0], oy = ref$[1];
+      return mul([1, 0, 0, 1, x + ox, y + oy], mul(m, [1, 0, 0, 1, -ox, -oy]));
+    };
+    svgMatrix = function(e, cs, ctx){
+      var l, m;
+      if (cs.transform !== 'none') {
+        return motionMatrix(0, 0, cs, ctx);
+      }
+      l = e.transform && e.transform.baseVal;
+      if (!(l && l.numberOfItems)) {
+        return IDENT;
+      }
+      m = l.consolidate().matrix;
+      return [m.a, m.b, m.c, m.d, m.e, m.f];
+    };
+    viewboxMatrix = function(e, w, h){
+      var vb, ref$, sx, sy, par, s, ax, ay, dx, dy;
+      vb = e.viewBox && e.viewBox.baseVal;
+      if (!(vb && vb.width && vb.height)) {
+        return IDENT;
+      }
+      ref$ = [w / vb.width, h / vb.height], sx = ref$[0], sy = ref$[1];
+      par = e.preserveAspectRatio.baseVal;
+      if (par.align === 1) {
+        return [sx, 0, 0, sy, -vb.x * sx, -vb.y * sy];
+      }
+      s = par.meetOrSlice === 2
+        ? Math.max(sx, sy)
+        : Math.min(sx, sy);
+      ax = (par.align - 2) % 3;
+      ay = Math.floor((par.align - 2) / 3);
+      dx = (w - vb.width * s) * ax / 2;
+      dy = (h - vb.height * s) * ay / 2;
+      return [s, 0, 0, s, dx - vb.x * s, dy - vb.y * s];
+    };
+    blurOf = function(f){
+      var m;
+      if (!f || f === 'none') {
+        return 0;
+      } else if (m = /^blur\(([\d.]+)px\)$/.exec(f)) {
+        return +m[1];
+      } else {
+        return null;
+      }
+    };
+    simplify = function(vals, tol){
+      var n, keep, stack, ref$, a, b, worst, at, i$, i, f, j$, to$, k, e, results$ = [];
+      n = vals.length;
+      if (n < 3) {
+        return (function(){
+          var i$, to$, results$ = [];
+          for (i$ = 0, to$ = n; i$ < to$; ++i$) {
+            results$.push(i$);
+          }
+          return results$;
+        }());
+      }
+      keep = new Uint8Array(n);
+      keep[0] = keep[n - 1] = 1;
+      stack = [[0, n - 1]];
+      while (stack.length) {
+        ref$ = stack.pop(), a = ref$[0], b = ref$[1];
+        ref$ = [1, -1], worst = ref$[0], at = ref$[1];
+        for (i$ = a + 1; i$ < b; ++i$) {
+          i = i$;
+          f = (i - a) / (b - a);
+          for (j$ = 0, to$ = vals[a].length; j$ < to$; ++j$) {
+            k = j$;
+            e = Math.abs(vals[a][k] + (vals[b][k] - vals[a][k]) * f - vals[i][k]) / tol[k];
+            if (e > worst) {
+              worst = e;
+              at = i;
+            }
+          }
+        }
+        if (at >= 0) {
+          keep[at] = 1;
+          stack.push([a, at], [at, b]);
+        }
+      }
+      for (i$ = 0; i$ < n; ++i$) {
+        i = i$;
+        if (keep[i]) {
+          results$.push(i);
+        }
+      }
+      return results$;
+    };
+    fmt = function(v){
+      return +v.toFixed(4);
+    };
+    pct = function(i, n){
+      return (+(100 * i / n).toFixed(3)) + "%";
+    };
+    SVGGROUP = ['g', 'a', 'switch'];
+    SVGSTATIC = ['defs', 'clippath', 'mask', 'lineargradient', 'radialgradient', 'filter', 'pattern', 'symbol', 'style', 'marker', 'title', 'desc', 'metadata'];
+    NUMATTRS = ['x', 'y', 'x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'r', 'rx', 'ry', 'width', 'height'];
+    NUMPROPS = ['stroke-dashoffset', 'stroke-width', 'fill-opacity', 'stroke-opacity'];
+    LEAFSTYLE = svgProps.filter(function(it){
+      return !in$(it, NUMPROPS) && !(it === 'opacity' || it === 'visibility' || it === 'display');
+    });
+    POSATTRS = {
+      text: ['x', 'y'],
+      rect: ['x', 'y'],
+      image: ['x', 'y'],
+      use: ['x', 'y'],
+      foreignobject: ['x', 'y'],
+      circle: ['cx', 'cy'],
+      ellipse: ['cx', 'cy']
+    };
+    NUMERIC = /^\s*-?(\d+\.?\d*|\.\d+)(e-?\d+)?\s*$/;
+    xml = function(e){
+      return new XMLSerializer().serializeToString(e);
+    };
+    styleDiff = function(e, cs){
+      var pcs, decl, i$, ref$, len$, k, v;
+      pcs = getComputedStyle(e.parentNode);
+      decl = [];
+      for (i$ = 0, len$ = (ref$ = LEAFSTYLE).length; i$ < len$; ++i$) {
+        k = ref$[i$];
+        v = cs.getPropertyValue(k);
+        if (pcs.getPropertyValue(k) !== v) {
+          decl.push(k + ":" + v);
+        }
+      }
+      return decl.join(';');
+    };
+    leaf = function(e, cs, ctx){
+      var tag, c, i$, ref$, len$, k, a, v, t, pos, p, d, f;
+      tag = e.tagName.toLowerCase();
+      c = e.cloneNode(true);
+      for (i$ = 0, len$ = (ref$ = ['transform', 'opacity', 'style', 'class']).length; i$ < len$; ++i$) {
+        k = ref$[i$];
+        c.removeAttribute(k);
+      }
+      a = {};
+      for (i$ = 0, len$ = (ref$ = NUMATTRS).length; i$ < len$; ++i$) {
+        k = ref$[i$];
+        v = e.getAttribute(k);
+        if (v != null && NUMERIC.test(v)) {
+          a[k] = +v;
+          c.removeAttribute(k);
+        }
+      }
+      t = null;
+      if (pos = POSATTRS[tag]) {
+        t = {
+          x: a[pos[0]] || 0,
+          y: a[pos[1]] || 0,
+          keys: pos
+        };
+        delete a[pos[0]];
+        delete a[pos[1]];
+      }
+      p = {};
+      for (i$ = 0, len$ = (ref$ = NUMPROPS).length; i$ < len$; ++i$) {
+        k = ref$[i$];
+        p[k] = parseFloat(cs.getPropertyValue(k)) || 0;
+        c.removeAttribute(k);
+      }
+      if (d = styleDiff(e, cs)) {
+        c.setAttribute('style', d);
+      }
+      f = null;
+      if (tag === 'text') {
+        f = {};
+        ctx.text(cs, e.textContent, f);
+      }
+      return {
+        c: c,
+        a: a,
+        t: t,
+        p: p,
+        f: f
+      };
+    };
+    groupAttrs = function(e, cs){
+      var ret, res$, i$, ref$, len$, at, ref1$, d;
+      res$ = [];
+      for (i$ = 0, len$ = (ref$ = Array.from(e.attributes)).length; i$ < len$; ++i$) {
+        at = ref$[i$];
+        if (!((ref1$ = at.name) === 'class' || ref1$ === 'style' || ref1$ === 'transform' || ref1$ === 'opacity')) {
+          res$.push(at.name + "=\"" + at.value.replace(/"/g, '&quot;') + "\"");
+        }
+      }
+      ret = res$;
+      if (d = styleDiff(e, cs)) {
+        ret.push("style=\"" + d.replace(/"/g, "'") + "\"");
+      }
+      return ret.join(' ');
+    };
+    splitTop = function(str){
+      var ref$, ret, depth, cur, i$, len$, ch;
+      ref$ = [[], 0, ''], ret = ref$[0], depth = ref$[1], cur = ref$[2];
+      for (i$ = 0, len$ = str.length; i$ < len$; ++i$) {
+        ch = str[i$];
+        if (ch === '(') {
+          depth++;
+        }
+        if (ch === ')') {
+          depth--;
+        }
+        if (ch === ',' && depth === 0) {
+          ret.push(cur.trim());
+          cur = '';
+        } else {
+          cur += ch;
+        }
+      }
+      ret.push(cur.trim());
+      return ret;
+    };
+    rgba = function(c){
+      var m, v, ref$;
+      if (!(m = /^rgba?\(([^)]*)\)$/.exec(c))) {
+        return null;
+      }
+      v = m[1].split(/[\s,\/]+/).filter(function(it){
+        return it;
+      }).map(function(it){
+        return parseFloat(it);
+      });
+      return [v[0], v[1], v[2], (ref$ = v[3]) != null ? ref$ : 1];
+    };
+    maskOf = function(cs, w, h){
+      var m, parts, angle, a, stops, i$, len$, p, c, col, ps, j$, len1$, q, sz, ref$, len, tw, th, pos, x, y, glen, offs, i, j, k, to$, x1, y1, x2, y2, grad;
+      if (!(m = /^linear-gradient\((.*)\)$/.exec(cs.maskImage))) {
+        return null;
+      }
+      if (!/^no-repeat( no-repeat)?$/.test(cs.maskRepeat)) {
+        return null;
+      }
+      parts = splitTop(m[1]);
+      angle = 180;
+      if (a = /^(-?[\d.]+)deg$/.exec(parts[0])) {
+        angle = +a[1];
+        parts.shift();
+      } else if (/^to /.test(parts[0])) {
+        angle = {
+          'to top': 0,
+          'to right': 90,
+          'to bottom': 180,
+          'to left': 270
+        }[parts[0]];
+        if (angle == null) {
+          return null;
+        }
+        parts.shift();
+      }
+      angle = (angle % 360 + 360) % 360;
+      if (angle % 90) {
+        return null;
+      }
+      stops = [];
+      for (i$ = 0, len$ = parts.length; i$ < len$; ++i$) {
+        p = parts[i$];
+        if (!(c = /^(rgba?\([^)]*\))\s*(.*)$/.exec(p))) {
+          return null;
+        }
+        col = rgba(c[1]);
+        ps = c[2].split(/\s+/).filter(fn$);
+        if (!ps.length) {
+          stops.push({
+            col: col
+          });
+        }
+        for (j$ = 0, len1$ = ps.length; j$ < len1$; ++j$) {
+          q = ps[j$];
+          stops.push({
+            col: col,
+            q: q
+          });
+        }
+      }
+      sz = cs.maskSize.split(/\s+/);
+      if ((ref$ = sz[0]) === 'cover' || ref$ === 'contain') {
+        return null;
+      }
+      len = function(v, ref){
+        if (!v || v === 'auto') {
+          return ref;
+        } else if (/%$/.test(v)) {
+          return ref * parseFloat(v) / 100;
+        } else {
+          return parseFloat(v);
+        }
+      };
+      tw = len(sz[0], w);
+      th = len(sz[1], h);
+      ps = cs.maskPosition.split(/\s+/);
+      pos = function(v, free){
+        if (/%$/.test(v)) {
+          return free * parseFloat(v) / 100;
+        } else {
+          return parseFloat(v) || 0;
+        }
+      };
+      x = pos(ps[0], w - tw);
+      y = pos(ps[1] || '0%', h - th);
+      glen = angle === 90 || angle === 270 ? tw : th;
+      offs = stops.map(function(s){
+        if (s.q == null) {
+          return null;
+        } else if (/%$/.test(s.q)) {
+          return parseFloat(s.q) / 100;
+        } else {
+          return parseFloat(s.q) / glen;
+        }
+      });
+      if (offs[0] == null) {
+        offs[0] = 0;
+      }
+      if (offs[offs.length - 1] == null) {
+        offs[offs.length - 1] = 1;
+      }
+      i = 0;
+      while (i < offs.length) {
+        if (offs[i] != null) {
+          i++;
+          continue;
+        }
+        j = i;
+        while (offs[j] == null) {
+          j++;
+        }
+        for (i$ = i; i$ < j; ++i$) {
+          k = i$;
+          offs[k] = offs[i - 1] + (offs[j] - offs[i - 1]) * (k - i + 1) / (j - i + 1);
+        }
+        i = j;
+      }
+      for (i$ = 1, to$ = offs.length; i$ < to$; ++i$) {
+        i = i$;
+        offs[i] = Math.max(offs[i], offs[i - 1]);
+      }
+      ref$ = {
+        90: [0, 0, 1, 0],
+        270: [1, 0, 0, 0],
+        180: [0, 0, 0, 1],
+        0: [0, 1, 0, 0]
+      }[angle], x1 = ref$[0], y1 = ref$[1], x2 = ref$[2], y2 = ref$[3];
+      grad = stops.map(function(s, i){
+        return "<stop offset=\"" + fmt(offs[i]) + "\" stop-color=\"rgb(" + s.col[0] + "," + s.col[1] + "," + s.col[2] + ")\" stop-opacity=\"" + s.col[3] + "\"/>";
+      }).join('');
+      return {
+        grad: "<linearGradient x1=\"" + x1 + "\" y1=\"" + y1 + "\" x2=\"" + x2 + "\" y2=\"" + y2 + "\">" + grad + "</linearGradient>",
+        rect: [x, y, tw, th],
+        key: cs.maskImage
+      };
+      function fn$(it){
+        return it;
+      }
+    };
+    clipOf = function(cs, w, h){
+      var m, v, ref$, t, r, b, l, len;
+      if (!(m = /^inset\(([^)]*)\)$/.exec(cs.clipPath)) || /round/.test(m[1])) {
+        return null;
+      }
+      v = m[1].trim().split(/\s+/);
+      if (!((ref$ = v.length) === 1 || ref$ === 2 || ref$ === 3 || ref$ === 4) || v.some(function(x){
+        return !/^-?[\d.]+(px|%)$/.test(x) && x !== '0';
+      })) {
+        return null;
+      }
+      ref$ = [
+        v[0], (ref$ = v[1]) != null
+          ? ref$
+          : v[0], (ref$ = v[2]) != null
+          ? ref$
+          : v[0], (ref$ = v[3]) != null
+          ? ref$
+          : (ref$ = v[1]) != null
+            ? ref$
+            : v[0]
+      ], t = ref$[0], r = ref$[1], b = ref$[2], l = ref$[3];
+      len = function(x, ref){
+        if (/%$/.test(x)) {
+          return ref * parseFloat(x) / 100;
+        } else {
+          return parseFloat(x) || 0;
+        }
+      };
+      ref$ = [len(t, h), len(b, h)], t = ref$[0], b = ref$[1];
+      ref$ = [len(r, w), len(l, w)], r = ref$[0], l = ref$[1];
+      return [l, t, Math.max(0, w - l - r), Math.max(0, h - t - b)];
+    };
+    sample = function(opt, ctx){
+      var el, seek, n, fps, from, recs, byEl, recOf, variant, walkSvg, walk, i$, i;
+      el = opt.el, seek = opt.seek, n = opt.n, fps = opt.fps, from = opt.from;
+      recs = [];
+      byEl = new Map;
+      recOf = function(e, parent){
+        var rec;
+        if (rec = byEl.get(e)) {
+          return rec;
+        }
+        rec = {
+          id: recs.length,
+          el: e,
+          parent: parent,
+          kids: [],
+          variants: [],
+          keys: new Map,
+          frames: []
+        };
+        recs.push(rec);
+        byEl.set(e, rec);
+        if (parent) {
+          parent.kids.push(rec);
+        }
+        return rec;
+      };
+      variant = function(rec, sig, make){
+        var v;
+        v = rec.keys.get(sig);
+        if (v == null) {
+          v = rec.variants.length;
+          rec.keys.set(sig, v);
+          rec.variants.push(make());
+        }
+        return v;
+      };
+      walkSvg = function(e, parent, i){
+        var cs, tag, rec, m, o, i$, ref$, len$, c, v, a, p, r, len, drawable;
+        cs = getComputedStyle(e);
+        if (cs.display === 'none') {
+          return;
+        }
+        tag = e.tagName.toLowerCase();
+        rec = recOf(e, parent);
+        if (in$(tag, SVGSTATIC)) {
+          if (!rec.kind) {
+            rec.kind = 'static';
+            rec.markup = xml(e);
+          } else if (xml(e) !== rec.markup) {
+            ctx.warn("<" + tag + "> changes over time: only the first frame is kept");
+          }
+          rec.frames[i] = {
+            m: IDENT,
+            o: 1,
+            b: 0,
+            v: -1
+          };
+          return;
+        }
+        m = svgMatrix(e, cs, ctx);
+        o = +cs.opacity;
+        if (cs.mixBlendMode !== 'normal') {
+          rec.blend = cs.mixBlendMode;
+        }
+        if (in$(tag, SVGGROUP)) {
+          if (!rec.kind) {
+            rec.kind = 'g';
+            rec.attrs = groupAttrs(e, cs);
+          }
+          rec.frames[i] = {
+            m: m,
+            o: o,
+            b: 0,
+            v: -1
+          };
+          for (i$ = 0, len$ = (ref$ = Array.from(e.children)).length; i$ < len$; ++i$) {
+            c = ref$[i$];
+            walkSvg(c, rec, i);
+          }
+          return;
+        }
+        rec.kind = 'leaf';
+        v = -1;
+        a = p = null;
+        if (cs.visibility === 'visible' && o > 0) {
+          r = leaf(e, cs, ctx);
+          a = r.a, p = r.p;
+          if (r.t) {
+            rec.base == null && (rec.base = r.t);
+            m = mul(m, [1, 0, 0, 1, r.t.x - rec.base.x, r.t.y - rec.base.y]);
+            r.c.setAttribute(r.t.keys[0], rec.base.x);
+            r.c.setAttribute(r.t.keys[1], rec.base.y);
+          }
+          if (e.tagName.toLowerCase() === 'path') {
+            len = (function(){
+              try {
+                return e.getTotalLength();
+              } catch (e$) {
+                e = e$;
+                return null;
+              }
+            }());
+            drawable = cs.fill === 'none' && cs.strokeDasharray === 'none' && cs.markerStart === 'none' && cs.markerMid === 'none' && cs.markerEnd === 'none';
+          }
+          v = variant(rec, xml(r.c), function(){
+            return {
+              c: r.c,
+              f: r.f,
+              d: e.getAttribute('d'),
+              len: len,
+              drawable: drawable
+            };
+          });
+        }
+        return rec.frames[i] = {
+          m: m,
+          o: o,
+          b: 0,
+          v: v,
+          a: a,
+          p: p
+        };
+      };
+      walk = function(e, parent, i, depth){
+        var cs, tag, rec, ref$, x, y, w, h, m, gmask, gclip, masked, i$, len$, c, blur, elems, hasText, atomic, v, node, st, k, laters, results$ = [];
+        cs = getComputedStyle(e);
+        if (cs.display === 'none') {
+          return;
+        }
+        tag = e.tagName.toLowerCase();
+        rec = recOf(e, parent);
+        ref$ = box(e, e.parentNode, cs, ctx), x = ref$[0], y = ref$[1], w = ref$[2], h = ref$[3];
+        m = depth === 0
+          ? IDENT
+          : motionMatrix(x, y, cs, ctx);
+        rec.blend = cs.mixBlendMode !== 'normal' ? cs.mixBlendMode : null;
+        if (cs.zIndex !== 'auto') {
+          ctx.warn("z-index ignored ( dom order is used )");
+        }
+        gmask = cs.maskImage !== 'none' ? maskOf(cs, w, h) : null;
+        if (gmask) {
+          if (!rec.mask) {
+            rec.mask = gmask;
+          } else if (rec.mask.key !== gmask.key) {
+            ctx.warn("mask image changes over time: only the first is kept");
+          }
+        }
+        gclip = cs.clipPath !== 'none' ? clipOf(cs, w, h) : null;
+        if (gclip) {
+          rec.clipped = true;
+        }
+        masked = (cs.maskImage !== 'none' && !gmask) || (cs.clipPath !== 'none' && !gclip);
+        if (tag === 'svg' && !masked) {
+          if (!rec.kind) {
+            rec.kind = 'svg';
+            rec.vb = viewboxMatrix(e, w, h);
+            rec.clip = cs.overflow === 'visible'
+              ? null
+              : [w, h];
+            rec.style = styleDiff(e, cs);
+          }
+          rec.frames[i] = {
+            m: m,
+            o: +cs.opacity,
+            b: 0,
+            v: -1,
+            k: gmask && gmask.rect,
+            q: gclip
+          };
+          if (+cs.opacity > 0) {
+            for (i$ = 0, len$ = (ref$ = Array.from(e.children)).length; i$ < len$; ++i$) {
+              c = ref$[i$];
+              walkSvg(c, rec, i);
+            }
+          }
+          return;
+        }
+        blur = blurOf(cs.filter);
+        elems = Array.from(e.children);
+        hasText = Array.from(e.childNodes).some(function(n){
+          return n.nodeType === 3 && n.textContent.trim();
+        });
+        atomic = (tag === 'img' || tag === 'canvas' || tag === 'svg') || masked || !(blur != null) || (hasText && elems.length);
+        rec.atomic = atomic;
+        if (cs.overflow !== 'visible' && !atomic && elems.length) {
+          rec.clip == null && (rec.clip = [w, h]);
+        }
+        v = -1;
+        if (cs.visibility === 'visible' && +cs.opacity > 0) {
+          ctx.laters = [];
+          node = convert(e, ctx, 1, {
+            own: !atomic,
+            nobake: true
+          });
+          if (node) {
+            st = node.props.style;
+            for (i$ = 0, len$ = (ref$ = ['position', 'left', 'top', 'transform', 'transformOrigin', 'opacity']).length; i$ < len$; ++i$) {
+              k = ref$[i$];
+              delete st[k];
+            }
+            if (blur != null) {
+              delete st.filter;
+            }
+            if (gmask) {
+              for (i$ = 0, len$ = (ref$ = ['maskImage', 'maskPosition', 'maskSize', 'maskRepeat']).length; i$ < len$; ++i$) {
+                k = ref$[i$];
+                delete st[k];
+              }
+            }
+            if (gclip) {
+              delete st.clipPath;
+            }
+            delete node.blend;
+            laters = ctx.laters;
+            v = variant(rec, JSON.stringify(node), function(){
+              return {
+                node: node,
+                w: w,
+                h: h,
+                laters: laters
+              };
+            });
+          }
+        }
+        rec.frames[i] = {
+          m: m,
+          o: +cs.opacity,
+          b: blur || 0,
+          v: v,
+          k: gmask && gmask.rect,
+          q: gclip
+        };
+        if (!atomic && +cs.opacity > 0) {
+          for (i$ = 0, len$ = elems.length; i$ < len$; ++i$) {
+            c = elems[i$];
+            results$.push(walk(c, rec, i, depth + 1));
+          }
+          return results$;
+        }
+      };
+      for (i$ = 0; i$ < n; ++i$) {
+        i = i$;
+        if (opt.signal && opt.signal.aborted) {
+          throw new DOMException('aborted', 'AbortError');
+        }
+        seek(from + i / fps);
+        walk(el, null, i, 0);
+        if (opt.progress) {
+          opt.progress(0.5 * (i + 1) / n);
+        }
+      }
+      return recs;
+    };
+    drawOn = function(rec){
+      var vs, order, fams, famOf, i$, len$, k, d, f, ref$, fr, ref1$, results$ = [];
+      vs = rec.variants;
+      if (vs.length < 2 || !vs.every(function(v){
+        return v.d != null && v.len != null && v.drawable;
+      })) {
+        return;
+      }
+      order = (function(){
+        var i$, to$, results$ = [];
+        for (i$ = 0, to$ = vs.length; i$ < to$; ++i$) {
+          results$.push(i$);
+        }
+        return results$;
+      }()).sort(function(a, b){
+        return vs[b].d.length - vs[a].d.length;
+      });
+      fams = [];
+      famOf = [];
+      for (i$ = 0, len$ = order.length; i$ < len$; ++i$) {
+        k = order[i$];
+        d = vs[k].d;
+        f = fams.find(fn$);
+        if (!f) {
+          f = {
+            root: k
+          };
+          fams.push(f);
+        }
+        famOf[k] = f;
+      }
+      if (fams.length === vs.length) {
+        return;
+      }
+      rec.variants = fams.map(function(f, j){
+        var va;
+        va = vs[f.root];
+        f.j = j;
+        f.L = va.len + 1;
+        va.c.setAttribute('stroke-dasharray', f.L + " " + f.L);
+        return va;
+      });
+      for (i$ = 0, len$ = (ref$ = rec.frames).length; i$ < len$; ++i$) {
+        fr = ref$[i$];
+        if (fr && fr.v >= 0) {
+          f = famOf[fr.v];
+          fr.p = (ref1$ = fr.p || {}, ref1$['stroke-dashoffset'] = f.L - vs[fr.v].len, ref1$);
+          results$.push(fr.v = f.j);
+        }
+      }
+      return results$;
+      function fn$(f){
+        var r;
+        r = vs[f.root].d;
+        return r.startsWith(d) && (r.length === d.length || /[A-Za-z]/.test(r[d.length]));
+      }
+    };
+    PAD = 64;
+    draw = function(satori, fonts, rec, k, va){
+      var W, H, ref$;
+      W = va.w + 2 * PAD;
+      H = va.h + 2 * PAD;
+      ref$ = va.node.props.style;
+      ref$.position = 'absolute';
+      ref$.left = PAD;
+      ref$.top = PAD;
+      return satori({
+        type: 'div',
+        props: {
+          style: {
+            display: 'flex',
+            width: W,
+            height: H
+          },
+          children: [va.node]
+        }
+      }, {
+        width: W,
+        height: H,
+        fonts: fonts
+      }).then(function(svg){
+        var inner;
+        inner = svg.replace(/^<svg[^>]*>/, '').replace(/<\/svg>\s*$/, '').replace(/satori_/g, "s" + rec.id + "_" + k + "_");
+        return "<g transform=\"translate(" + (-PAD) + "," + (-PAD) + ")\">" + inner + "</g>";
+      });
+    };
+    attrTol = function(k){
+      if (/opacity/.test(k)) {
+        return 0.008;
+      } else {
+        return 0.05;
+      }
+    };
+    compose = function(recs, opt, fonts){
+      var n, fps, width, height, dur, css, fontNames, tail, series, rule, track, animateEl, attrsOf, maskMarkup, withMask, NOCLIP, withClip, leafMarkup, out, body, faces, style;
+      n = opt.n, fps = opt.fps, width = opt.width, height = opt.height;
+      dur = n / fps;
+      css = [];
+      fontNames = new Set;
+      tail = opt.repeat ? ' infinite' : ' forwards';
+      series = function(frames){
+        var last, vals;
+        last = frames.find(function(it){
+          return it != null;
+        });
+        vals = frames.map(function(f){
+          return last = f != null ? f : last;
+        });
+        if (vals.every(function(v){
+          return v.every(function(x, j){
+            return x === vals[0][j];
+          });
+        })) {
+          return [vals, false];
+        } else {
+          return [vals, true];
+        }
+      };
+      rule = function(cls, base, frames, prop, tol, val, step){
+        var ref$, vals, varies, idx, i, kf, name;
+        ref$ = series(frames), vals = ref$[0], varies = ref$[1];
+        if (!varies) {
+          base.push(prop + ":" + val(vals[0]));
+          return;
+        }
+        idx = step
+          ? (function(){
+            var i$, to$, results$ = [];
+            for (i$ = 0, to$ = n; i$ < to$; ++i$) {
+              i = i$;
+              if (i === 0 || vals[i].join() !== vals[i - 1].join()) {
+                results$.push(i);
+              }
             }
             return results$;
           }())
+          : simplify(vals, tol);
+        kf = idx.map(function(i){
+          return pct(i, n) + "{" + prop + ":" + val(vals[i]) + "}";
+        }).join('') + ("100%{" + prop + ":" + val(vals[n - 1]) + "}");
+        name = cls + "-" + prop.replace(/[^a-z]/g, '');
+        css.push("@keyframes " + name + "{" + kf + "}");
+        base.push(prop + ":" + val(vals[0]));
+        return name;
+      };
+      track = function(k, frames, tol){
+        var ref$, vals, varies, idx, times, vs;
+        ref$ = series(frames), vals = ref$[0], varies = ref$[1];
+        if (!varies) {
+          return [k, fmt(vals[0][0])];
+        }
+        idx = simplify(vals, [tol]);
+        times = idx.map(function(i){
+          return i / n;
+        });
+        vs = idx.map(function(i){
+          return fmt(vals[i][0]);
+        });
+        if (times[times.length - 1] < 1) {
+          times.push(1);
+          vs.push(fmt(vals[n - 1][0]));
+        }
+        return [
+          k, fmt(vals[0][0]), {
+            times: times,
+            vs: vs
+          }
+        ];
+      };
+      animateEl = function(k, anim){
+        var a;
+        a = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
+        a.setAttribute('attributeName', k);
+        a.setAttribute('dur', dur + "s");
+        a.setAttribute('calcMode', 'linear');
+        a.setAttribute('keyTimes', anim.times.map(function(it){
+          return +it.toFixed(4);
+        }).join(';'));
+        a.setAttribute('values', anim.vs.join(';'));
+        if (opt.repeat) {
+          a.setAttribute('repeatCount', 'indefinite');
+        } else {
+          a.setAttribute('fill', 'freeze');
+        }
+        return a;
+      };
+      attrsOf = function(rec){
+        var F, keys, i$, len$, f, k, ret;
+        F = rec.frames;
+        keys = new Set;
+        for (i$ = 0, len$ = F.length; i$ < len$; ++i$) {
+          f = F[i$];
+          if (f && f.a) {
+            for (k in f.a) {
+              keys.add(k);
+            }
+          }
+        }
+        ret = [];
+        keys.forEach(function(k){
+          return ret.push(track(k, (function(){
+            var i$, to$, results$ = [];
+            for (i$ = 0, to$ = n; i$ < to$; ++i$) {
+              results$.push(i$);
+            }
+            return results$;
+          }()).map(function(i){
+            if (F[i] && F[i].a && F[i].a[k] != null) {
+              return [F[i].a[k]];
+            } else {
+              return null;
+            }
+          }), attrTol(k)));
+        });
+        return ret;
+      };
+      maskMarkup = function(rec){
+        var F, r, i$, ref$, len$, j, k, ref1$, _, v, anim, grad;
+        F = rec.frames;
+        r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        r.setAttribute('fill', "url(#mg" + rec.id + ")");
+        for (i$ = 0, len$ = (ref$ = ['x', 'y', 'width', 'height']).length; i$ < len$; ++i$) {
+          j = i$;
+          k = ref$[i$];
+          ref1$ = track(k, (fn$()).map(fn1$), 0.25), _ = ref1$[0], v = ref1$[1], anim = ref1$[2];
+          r.setAttribute(k, v);
+          if (anim) {
+            r.appendChild(animateEl(k, anim));
+          }
+        }
+        grad = rec.mask.grad.replace('<linearGradient', "<linearGradient id=\"mg" + rec.id + "\"");
+        return "<mask id=\"m" + rec.id + "\" maskUnits=\"userSpaceOnUse\" x=\"-100000\" y=\"-100000\" width=\"200000\" height=\"200000\" style=\"mask-type:alpha\">" + grad + xml(r) + "</mask>";
+        function fn$(){
+          var i$, to$, results$ = [];
+          for (i$ = 0, to$ = n; i$ < to$; ++i$) {
+            results$.push(i$);
+          }
+          return results$;
+        }
+        function fn1$(i){
+          if (F[i] && F[i].k) {
+            return [F[i].k[j]];
+          } else {
+            return null;
+          }
+        }
+      };
+      withMask = function(rec, inner){
+        if (!rec.mask) {
+          return inner;
+        }
+        return maskMarkup(rec) + "<g mask=\"url(#m" + rec.id + ")\">" + inner + "</g>";
+      };
+      NOCLIP = [-100000, -100000, 200000, 200000];
+      withClip = function(rec, inner){
+        var F, r, i$, ref$, len$, j, k, ref1$, _, v, anim;
+        if (!rec.clipped) {
+          return inner;
+        }
+        F = rec.frames;
+        r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        for (i$ = 0, len$ = (ref$ = ['x', 'y', 'width', 'height']).length; i$ < len$; ++i$) {
+          j = i$;
+          k = ref$[i$];
+          ref1$ = track(k, (fn$()).map(fn1$), 0.25), _ = ref1$[0], v = ref1$[1], anim = ref1$[2];
+          r.setAttribute(k, v);
+          if (anim) {
+            r.appendChild(animateEl(k, anim));
+          }
+        }
+        return "<clipPath id=\"q" + rec.id + "\">" + xml(r) + "</clipPath><g clip-path=\"url(#q" + rec.id + ")\">" + inner + "</g>";
+        function fn$(){
+          var i$, to$, results$ = [];
+          for (i$ = 0, to$ = n; i$ < to$; ++i$) {
+            results$.push(i$);
+          }
+          return results$;
+        }
+        function fn1$(i){
+          if (F[i]) {
+            return [(F[i].q || NOCLIP)[j]];
+          } else {
+            return null;
+          }
+        }
+      };
+      leafMarkup = function(rec, va){
+        var c, i$, ref$, len$, ref1$, k, v, anim, f;
+        c = va.c;
+        for (i$ = 0, len$ = (ref$ = rec.tracks).length; i$ < len$; ++i$) {
+          ref1$ = ref$[i$], k = ref1$[0], v = ref1$[1], anim = ref1$[2];
+          c.setAttribute(k, v);
+          if (anim) {
+            c.appendChild(animateEl(k, anim));
+          }
+        }
+        if (va.f && va.f.fontFamily) {
+          c.setAttribute('style', (c.getAttribute('style') || '') + ";font-family:" + va.f.fontFamily);
+          for (i$ = 0, len$ = (ref$ = va.f.fontFamily.split(',')).length; i$ < len$; ++i$) {
+            f = ref$[i$];
+            fontNames.add(f.trim().replace(/'/g, ''));
+          }
+        }
+        return xml(c);
+      };
+      out = function(rec){
+        var cls, base, anims, F, at, name, opa, pk, i$, len$, f, k, vs, kids, inner;
+        if (rec.kind === 'static') {
+          return rec.markup;
+        }
+        cls = "n" + rec.id;
+        base = [];
+        anims = [];
+        F = rec.frames;
+        at = function(f){
+          return (function(){
+            var i$, to$, results$ = [];
+            for (i$ = 0, to$ = n; i$ < to$; ++i$) {
+              results$.push(i$);
+            }
+            return results$;
+          }()).map(function(i){
+            if (F[i]) {
+              return f(F[i]);
+            } else {
+              return null;
+            }
+          });
+        };
+        if (name = rule(cls, base, at(function(f){
+          return f.m;
+        }), 'transform', [0.005, 0.005, 0.005, 0.005, 0.25, 0.25], function(v){
+          return "matrix(" + v.map(function(x, j){
+            if (j > 3) {
+              return +x.toFixed(2);
+            } else {
+              return fmt(x);
+            }
+          }).join(',') + ")";
+        }, false)) {
+          anims.push(name + " " + dur + "s linear");
+        }
+        opa = (function(){
+          var i$, to$, results$ = [];
+          for (i$ = 0, to$ = n; i$ < to$; ++i$) {
+            results$.push(i$);
+          }
+          return results$;
+        }()).map(function(i){
+          return [F[i] ? F[i].o : 0];
+        });
+        if (name = rule(cls, base, opa, 'opacity', [0.008], function(v){
+          return +v[0].toFixed(3);
+        }, false)) {
+          anims.push(name + " " + dur + "s linear");
+        }
+        if (name = rule(cls, base, at(function(f){
+          return [f.b];
+        }), 'filter', [0.05], function(v){
+          if (v[0] > 0.01) {
+            return "blur(" + fmt(v[0]) + "px)";
+          } else {
+            return 'none';
+          }
+        }, false)) {
+          anims.push(name + " " + dur + "s linear");
+        }
+        if (rec.kind === 'leaf') {
+          pk = new Set;
+          for (i$ = 0, len$ = F.length; i$ < len$; ++i$) {
+            f = F[i$];
+            if (f && f.p) {
+              for (k in f.p) {
+                pk.add(k);
+              }
+            }
+          }
+          pk.forEach(function(k){
+            var unit, name;
+            unit = /opacity/.test(k) ? '' : 'px';
+            if (name = rule(cls, base, at(function(f){
+              if (f.p) {
+                return [f.p[k]];
+              } else {
+                return null;
+              }
+            }), k, [attrTol(k)], function(v){
+              return fmt(v[0]) + "" + unit;
+            }, false)) {
+              return anims.push(name + " " + dur + "s linear");
+            }
+          });
+        }
+        if (rec.blend) {
+          base.push("mix-blend-mode:" + rec.blend);
+        }
+        if (anims.length) {
+          base.push("animation:" + anims.map(function(it){
+            return it + tail;
+          }).join(','));
+        }
+        css.push("." + cls + "{" + base.join(';') + "}");
+        if (rec.kind === 'leaf') {
+          rec.tracks = attrsOf(rec);
+        }
+        vs = rec.variants.map(function(va, k){
+          var vcls, vb, shown, name;
+          vcls = cls + "v" + k;
+          vb = [];
+          shown = (function(){
+            var i$, to$, results$ = [];
+            for (i$ = 0, to$ = n; i$ < to$; ++i$) {
+              results$.push(i$);
+            }
+            return results$;
+          }()).map(function(i){
+            return [F[i] && F[i].v === k ? 1 : 0];
+          });
+          if (name = rule(vcls, vb, shown, 'visibility', [0.5], function(v){
+            if (v[0]) {
+              return 'visible';
+            } else {
+              return 'hidden';
+            }
+          }, true)) {
+            vb.push("animation:" + name + " " + dur + "s step-end" + tail);
+          }
+          css.push("." + vcls + "{" + vb.join(';') + "}");
+          return "<g class=\"" + vcls + "\">" + (rec.kind === 'leaf'
+            ? leafMarkup(rec, va)
+            : va.svg) + "</g>";
+        });
+        kids = rec.kids.map(out).join('');
+        if (rec.kind === 'svg') {
+          inner = "<g transform=\"matrix(" + rec.vb.map(fmt).join(',') + ")\" style=\"" + rec.style.replace(/"/g, "'") + "\">" + kids + "</g>";
+          if (rec.clip) {
+            inner = "<clipPath id=\"c" + rec.id + "\"><rect width=\"" + rec.clip[0] + "\" height=\"" + rec.clip[1] + "\"/></clipPath><g clip-path=\"url(#c" + rec.id + ")\">" + inner + "</g>";
+          }
+          return "<g class=\"" + cls + "\">" + withClip(rec, withMask(rec, inner)) + "</g>";
+        }
+        if (rec.kind === 'g') {
+          return "<g class=\"" + cls + "\" " + rec.attrs + ">" + kids + "</g>";
+        }
+        if (rec.clip && kids) {
+          kids = "<clipPath id=\"c" + rec.id + "\"><rect width=\"" + rec.clip[0] + "\" height=\"" + rec.clip[1] + "\"/></clipPath><g clip-path=\"url(#c" + rec.id + ")\">" + kids + "</g>";
+        }
+        return "<g class=\"" + cls + "\">" + withClip(rec, withMask(rec, vs.join('') + kids)) + "</g>";
+      };
+      body = out(recs[0]);
+      faces = fonts.filter(function(it){
+        return fontNames.has(it.name);
+      }).map(function(f){
+        return ("@font-face{font-family:'" + f.name + "';font-weight:" + f.weight + ";font-style:" + f.style + ";") + ("src:url(data:font/ttf;base64," + b64Bytes(f.data) + ") format('truetype')}");
+      });
+      style = faces.join('') + "g{transform-box:view-box;transform-origin:0 0}" + css.join('');
+      return "<svg width=\"" + width + "\" height=\"" + height + "\" viewBox=\"0 0 " + width + " " + height + "\" xmlns=\"http://www.w3.org/2000/svg\"><style>" + style + "</style>" + body + "</svg>";
+    };
+    animate = function(opt){
+      var ctx, fps, from, to, ref$, n, el, o, t0, recs, i$, len$, rec, t1, fonts;
+      opt == null && (opt = {});
+      ctx = makeCtx();
+      fps = opt.fps || 30;
+      from = opt.from || 0;
+      to = (ref$ = opt.to) != null
+        ? ref$
+        : opt.duration;
+      n = Math.max(1, Math.round((to - from) * fps));
+      el = opt.el;
+      o = {
+        el: el,
+        seek: opt.seek,
+        n: n,
+        fps: fps,
+        from: from,
+        signal: opt.signal,
+        progress: opt.progress
+      };
+      t0 = performance.now();
+      recs = sample(o, ctx);
+      for (i$ = 0, len$ = recs.length; i$ < len$; ++i$) {
+        rec = recs[i$];
+        if (rec.kind === 'leaf') {
+          drawOn(rec);
+        }
+      }
+      t1 = performance.now();
+      fonts = null;
+      return prepare(ctx, opt).then(function(arg$){
+        var satori, f, jobs, i$, ref$, len$, rec, j$, ref1$, len1$, k, va, step;
+        satori = arg$[0], f = arg$[1];
+        fonts = f;
+        jobs = [];
+        for (i$ = 0, len$ = (ref$ = recs).length; i$ < len$; ++i$) {
+          rec = ref$[i$];
+          if (!rec.kind) {
+            for (j$ = 0, len1$ = (ref1$ = rec.variants).length; j$ < len1$; ++j$) {
+              k = j$;
+              va = ref1$[j$];
+              jobs.push([rec, k, va]);
+            }
+          }
+        }
+        step = function(i){
+          var ref$, rec, k, va, i$, len$, f;
+          if (i >= jobs.length) {
+            return;
+          }
+          ref$ = jobs[i], rec = ref$[0], k = ref$[1], va = ref$[2];
+          for (i$ = 0, len$ = (ref$ = va.laters).length; i$ < len$; ++i$) {
+            f = ref$[i$];
+            f(fonts);
+          }
+          return draw(satori, fonts, rec, k, va).then(function(svg){
+            va.svg = svg;
+            if (opt.progress) {
+              opt.progress(0.5 + 0.5 * (i + 1) / jobs.length);
+            }
+            return step(i + 1);
+          });
+        };
+        return step(0);
+      }).then(function(){
+        var svg, ref$, count, stats;
+        svg = compose(recs, {
+          n: n,
+          fps: fps,
+          repeat: (ref$ = opt.loop) != null ? ref$ : true,
+          width: opt.width || el.offsetWidth,
+          height: opt.height || el.offsetHeight
+        }, fonts);
+        count = function(k){
+          return recs.filter(function(r){
+            return (r.kind || 'html') === k;
+          }).reduce(function(a, r){
+            return a + r.variants.length;
+          }, 0);
+        };
+        stats = {
+          frames: n,
+          elements: recs.length,
+          variants: {
+            html: count('html'),
+            svg: count('leaf')
+          },
+          sampleMs: Math.round(t1 - t0),
+          totalMs: Math.round(performance.now() - t0),
+          bytes: svg.length
+        };
+        return {
+          svg: svg,
+          warnings: ctx.warnings(),
+          stats: stats
         };
       });
     };
+    lotion.animate = animate;
+    lotion.player.prototype.animate = function(opt){
+      var t0, p, this$ = this;
+      opt == null && (opt = {});
+      this.pause();
+      t0 = this.t;
+      p = Promise.resolve().then(function(){
+        return animate(import$({
+          el: this$.stage,
+          seek: this$.opt.seek,
+          duration: this$.duration,
+          width: this$.width,
+          height: this$.height
+        }, opt));
+      });
+      return p['finally'](function(){
+        return this$.opt.seek(t0);
+      });
+    };
     lotion.vector = vector;
     return lotion.player.prototype.vector = function(t, opt){
       var this$ = this;
@@ -814,4 +2108,9 @@
     while (++i < l) if (x === xs[i]) return true;
     return false;
   }
+  function import$(obj, src){
+    var own = {}.hasOwnProperty;
+    for (var key in src) if (own.call(src, key)) obj[key] = src[key];
+    return obj;
+  }
 }).call(this);