Vector Engine

Przykłady scen

Gotowe sceny JSON do wklejenia — karta social media, logo z gradientem, wykres, ikona i kompozycja z warstwami.

Karta social media (1200×630)#

json
{
  "version": "1.0",
  "document": {
    "width": 1200,
    "height": 630,
    "background": "#0F1220",
    "gradients": [
      {
        "id": "accent",
        "type": "linear",
        "x1": 0, "y1": 0, "x2": 1, "y2": 0,
        "stops": [
          { "offset": 0, "color": "#0052FF" },
          { "offset": 1, "color": "#7C5CD6" }
        ]
      }
    ]
  },
  "objects": [
    { "id": "bar", "type": "rect", "x": 0, "y": 0, "width": 1200, "height": 8, "fill": "url(#accent)" },
    { "id": "title", "type": "text", "x": 80, "y": 240, "content": "Vector Engine", "fontSize": 64, "fontWeight": 800, "fill": "#FFFFFF" },
    { "id": "subtitle", "type": "text", "x": 80, "y": 310, "content": "JSON in · Pixels out", "fontSize": 28, "fill": "#9AA3B2" },
    { "id": "badge", "type": "rect", "x": 80, "y": 400, "width": 220, "height": 48, "rx": 24, "fill": "#1A1F36", "stroke": "#3D4670", "strokeWidth": 2 },
    { "id": "badge-text", "type": "text", "x": 190, "y": 431, "content": "C++23 · WASM", "fontSize": 18, "fontWeight": 600, "textAnchor": "middle", "fill": "#8F96F8" },
    { "id": "orb", "type": "circle", "cx": 1020, "cy": 315, "radius": 140, "fill": "url(#accent)", "opacity": 0.85 }
  ]
}

Logo z gradientem i grupą#

json
{
  "version": "1.0",
  "document": { "width": 512, "height": 512, "background": "none" },
  "objects": [
    {
      "id": "logo",
      "type": "group",
      "transform": { "translateX": 256, "translateY": 256 },
      "children": [
        { "id": "ring", "type": "circle", "cx": 0, "cy": 0, "radius": 200, "fill": "none", "stroke": "#0052FF", "strokeWidth": 24 },
        { "id": "core", "type": "circle", "cx": 0, "cy": 0, "radius": 90, "fill": "#0052FF" },
        { "id": "spark", "type": "path", "d": "M 0 -150 L 30 -30 L 150 0 L 30 30 L 0 150 L -30 30 L -150 0 L -30 -30 Z", "fill": "#FFFFFF", "opacity": 0.95 }
      ]
    }
  ]
}

Eksportuj jako PNG z --transparent, żeby dostać logo z przezroczystością.

Wykres słupkowy#

json
{
  "version": "1.0",
  "document": { "width": 900, "height": 500, "background": "#FFFFFF" },
  "objects": [
    { "id": "axis-x", "type": "line", "x1": 80, "y1": 420, "x2": 840, "y2": 420, "stroke": "#171717", "strokeWidth": 2 },
    { "id": "axis-y", "type": "line", "x1": 80, "y1": 60, "x2": 80, "y2": 420, "stroke": "#171717", "strokeWidth": 2 },
    { "id": "b1", "type": "rect", "x": 130, "y": 260, "width": 90, "height": 160, "rx": 6, "fill": "#0052FF" },
    { "id": "b2", "type": "rect", "x": 270, "y": 180, "width": 90, "height": 240, "rx": 6, "fill": "#3D7BFF" },
    { "id": "b3", "type": "rect", "x": 410, "y": 320, "width": 90, "height": 100, "rx": 6, "fill": "#7CA5FF" },
    { "id": "b4", "type": "rect", "x": 550, "y": 120, "width": 90, "height": 300, "rx": 6, "fill": "#0052FF" },
    { "id": "b5", "type": "rect", "x": 690, "y": 220, "width": 90, "height": 200, "rx": 6, "fill": "#3D7BFF" },
    { "id": "trend", "type": "polyline", "points": [ { "x": 175, "y": 240 }, { "x": 315, "y": 160 }, { "x": 455, "y": 300 }, { "x": 595, "y": 100 }, { "x": 735, "y": 200 } ], "fill": "none", "stroke": "#FF8A00", "strokeWidth": 4 },
    { "id": "label", "type": "text", "x": 450, "y": 470, "content": "Q1–Q5", "fontSize": 18, "textAnchor": "middle", "fill": "#737373" }
  ]
}

Ikona z path (512×512)#

json
{
  "version": "1.0",
  "document": { "width": 512, "height": 512, "background": "none" },
  "objects": [
    {
      "id": "bolt",
      "type": "path",
      "d": "M 288 32 L 96 288 L 224 288 L 192 480 L 416 208 L 272 208 Z",
      "fill": "#FFD75E",
      "stroke": "#171717",
      "strokeWidth": 16,
      "transform": { "rotate": 0 }
    }
  ]
}

Kompozycja z warstwami i workspace'ami#

json
{
  "version": "1.0",
  "document": {
    "width": 1600,
    "height": 900,
    "background": "#F4F7FF",
    "workspaces": [
      { "id": "full", "name": "Pełna scena", "x": 0, "y": 0, "width": 1600, "height": 900 },
      { "id": "card", "name": "Karta", "x": 200, "y": 150, "width": 1200, "height": 600 }
    ]
  },
  "layers": [
    { "id": "bg", "name": "Tło", "objects": ["bg"] },
    { "id": "card-layer", "name": "Karta", "objects": ["card", "card-title"] },
    { "id": "wm", "name": "Znak wodny", "visible": false, "objects": ["watermark"] }
  ],
  "objects": [
    { "id": "bg", "type": "rect", "x": 0, "y": 0, "width": 1600, "height": 900, "fill": "#F4F7FF", "layerId": "bg" },
    { "id": "card", "type": "rect", "x": 200, "y": 150, "width": 1200, "height": 600, "rx": 32, "fill": "#FFFFFF", "stroke": "#DDE5F5", "strokeWidth": 2, "layerId": "card-layer" },
    { "id": "card-title", "type": "text", "x": 800, "y": 450, "content": "EKSPORT WYBORY", "fontSize": 48, "fontWeight": 700, "textAnchor": "middle", "fill": "#171717", "layerId": "card-layer" },
    { "id": "watermark", "type": "text", "x": 1500, "y": 850, "content": "© 0300PM", "fontSize": 20, "textAnchor": "end", "fill": "#B8C9F4", "layerId": "wm" }
  ]
}

Batch export po workspace'ach da dwa pliki: pełną scenę i samą kartę. Warstwa wm jest ukryta, więc znak wodny nie trafi do eksportu (chyba że włączysz includeHidden).

Wskazówka

Pełny przykład startowy z repo (examples/getting-started.json) pokazuje orbity, węzły i typografię — wklej go do edytora, żeby zobaczyć pipeline w akcji.