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.