Scrwly visual runtime
API v1

Scenes · 29 canonical examples

Canonical examples

Every example is validated in the test suite and rendered through the same SVG runtime used by the API. Copy the JSON straight into POST /api/v1/render.

Compare the same scenes across all six themes →

Analog clock A clock face showing ten minutes past ten. {"version":"0.1","sceneId":"analog-clock","targets":[{"nodeId":"clock-face","semanticRole":"shape","animation":"fade","order":1,"startPct":13.9,"durationPct":8,"value":"Clock face","label":"Clock face"},{"nodeId":"clock-tick-12","semanticRole":"tick","animation":"tick","order":2,"startPct":16,"durationPct":8},{"nodeId":"clock-tick-1","semanticRole":"tick","animation":"tick","order":3,"startPct":17.82,"durationPct":8},{"nodeId":"clock-tick-2","semanticRole":"tick","animation":"tick","order":4,"startPct":19.64,"durationPct":8},{"nodeId":"clock-tick-3","semanticRole":"tick","animation":"tick","order":5,"startPct":21.45,"durationPct":8},{"nodeId":"clock-tick-4","semanticRole":"tick","animation":"tick","order":6,"startPct":23.27,"durationPct":8},{"nodeId":"clock-tick-5","semanticRole":"tick","animation":"tick","order":7,"startPct":25.09,"durationPct":8},{"nodeId":"clock-tick-6","semanticRole":"tick","animation":"tick","order":8,"startPct":26.91,"durationPct":8},{"nodeId":"clock-tick-7","semanticRole":"tick","animation":"tick","order":9,"startPct":28.73,"durationPct":8},{"nodeId":"clock-tick-8","semanticRole":"tick","animation":"tick","order":10,"startPct":30.55,"durationPct":8},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Analog clock","label":"Analog clock"},{"nodeId":"clock-tick-9","semanticRole":"tick","animation":"tick","order":11,"startPct":32.36,"durationPct":8},{"nodeId":"clock-tick-10","semanticRole":"tick","animation":"tick","order":12,"startPct":34.18,"durationPct":8},{"nodeId":"clock-tick-11","semanticRole":"tick","animation":"tick","order":13,"startPct":36,"durationPct":8},{"nodeId":"clock-number-12","semanticRole":"label","animation":"label","order":14,"startPct":36,"durationPct":8,"value":"12","label":"12"},{"nodeId":"clock-number-3","semanticRole":"label","animation":"label","order":15,"startPct":40,"durationPct":8,"value":"3","label":"3"},{"nodeId":"clock-number-6","semanticRole":"label","animation":"label","order":16,"startPct":44,"durationPct":8,"value":"6","label":"6"},{"nodeId":"clock-number-9","semanticRole":"label","animation":"label","order":17,"startPct":48,"durationPct":8,"value":"9","label":"9"},{"nodeId":"clock-center","semanticRole":"shape","animation":"fade","order":20,"startPct":50.1,"durationPct":8,"value":"Center pin","label":"Center pin"},{"nodeId":"clock-caption","semanticRole":"label","animation":"label","order":21,"startPct":52,"durationPct":8,"value":"10:10","label":"10:10"},{"nodeId":"clock-hour-hand","semanticRole":"connector","animation":"draw","order":18,"startPct":78.29,"durationPct":14},{"nodeId":"clock-minute-hand","semanticRole":"connector","animation":"draw","order":19,"startPct":80.19,"durationPct":14}]} Analog clock Clock face 12 3 6 9 Center pin 10:10

Analog clock

Open JSON

A clock face showing ten minutes past ten.

Arrows And Labels Straight and curved arrows with readable labels. {"version":"0.1","sceneId":"arrows-and-labels","targets":[{"nodeId":"start-box","semanticRole":"shape","animation":"fade","order":1,"startPct":17,"durationPct":8,"value":"Start","label":"Start"},{"nodeId":"end-box","semanticRole":"shape","animation":"fade","order":2,"startPct":22,"durationPct":8,"value":"End","label":"End"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Arrows and Labels","label":"Arrows and Labels"},{"nodeId":"start-label","semanticRole":"label","animation":"label","order":3,"startPct":37,"durationPct":8,"value":"Start","label":"Start"},{"nodeId":"end-label","semanticRole":"label","animation":"label","order":4,"startPct":42,"durationPct":8,"value":"End","label":"End"},{"nodeId":"flow-label","semanticRole":"label","animation":"label","order":7,"startPct":47,"durationPct":8,"value":"forward","label":"forward"},{"nodeId":"return-label","semanticRole":"label","animation":"label","order":8,"startPct":52,"durationPct":8,"value":"return","label":"return"},{"nodeId":"straight-arrow","semanticRole":"connector","animation":"draw","order":5,"startPct":69,"durationPct":14},{"nodeId":"curved-arrow","semanticRole":"connector","animation":"draw","order":6,"startPct":74,"durationPct":14,"value":"arrow","label":"arrow"}]} Arrows and Labels Start End Start End Straight arrow from start to end arrow forward return

Arrows And Labels

Open JSON

Straight and curved arrows with readable labels.

Basic Shapes Primitive rect, circle, ellipse, line, path, and text nodes. {"version":"0.1","sceneId":"basic-shapes","targets":[{"nodeId":"rect","semanticRole":"shape","animation":"fade","order":1,"startPct":18.67,"durationPct":8,"value":"Rounded rectangle","label":"Rounded rectangle"},{"nodeId":"circle","semanticRole":"shape","animation":"fade","order":2,"startPct":25.33,"durationPct":8,"value":"Circle","label":"Circle"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Basic Shapes","label":"Basic Shapes"},{"nodeId":"ellipse","semanticRole":"shape","animation":"fade","order":3,"startPct":32,"durationPct":8,"value":"Ellipse","label":"Ellipse"},{"nodeId":"caption","semanticRole":"label","animation":"label","order":6,"startPct":52,"durationPct":8,"value":"Shapes use fills, tonal contrast, and readable labels.","label":"Shapes use fills, tonal contrast, and readable labels."},{"nodeId":"line","semanticRole":"connector","animation":"draw","order":4,"startPct":70.67,"durationPct":14},{"nodeId":"path","semanticRole":"connector","animation":"draw","order":5,"startPct":77.33,"durationPct":14,"value":"Curved path","label":"Curved path"}]} Basic Shapes Rounded rectangle Circle Ellipse Curved path Shapes use fills, tonal contrast, and readable labels.

Basic Shapes

Open JSON

Primitive rect, circle, ellipse, line, path, and text nodes.

Carbon cycle Another circular layout for checking curved arrow consistency. {"version":"0.1","sceneId":"carbon-cycle","targets":[{"nodeId":"cycle-air-box","semanticRole":"shape","animation":"fade","order":5,"startPct":22,"durationPct":8,"value":"Atmosphere","label":"Atmosphere"},{"nodeId":"cycle-air-icon-halo","semanticRole":"shape","animation":"fade","order":6,"startPct":24,"durationPct":8},{"nodeId":"cycle-air-icon","semanticRole":"shape","animation":"fade","order":7,"startPct":26,"durationPct":8,"value":"Atmosphere","label":"Atmosphere"},{"nodeId":"cycle-plants-box","semanticRole":"shape","animation":"fade","order":9,"startPct":30,"durationPct":8,"value":"Plants absorb carbon","label":"Plants absorb carbon"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Carbon cycle","label":"Carbon cycle"},{"nodeId":"cycle-plants-icon-halo","semanticRole":"shape","animation":"fade","order":10,"startPct":32,"durationPct":8},{"nodeId":"cycle-plants-icon","semanticRole":"shape","animation":"fade","order":11,"startPct":34,"durationPct":8,"value":"Plants absorb carbon","label":"Plants absorb carbon"},{"nodeId":"cycle-air-label","semanticRole":"label","animation":"label","order":8,"startPct":37,"durationPct":8,"value":"Atmosphere","label":"Atmosphere"},{"nodeId":"cycle-animals-box","semanticRole":"shape","animation":"fade","order":13,"startPct":38,"durationPct":8,"value":"Animals eat plants","label":"Animals eat plants"},{"nodeId":"cycle-animals-icon-halo","semanticRole":"shape","animation":"fade","order":14,"startPct":40,"durationPct":8},{"nodeId":"cycle-plants-label","semanticRole":"label","animation":"label","order":12,"startPct":42,"durationPct":8,"value":"Plants absorb carbon","label":"Plants absorb carbon"},{"nodeId":"cycle-animals-icon","semanticRole":"shape","animation":"fade","order":15,"startPct":42,"durationPct":8,"value":"Animals eat plants","label":"Animals eat plants"},{"nodeId":"cycle-air-arrow","semanticRole":"connector","animation":"draw","order":1,"startPct":46,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-decay-box","semanticRole":"shape","animation":"fade","order":17,"startPct":46,"durationPct":8,"value":"Decay returns carbon","label":"Decay returns carbon"},{"nodeId":"cycle-animals-label","semanticRole":"label","animation":"label","order":16,"startPct":47,"durationPct":8,"value":"Animals eat plants","label":"Animals eat plants"},{"nodeId":"cycle-plants-arrow","semanticRole":"connector","animation":"draw","order":2,"startPct":48,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-decay-icon-halo","semanticRole":"shape","animation":"fade","order":18,"startPct":48,"durationPct":8},{"nodeId":"cycle-animals-arrow","semanticRole":"connector","animation":"draw","order":3,"startPct":50,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-decay-icon","semanticRole":"shape","animation":"fade","order":19,"startPct":50,"durationPct":8,"value":"Decay returns carbon","label":"Decay returns carbon"},{"nodeId":"cycle-decay-arrow","semanticRole":"connector","animation":"draw","order":4,"startPct":52,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-decay-label","semanticRole":"label","animation":"label","order":20,"startPct":52,"durationPct":8,"value":"Decay returns carbon","label":"Decay returns carbon"}]} Carbon cycle AtmosphereAtmosphereAtmospherePlants absorb carbonPlants absorb carbonPlants absorbcarbonAnimals eat plantsAnimals eat plantsAnimals eatplantsDecay returns carbonDecay returns carbonDecay returnscarbon

Carbon cycle

Open JSON

Another circular layout for checking curved arrow consistency.

Cell structure A labelled-object test with callouts around a central symbolic form. {"version":"0.1","sceneId":"cell-structure-callouts","targets":[{"nodeId":"cell-schematic-membrane","semanticRole":"shape","animation":"fade","order":1,"startPct":13.82,"durationPct":8},{"nodeId":"cell-schematic-wall","semanticRole":"shape","animation":"fade","order":2,"startPct":15.64,"durationPct":8},{"nodeId":"cell-schematic-nucleus","semanticRole":"shape","animation":"fade","order":3,"startPct":17.45,"durationPct":8},{"nodeId":"cell-schematic-vacuole","semanticRole":"shape","animation":"fade","order":4,"startPct":19.27,"durationPct":8},{"nodeId":"cell-schematic-chloroplast-a","semanticRole":"shape","animation":"fade","order":5,"startPct":21.09,"durationPct":8},{"nodeId":"cell-schematic-chloroplast-b","semanticRole":"shape","animation":"fade","order":6,"startPct":22.91,"durationPct":8},{"nodeId":"cell-pin-0","semanticRole":"shape","animation":"fade","order":9,"startPct":28.36,"durationPct":8},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Cell structure","label":"Cell structure"},{"nodeId":"cell-pin-1","semanticRole":"shape","animation":"fade","order":12,"startPct":33.82,"durationPct":8},{"nodeId":"cell-title","semanticRole":"label","animation":"label","order":7,"startPct":35.33,"durationPct":8,"value":"Plant cell","label":"Plant cell"},{"nodeId":"cell-label-0","semanticRole":"label","animation":"label","order":10,"startPct":38.67,"durationPct":8,"value":"Cell wall","label":"Cell wall"},{"nodeId":"cell-pin-2","semanticRole":"shape","animation":"fade","order":15,"startPct":39.27,"durationPct":8},{"nodeId":"cell-label-1","semanticRole":"label","animation":"label","order":13,"startPct":42,"durationPct":8,"value":"Nucleus","label":"Nucleus"},{"nodeId":"cell-pin-3","semanticRole":"shape","animation":"fade","order":18,"startPct":44.73,"durationPct":8},{"nodeId":"cell-label-2","semanticRole":"label","animation":"label","order":16,"startPct":45.33,"durationPct":8,"value":"Chloroplast","label":"Chloroplast"},{"nodeId":"cell-label-3","semanticRole":"label","animation":"label","order":19,"startPct":48.67,"durationPct":8,"value":"Vacuole","label":"Vacuole"},{"nodeId":"cell-pin-4","semanticRole":"shape","animation":"fade","order":21,"startPct":50.18,"durationPct":8},{"nodeId":"cell-label-4","semanticRole":"label","animation":"label","order":22,"startPct":52,"durationPct":8,"value":"Cytoplasm","label":"Cytoplasm"},{"nodeId":"cell-callout-0","semanticRole":"connector","animation":"draw","order":8,"startPct":58.55,"durationPct":14},{"nodeId":"cell-callout-1","semanticRole":"connector","animation":"draw","order":11,"startPct":64,"durationPct":14},{"nodeId":"cell-callout-2","semanticRole":"connector","animation":"draw","order":14,"startPct":69.45,"durationPct":14},{"nodeId":"cell-callout-3","semanticRole":"connector","animation":"draw","order":17,"startPct":74.91,"durationPct":14},{"nodeId":"cell-callout-4","semanticRole":"connector","animation":"draw","order":20,"startPct":80.36,"durationPct":14}]} Cell structure Plant cellCell wallNucleusChloroplastVacuoleCytoplasm

Cell structure

Open JSON

A labelled-object test with callouts around a central symbolic form.

Cycle Diagram Visual scene cycle-diagram {"version":"0.1","sceneId":"cycle-diagram","targets":[{"nodeId":"cycle-plan-box","semanticRole":"shape","animation":"fade","order":5,"startPct":22,"durationPct":8,"value":"Plan","label":"Plan"},{"nodeId":"cycle-plan-icon-halo","semanticRole":"shape","animation":"fade","order":6,"startPct":24,"durationPct":8},{"nodeId":"cycle-plan-icon","semanticRole":"shape","animation":"fade","order":7,"startPct":26,"durationPct":8,"value":"Plan","label":"Plan"},{"nodeId":"cycle-make-box","semanticRole":"shape","animation":"fade","order":9,"startPct":30,"durationPct":8,"value":"Make","label":"Make"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Cycle Diagram","label":"Cycle Diagram"},{"nodeId":"cycle-make-icon-halo","semanticRole":"shape","animation":"fade","order":10,"startPct":32,"durationPct":8},{"nodeId":"cycle-make-icon","semanticRole":"shape","animation":"fade","order":11,"startPct":34,"durationPct":8,"value":"Make","label":"Make"},{"nodeId":"cycle-plan-label","semanticRole":"label","animation":"label","order":8,"startPct":37,"durationPct":8,"value":"Plan","label":"Plan"},{"nodeId":"cycle-check-box","semanticRole":"shape","animation":"fade","order":13,"startPct":38,"durationPct":8,"value":"Check","label":"Check"},{"nodeId":"cycle-check-icon-halo","semanticRole":"shape","animation":"fade","order":14,"startPct":40,"durationPct":8},{"nodeId":"cycle-make-label","semanticRole":"label","animation":"label","order":12,"startPct":42,"durationPct":8,"value":"Make","label":"Make"},{"nodeId":"cycle-check-icon","semanticRole":"shape","animation":"fade","order":15,"startPct":42,"durationPct":8,"value":"Check","label":"Check"},{"nodeId":"cycle-plan-arrow","semanticRole":"connector","animation":"draw","order":1,"startPct":46,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-repeat-box","semanticRole":"shape","animation":"fade","order":17,"startPct":46,"durationPct":8,"value":"Repeat","label":"Repeat"},{"nodeId":"cycle-check-label","semanticRole":"label","animation":"label","order":16,"startPct":47,"durationPct":8,"value":"Check","label":"Check"},{"nodeId":"cycle-make-arrow","semanticRole":"connector","animation":"draw","order":2,"startPct":48,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-repeat-icon-halo","semanticRole":"shape","animation":"fade","order":18,"startPct":48,"durationPct":8},{"nodeId":"cycle-check-arrow","semanticRole":"connector","animation":"draw","order":3,"startPct":50,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-repeat-icon","semanticRole":"shape","animation":"fade","order":19,"startPct":50,"durationPct":8,"value":"Repeat","label":"Repeat"},{"nodeId":"cycle-repeat-arrow","semanticRole":"connector","animation":"draw","order":4,"startPct":52,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-repeat-label","semanticRole":"label","animation":"label","order":20,"startPct":52,"durationPct":8,"value":"Repeat","label":"Repeat"}]} Cycle Diagram PlanPlan?PlanMakeMakeMakeCheckCheckCheckRepeatRepeatRepeat

Cycle Diagram

Open JSON

Canonical Scrwly scene example: cycle-diagram