@oim-media/spec 0.0.0-stage → 1.27.8

package/tools/parity-core.mjs

@@ -0,0 +1,122 @@
+// Copyright (c) 2026 Xue Studios LLC
+// SPDX-License-Identifier: Apache-2.0
+// Visual conformance metric (CANONICAL_SPEC.md, "Visual conformance"). Zero dependencies.
+import zlib from 'node:zlib';
+
+export const CHANNEL_TOLERANCE = 40;
+// Calibrated 2026-11-07: passing text noise reaches 0.265 %, a unitless letterSpacing bug 0.509 %.
+export const MAX_AREA = 0.004;
+export const MAX_BLOB = 24 * 24;
+
+const SIGNATURE = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
+
+const paeth = (a, b, c) => {
+  const p = a + b - c, pa = Math.abs(p - a), pb = Math.abs(p - b), pc = Math.abs(p - c);
+  return pa <= pb && pa <= pc ? a : pb <= pc ? b : c;
+};
+
+/** Decodes an 8-bit, non-interlaced RGB or RGBA PNG to RGBA. */
+export const decodePng = (buf) => {
+  if (!buf.subarray(0, 8).equals(SIGNATURE)) throw new Error('unsupported PNG: bad signature');
+  let pos = 8, width = 0, height = 0, type = 0;
+  const idat = [];
+  while (pos < buf.length) {
+    const len = buf.readUInt32BE(pos), kind = buf.toString('latin1', pos + 4, pos + 8);
+    const data = buf.subarray(pos + 8, pos + 8 + len);
+    if (kind === 'IHDR') {
+      width = data.readUInt32BE(0); height = data.readUInt32BE(4); type = data[9];
+      if (data[8] !== 8 || (type !== 2 && type !== 6) || data[12] !== 0)
+        throw new Error(`unsupported PNG: bit depth ${data[8]}, colour type ${type}, interlace ${data[12]}`);
+    } else if (kind === 'IDAT') idat.push(data);
+    else if (kind === 'IEND') break;
+    pos += 12 + len;
+  }
+  const raw = zlib.inflateSync(Buffer.concat(idat));
+  const bpp = type === 6 ? 4 : 3, stride = width * bpp;
+  const out = Buffer.alloc(stride * height);
+  for (let y = 0; y < height; y++) {
+    const f = raw[y * (stride + 1)], src = y * (stride + 1) + 1, row = y * stride;
+    for (let i = 0; i < stride; i++) {
+      const a = i >= bpp ? out[row + i - bpp] : 0, b = y ? out[row - stride + i] : 0;
+      const c = i >= bpp && y ? out[row - stride + i - bpp] : 0;
+      const pred = f === 0 ? 0 : f === 1 ? a : f === 2 ? b : f === 3 ? (a + b) >> 1 : f === 4 ? paeth(a, b, c) : NaN;
+      if (Number.isNaN(pred)) throw new Error(`unsupported PNG: filter ${f}`);
+      out[row + i] = (raw[src + i] + pred) & 255;
+    }
+  }
+  const rgba = new Uint8Array(width * height * 4);
+  for (let p = 0; p < width * height; p++) {
+    rgba[p * 4] = out[p * bpp]; rgba[p * 4 + 1] = out[p * bpp + 1]; rgba[p * 4 + 2] = out[p * bpp + 2];
+    rgba[p * 4 + 3] = bpp === 4 ? out[p * bpp + 3] : 255;
+  }
+  return { width, height, rgba };
+};
+
+const CRC_TABLE = Array.from({ length: 256 }, (_, n) => {
+  let c = n;
+  for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+  return c >>> 0;
+});
+const crc32 = (buf) => {
+  let c = 0xffffffff;
+  for (const byte of buf) c = CRC_TABLE[(c ^ byte) & 255] ^ (c >>> 8);
+  return (c ^ 0xffffffff) >>> 0;
+};
+const chunk = (kind, data) => {
+  const head = Buffer.alloc(8); head.writeUInt32BE(data.length); head.write(kind, 4, 'latin1');
+  const crc = Buffer.alloc(4); crc.writeUInt32BE(crc32(Buffer.concat([head.subarray(4), data])));
+  return Buffer.concat([head, data, crc]);
+};
+
+/** Encodes RGBA as an 8-bit RGBA PNG (filter 0). */
+export const encodePng = ({ width, height, rgba }) => {
+  const ihdr = Buffer.alloc(13);
+  ihdr.writeUInt32BE(width); ihdr.writeUInt32BE(height, 4); ihdr[8] = 8; ihdr[9] = 6;
+  const raw = Buffer.alloc((width * 4 + 1) * height);
+  for (let y = 0; y < height; y++) raw.set(rgba.subarray(y * width * 4, (y + 1) * width * 4), y * (width * 4 + 1) + 1);
+  return Buffer.concat([SIGNATURE, chunk('IHDR', ihdr), chunk('IDAT', zlib.deflateSync(raw)), chunk('IEND', Buffer.alloc(0))]);
+};
+
+// Composite over white: a transparent render is a blank page, not black.
+const onWhite = (rgba, i) => {
+  const a = rgba[i + 3] / 255;
+  return [0, 1, 2].map((k) => rgba[i + k] * a + 255 * (1 - a));
+};
+
+/** Compares a render against a golden under the visual conformance metric. */
+export const compare = (golden, render) => {
+  const { width: w, height: h } = golden;
+  if (w !== render.width || h !== render.height)
+    return { ok: false, reason: `size ${render.width}x${render.height}, expected ${w}x${h}`, area: 1, largestBlob: 0, mask: new Uint8Array(0) };
+  const diff = new Uint8Array(w * h);
+  for (let p = 0; p < w * h; p++) {
+    const g = onWhite(golden.rgba, p * 4), r = onWhite(render.rgba, p * 4);
+    diff[p] = g.some((v, k) => Math.abs(Math.round(v) - Math.round(r[k])) > CHANNEL_TOLERANCE) ? 1 : 0;
+  }
+  // 3x3 erosion: antialiasing and hinting leave 1-2 px lines; a defect is an area.
+  const mask = new Uint8Array(w * h);
+  let count = 0;
+  for (let y = 1; y < h - 1; y++)
+    for (let x = 1; x < w - 1; x++) {
+      let all = 1;
+      for (let dy = -1; dy <= 1 && all; dy++) for (let dx = -1; dx <= 1 && all; dx++) all = diff[(y + dy) * w + x + dx];
+      if (all) { mask[y * w + x] = 1; count++; }
+    }
+  let largestBlob = 0;
+  const seen = new Uint8Array(w * h), stack = [];
+  for (let p = 0; p < w * h; p++) {
+    if (!mask[p] || seen[p]) continue;
+    let size = 0;
+    stack.push(p); seen[p] = 1;
+    while (stack.length) {
+      const q = stack.pop(), x = q % w;
+      size++;
+      for (const n of [q - w, q + w, x > 0 ? q - 1 : -1, x < w - 1 ? q + 1 : -1])
+        if (n >= 0 && n < w * h && mask[n] && !seen[n]) { seen[n] = 1; stack.push(n); }
+    }
+    largestBlob = Math.max(largestBlob, size);
+  }
+  const area = count / (w * h);
+  const ok = area <= MAX_AREA && largestBlob <= MAX_BLOB;
+  return { ok, reason: ok ? undefined : `area ${(area * 100).toFixed(3)}%, largest blob ${largestBlob}px`, area, largestBlob, mask };
+};

package/tools/parity.mjs

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+// Copyright (c) 2026 Xue Studios LLC
+// SPDX-License-Identifier: Apache-2.0
+// Visual conformance: compares a renderer's PNGs against the web goldens.
+// Usage: node parity.mjs <renders-dir> --renderer <name> [--out <diff-dir>]
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { decodePng, encodePng, compare } from './parity-core.mjs';
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+
+const names = (dir, suffix) =>
+  fs.readdirSync(dir).filter((f) => f.endsWith(suffix)).map((f) => f.slice(0, -suffix.length)).sort();
+
+const diffImage = (golden, mask) => {
+  const rgba = new Uint8Array(golden.rgba.length);
+  for (let p = 0; p < mask.length; p++) {
+    const i = p * 4;
+    if (mask[p]) rgba.set([255, 0, 0, 255], i);
+    else rgba.set([golden.rgba[i] * 0.3, golden.rgba[i + 1] * 0.3, golden.rgba[i + 2] * 0.3, 255], i);
+  }
+  return { width: golden.width, height: golden.height, rgba };
+};
+
+export const runParity = ({
+  rendersDir,
+  renderer,
+  outDir,
+  goldenDir = path.join(HERE, '..', 'vectors', 'golden'),
+  vectorsDir = path.join(HERE, '..', 'vectors'),
+}) => {
+  const failures = [], lines = [];
+  const vectors = names(vectorsDir, '.oim.png');
+  const goldens = names(goldenDir, '.web.png');
+  const exceptionsFile = path.join(goldenDir, 'exceptions.json');
+  const exceptions = (fs.existsSync(exceptionsFile) ? JSON.parse(fs.readFileSync(exceptionsFile, 'utf8')) : {})[renderer] ?? {};
+
+  for (const v of vectors) if (!goldens.includes(v)) failures.push(`${v}: no golden for this vector, regenerate the goldens`);
+  for (const g of goldens) if (!vectors.includes(g)) failures.push(`${g}: orphan golden, no vector`);
+  for (const e of Object.keys(exceptions)) if (!vectors.includes(e)) failures.push(`${e}: unknown vector in exceptions`);
+  if (outDir) fs.mkdirSync(outDir, { recursive: true });
+
+  for (const name of goldens.filter((g) => vectors.includes(g))) {
+    const renderPath = path.join(rendersDir, `${name}.png`);
+    const excepted = name in exceptions;
+    // `broken`: no comparison happened (missing, unreadable or wrong-size render). An exception never covers it.
+    let verdict, detail = '', broken = false;
+    if (!fs.existsSync(renderPath)) {
+      verdict = 'FAIL'; detail = 'missing render'; broken = true;
+    } else {
+      let golden, r;
+      try {
+        golden = decodePng(fs.readFileSync(path.join(goldenDir, `${name}.web.png`)));
+        r = compare(golden, decodePng(fs.readFileSync(renderPath)));
+      } catch (err) {
+        r = { ok: false, reason: err.message, area: 1, largestBlob: 0 };
+      }
+      broken = !r.ok && !r.mask?.length;
+      detail = r.reason ?? `area=${(r.area * 100).toFixed(3)}% blob=${r.largestBlob}px`;
+      verdict = r.ok ? 'PASS' : 'FAIL';
+      if (!r.ok && outDir && r.mask?.length) fs.writeFileSync(path.join(outDir, `${name}.diff.png`), encodePng(diffImage(golden, r.mask)));
+    }
+    if (excepted && verdict === 'PASS') failures.push(`${name}: passes, remove the exception for ${renderer}`);
+    else if (excepted && !broken) verdict = 'EXCEPTED';
+    else if (verdict === 'FAIL') failures.push(`${name}: ${detail}`);
+    lines.push(`${name.padEnd(32)} ${verdict.padEnd(8)} ${detail}`);
+  }
+  if (!lines.length) failures.push('no vectors compared: check the vectors and goldens directories');
+  return { failures, lines };
+};
+
+if (process.argv[1] && fileURLToPath(import.meta.url) === path.resolve(process.argv[1])) {
+  const args = process.argv.slice(2);
+  const flag = (n) => { const i = args.indexOf(n); return i >= 0 ? args[i + 1] : undefined; };
+  const rendersDir = args[0], renderer = flag('--renderer');
+  if (!rendersDir || !renderer) {
+    console.error('usage: parity.mjs <renders-dir> --renderer <name> [--out <diff-dir>]');
+    process.exit(2);
+  }
+  const { failures, lines } = runParity({ rendersDir, renderer, outDir: flag('--out') });
+  lines.forEach((l) => console.log(l));
+  failures.forEach((f) => console.error(`✖ ${f}`));
+  console.log(failures.length ? `\n${failures.length} failure(s)` : '\nvisual parity: OK');
+  process.exit(failures.length ? 1 : 0);
+}

package/vectors/README.md

@@ -0,0 +1,103 @@
+# Conformance vectors
+
+Each vector is a real `.oim` with the result that a reader must produce when
+opening it. The JSON Schema in `../schema/` says what **shape** a `.oim` has;
+this says what **result** comes out of a specific one.
+
+```
+<name>.oim.png        the file, signed, exactly as the system produces it
+<name>.expected.json  what a conforming reader must extract from it
+```
+
+## The Normative Vectors
+
+A reduced suite cannot tell apart an implementation that **reads the format**
+from one that **gets a simple case right by chance**. These 37 vectors cover the
+initial 20-vector matrix plus every capability added since contract 1.10.0:
+
+| # | Vector | What it covers |
+|---|---|---|
+| 1 | `basic-text` | The minimum: PNG container, `zTXt` chunk, zlib, two languages, geometry in `cqw` |
+| 2 | `groups-and-parallax` | Simple hierarchy (`childIds` / `groupId`) and depth (`parallax`) |
+| 3 | `interactive` | `isInteractive`, `states.active.actions`, per-side corners and `min_player` |
+| 4 | `multilang-cjk-rtl` | Complex multilingual coverage: Spanish, Japanese (CJK: `こんにちは世界`) and Arabic (RTL: `مرحبا بالعالم`) |
+| 5 | `typography-styling` | Advanced typography: `fontFamily`, `fontWeight`, `fontStyle: "italic"`, `textTransform`, `letterSpacing`, `lineHeight` |
+| 6 | `nested-groups` | Multi-level hierarchy: a root group containing a subgroup with child elements |
+| 7 | `asymmetric-borders` | Independent corner radii per corner (`borderRadius: "10px 25px 50px 0px"`) |
+| 8 | `shadow-effects` | Shadow system: `shadowEnabled`, `shadowColor`, `shadowBlur`, `shadowOffsetX`, `shadowOffsetY`, `shadowOpacity` |
+| 9 | `color-blending-opacity` | Visual composition: layer opacity (`opacity: 70`) and blend modes (`blendMode: "multiply"`) |
+| 10 | `strokes-and-borders` | Vector stroke and outlines: `borderWidth`, `borderColor`, `strokeStyle: "dashed"` |
+| 11 | `parallax-infinite` | Continuous horizontal looping parallax effect (`mode: "infinite_horizontal"`, `speed_px_sec`, `direction`) |
+| 12 | `interactive-hover` | Cursor interactive state: `states.hover` with `scale`, `rotation`, `opacity` |
+| 13 | `interactive-chained-actions` | Several interactive actions chained when a layer is activated (`toggle`, `hide`) |
+| 14 | `filter-effects` | CSS visual filters: `filterBlur`, `filterBrightness`, `filterContrast`, `filterSaturate`, `filterHueRotate` |
+| 15 | `text-runs-precalculated` | Precalculated layout for native non-web renderers (`textRuns` with `lines`, `width`, `yOffset`) |
+| 16 | `multi-container-layout` | Several `container` slots organising the spatial layout of the document |
+| 17 | `extreme-aspect-ratios` | Ultra-wide panoramic canvas (`1600x400`, 4:1 ratio) testing container consistency |
+| 18 | `transparent-background` | Strictly transparent background (`fillColor: "transparent"`) under the normative colour rule |
+| 19 | `layer-ordering-zindex` | Strict stacking sequence with slots overlapping at identical coordinates |
+| 20 | `full-monty-composite` | Comprehensive master document combining multilingual content, active/hover interactivity, groups, parallax and shadows |
+| 21 | `legacy-text-chunk` | The same document as `basic-text` in the legacy container: a `tEXt` chunk with base64 of raw deflate |
+| 22 | `layer-blur` | Layer blur (`layerBlur`) on the style of a text and of a shape |
+| 23 | `layer-grain` | Per-layer grain (contract 1.10.0): `grain`, `grainIntensity`, `grainSize` and `grainBlend` |
+| 24 | `flip` | Layer flip (contract 1.14.0): `flipX` and `flipY` on rotated shapes |
+| 25 | `crop` | Image crop (contract 1.15.0): `imageCrop` framing an image at x 20 %, y 70 % and zoom 2 |
+| 26 | `accessibility` | Accessibility (contract 1.16.0): document `description`, per-language `alt` and `decorative` |
+| 27 | `image-fill` | Image fill (contract 1.17.0): shapes filled with an embedded photo and `fillImageCrop` |
+| 28 | `media-filters` | Media filters (contract 1.18.0): `filterPreset` on a photo and on a circular frame with blur and stroke |
+| 29 | `frame-shapes` | Frame shapes (contract 1.19.0): a cloud, a custom SVG path (`svgViewBox`) and a star with a flipped photo |
+| 30 | `palettes` | Named palettes (contract 1.20.0): `dark` and `light`, `defaultPalette: "dark"`, and colour roles |
+| 31 | `pattern-color-roles` | Colour roles in patterns and shadows (contract 1.21.0) |
+| 32 | `reveal-and-play` | Per-layer reveal and the `play` action (contract 1.22.0) |
+| 33 | `reedit-english` | Re-edit permission in English (contract 1.23.0): `reedit: "public"`, signed by the production service |
+| 34 | `embedded-font-woff` | Embedded font (contract 1.27.0): Inter bold as a static WOFF subset (`fonts[].format: "woff"`) |
+| 35 | `background-pattern-order` | A pattern background listed last still paints under every layer; pattern tile size; unitless `letterSpacing` on centred text |
+| 36 | `shape-shadows` | Hard shadows on a circle and on a circular photo frame: the shadow follows the shape, not its box |
+| 37 | `artistic-text` | Artistic text (4.6): a curved 3D title with shaded extrusion, outer and inner strokes and a gradient, and a two-line word, drawn with the embedded Inter subset |
+
+## How to use it from another language
+
+1. Open the `.oim` as a PNG and look for the metadata chunk: `zTXt` (key `OIM_Data`; the one written since 29 Oct 2026), or `tEXt` / `iTXt` (keys `OIM_Data` or `OIM_JSON_DATA`).
+2. Decompress the payload: if it comes in base64, decode it first; decompression is **raw deflate** (no zlib header, RFC 1951) or standard zlib.
+3. Interpret the result as UTF-8 JSON: these are the document's metadata.
+4. Compare with `<name>.expected.json`, ignoring its `description` field.
+
+What is compared is what two implementations can genuinely disagree on: the
+geometry **already normalised** to `cqw` or user units, the hierarchy, the depth,
+the typography and the declared interactivity. Not the whole metadata — a full
+dump breaks every time the compiler adds a field, and then it gets regenerated
+without a look, which is a vector that no longer checks anything.
+
+## The signature
+
+All 37 vectors are signed with the public key published in `packages/spec/keys.json`.
+The signature covers the canonical serialisation
+of the metadata and the cryptographic hash of the pixels (`image_hash` over the `IDAT` chunks).
+A reader that verifies must rebuild that canonical form following the seven rules
+specified in the `README.md` at the root of `packages/spec`; one that only reads the format
+may ignore it, but then it must not claim to validate authorship.
+
+## How they were generated
+
+The vectors are generated by Xue Studios' signing service, through the same
+production pipeline that signs every published `.oim`: the slots are normalised
+to `cqw`, the file is sanitised, signed and embedded. The generator is not part
+of this repository; the output is committed here as-is, so every implementation
+reads the same files.
+
+`interactive` is the exception: it comes from a real editor export, and that is
+why it carries things the normalisation pipeline alone does not produce.
+
+The base image weighs about 3 KB and is reused across vectors. A published
+`.oim` weighs megabytes because it carries its rasterised canvas inside; the
+image is not what these vectors check.
+
+## Keeping them from rotting
+
+`packages/core/src/conformance-vectors.test.ts` runs them in every suite: if the
+reference implementation changes what it produces, the vectors fail. It is
+circular on purpose and in one direction — the reference defines the result, and
+the test prevents it from moving without the vectors moving with it.
+
+The day a second reader exists and disagrees, there is a concrete file to discuss
+instead of two opinions.

package/vectors/accessibility.expected.json

@@ -0,0 +1,67 @@
+{
+  "description": "Accessibility (contract 1.16.0): the work's `description`, a per-language `alt` on an image and `decorative` on a shape.",
+  "canvas": {
+    "natural_height": 600,
+    "natural_width": 800
+  },
+  "signed": true,
+  "key_version": "v1",
+  "slots": [
+    {
+      "id": "titulo",
+      "type": "text",
+      "position": [
+        10,
+        6.6667
+      ],
+      "name": "Titulo",
+      "content": {
+        "en": "Hello",
+        "es": "Hola"
+      },
+      "style": {
+        "width": "62.5cqw",
+        "height": "10.0cqw",
+        "fontSize": "5.0cqw"
+      }
+    },
+    {
+      "id": "foto",
+      "type": "image",
+      "position": [
+        12.5,
+        26.6667
+      ],
+      "name": "Foto",
+      "content": {
+        "*": "https://cdn.oim.media/demos/crop.png"
+      },
+      "style": {
+        "width": "37.5cqw",
+        "height": "25.0cqw",
+        "alt": {
+          "en": "A fjord between mountains",
+          "es": "Un fiordo entre montañas"
+        }
+      }
+    },
+    {
+      "id": "adorno",
+      "type": "geo",
+      "position": [
+        65,
+        26.6667
+      ],
+      "name": "Adorno",
+      "content": {
+        "es": ""
+      },
+      "style": {
+        "width": "25.0cqw",
+        "height": "25.0cqw",
+        "fillColor": "#264653",
+        "decorative": true
+      }
+    }
+  ]
+}

package/vectors/artistic-text.expected.json

@@ -0,0 +1,84 @@
+{
+  "description": "Artistic text (4.6): a curved 3D title with shaded extrusion, outer and inner strokes and a built-in gradient, and a second two-line word with no curve. Inter bold embedded (the embedded-font-woff subset), so every reader draws the same glyphs.",
+  "canvas": {
+    "natural_height": 600,
+    "natural_width": 800
+  },
+  "signed": true,
+  "key_version": "v1",
+  "reedit": "author_only",
+  "fonts": [
+    {
+      "family": "Inter",
+      "name": "oim-26dd479f-Inter",
+      "weight": 700,
+      "style": "normal",
+      "format": "woff"
+    }
+  ],
+  "slots": [
+    {
+      "id": "retro-title",
+      "type": "artistic-text",
+      "position": [
+        0,
+        10
+      ],
+      "name": "Retro title",
+      "content": {
+        "es": "Fuente"
+      },
+      "style": {
+        "width": "100.0cqw",
+        "height": "27.5cqw",
+        "fontSize": "15.0cqw",
+        "fillColor": "#f9a8d4",
+        "fontFamily": "Inter",
+        "fontWeight": "700",
+        "lineHeight": 1.25,
+        "artisticPreset": "retro-wave-3d",
+        "extrusionDepth": 18,
+        "extrusionAngle": 45,
+        "extrusionColor": "#DB2777",
+        "extrusionShading": true,
+        "curveAmount": 60,
+        "curveType": "arc",
+        "outerStrokeColor": "#1e1b4b",
+        "outerStrokeWidth": 4,
+        "innerStrokeColor": "#ffffff",
+        "innerStrokeWidth": 1,
+        "textGradientType": "sunset-gold"
+      }
+    },
+    {
+      "id": "two-lines",
+      "type": "artistic-text",
+      "position": [
+        25,
+        56.6667
+      ],
+      "name": "Two lines",
+      "content": {
+        "es": "ciudad\nsur"
+      },
+      "style": {
+        "width": "50.0cqw",
+        "height": "25.0cqw",
+        "fontSize": "8.0cqw",
+        "fillColor": "#fde047",
+        "fontFamily": "Inter",
+        "fontWeight": "700",
+        "lineHeight": 1.25,
+        "artisticPreset": "custom",
+        "extrusionDepth": 10,
+        "extrusionAngle": 135,
+        "extrusionColor": "#7c2d12",
+        "extrusionShading": false,
+        "curveAmount": 0,
+        "curveType": "arc",
+        "outerStrokeColor": "#000000",
+        "outerStrokeWidth": 2
+      }
+    }
+  ]
+}

package/vectors/asymmetric-borders.expected.json

@@ -0,0 +1,29 @@
+{
+  "description": "Independent corner radii for each corner.",
+  "canvas": {
+    "natural_height": 600,
+    "natural_width": 800
+  },
+  "signed": true,
+  "key_version": "v1",
+  "slots": [
+    {
+      "id": "caja_curva",
+      "type": "geo",
+      "position": [
+        12.5,
+        16.6667
+      ],
+      "name": "Caja Asimétrica",
+      "content": {
+        "es": ""
+      },
+      "style": {
+        "width": "37.5cqw",
+        "height": "18.75cqw",
+        "borderRadius": "10px 25px 50px 0px",
+        "fillColor": "#3b82f6"
+      }
+    }
+  ]
+}

package/vectors/background-pattern-order.expected.json

@@ -0,0 +1,95 @@
+{
+  "description": "A background pattern listed after the layers it sits behind, its stored tile, and a text with a unitless letterSpacing.",
+  "canvas": {
+    "natural_height": 600,
+    "natural_width": 800
+  },
+  "languages": [
+    "es"
+  ],
+  "signed": true,
+  "key_version": "v1",
+  "palettes": {},
+  "reedit": "public",
+  "fonts": [
+    {
+      "family": "Inter",
+      "name": "oim-f8947d8f-Inter",
+      "weight": 400,
+      "style": "normal",
+      "format": "woff"
+    }
+  ],
+  "slots": [
+    {
+      "id": "front-card",
+      "type": "geo",
+      "position": [
+        25,
+        25
+      ],
+      "name": "Geo 1",
+      "style": {
+        "width": "50.0cqw",
+        "height": "37.5cqw",
+        "fillColor": "#be123c",
+        "strokeStyle": "solid",
+        "geoShape": "rectangle"
+      }
+    },
+    {
+      "id": "spaced-text",
+      "type": "text",
+      "position": [
+        27.5,
+        43.3333
+      ],
+      "name": "Text 2",
+      "content": {
+        "es": "Espaciado"
+      },
+      "style": {
+        "width": "45.0cqw",
+        "height": "10.0cqw",
+        "fontSize": "6.0cqw",
+        "fillColor": "#ffffff",
+        "fontFamily": "Inter",
+        "letterSpacing": 24,
+        "textRuns": {
+          "es": {
+            "fontSize": 48,
+            "lineHeight": 60,
+            "lines": [
+              {
+                "text": "Espaciado",
+                "width": 235.2,
+                "yOffset": 0
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      "id": "background-pattern-slot",
+      "type": "geo",
+      "position": [
+        0,
+        0
+      ],
+      "name": "Fondo Vectorial Animado",
+      "content": {
+        "en": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"160\" height=\"160\" viewBox=\"0 0 160 160\"> <rect width=\"100%\" height=\"100%\" fill=\"#fde68a\" /> <g transform=\"translate(20, 20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(180, 20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(20, 180) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(180, 180) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(60, 20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(60, 180) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(100, 20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(100, 180) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(140, 20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(-20, 20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(140, 180) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(-20, 180) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(20, 60) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(180, 60) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(60, 60) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(100, 60) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(140, 60) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(-20, 60) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(20, 100) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(180, 100) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(60, 100) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(100, 100) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(140, 100) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(-20, 100) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(20, 140) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(180, 140) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(20, -20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(180, -20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(60, 140) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(60, -20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(100, 140) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(100, -20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> </svg>",
+        "es": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"160\" height=\"160\" viewBox=\"0 0 160 160\"> <rect width=\"100%\" height=\"100%\" fill=\"#fde68a\" /> <g transform=\"translate(20, 20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(180, 20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(20, 180) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(180, 180) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(60, 20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(60, 180) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(100, 20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(100, 180) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(140, 20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(-20, 20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(140, 180) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(-20, 180) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(20, 60) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(180, 60) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(60, 60) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(100, 60) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(140, 60) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(-20, 60) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(20, 100) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(180, 100) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(60, 100) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(100, 100) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(140, 100) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(-20, 100) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(20, 140) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(180, 140) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(20, -20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(180, -20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(60, 140) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(60, -20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(100, 140) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> <g transform=\"translate(100, -20) scale(1.2000000000000002) rotate(0) translate(-12, -12)\" fill=\"#1d4ed8\" stroke=\"none\" stroke-width=\"0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" /> </g> </svg>"
+      },
+      "style": {
+        "width": "100.0cqw",
+        "height": "75.0cqw",
+        "backgroundType": "pattern",
+        "backgroundPatternType": "stars",
+        "backgroundPatternColor": "#1d4ed8",
+        "backgroundPatternBgColor": "#fde68a"
+      }
+    }
+  ]
+}