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 →

Temperature scale A number-line test with negative values and named highlights. {"version":"0.1","sceneId":"temperature-number-line","targets":[{"nodeId":"line-axis","semanticRole":"axis","animation":"draw","order":1,"startPct":3.9,"durationPct":12},{"nodeId":"line-tick--20","semanticRole":"tick","animation":"tick","order":2,"startPct":16,"durationPct":8},{"nodeId":"line-tick--10","semanticRole":"tick","animation":"tick","order":4,"startPct":19.33,"durationPct":8},{"nodeId":"line-tick-0","semanticRole":"tick","animation":"tick","order":6,"startPct":22.67,"durationPct":8},{"nodeId":"line-tick-10","semanticRole":"tick","animation":"tick","order":8,"startPct":26,"durationPct":8},{"nodeId":"line-tick-20","semanticRole":"tick","animation":"tick","order":10,"startPct":29.33,"durationPct":8},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Temperature scale","label":"Temperature scale"},{"nodeId":"line-tick-30","semanticRole":"tick","animation":"tick","order":12,"startPct":32.67,"durationPct":8},{"nodeId":"line-label--20","semanticRole":"label","animation":"label","order":3,"startPct":34,"durationPct":8,"value":"-20","label":"-20"},{"nodeId":"line-label--10","semanticRole":"label","animation":"label","order":5,"startPct":36,"durationPct":8,"value":"-10","label":"-10"},{"nodeId":"line-tick-40","semanticRole":"tick","animation":"tick","order":14,"startPct":36,"durationPct":8},{"nodeId":"line-label-0","semanticRole":"label","animation":"label","order":7,"startPct":38,"durationPct":8,"value":"0","label":"0"},{"nodeId":"line-label-10","semanticRole":"label","animation":"label","order":9,"startPct":40,"durationPct":8,"value":"10","label":"10"},{"nodeId":"line-label-20","semanticRole":"label","animation":"label","order":11,"startPct":42,"durationPct":8,"value":"20","label":"20"},{"nodeId":"line-label-30","semanticRole":"label","animation":"label","order":13,"startPct":44,"durationPct":8,"value":"30","label":"30"},{"nodeId":"line-label-40","semanticRole":"label","animation":"label","order":15,"startPct":46,"durationPct":8,"value":"40","label":"40"},{"nodeId":"line-highlight-0","semanticRole":"highlight","animation":"pop","order":16,"startPct":70,"durationPct":8,"value":"freezing","label":"freezing"},{"nodeId":"line-highlight-20","semanticRole":"highlight","animation":"pop","order":18,"startPct":78,"durationPct":8,"value":"room","label":"room"},{"nodeId":"line-highlight-37","semanticRole":"highlight","animation":"pop","order":20,"startPct":86,"durationPct":8,"value":"body","label":"body"},{"nodeId":"line-highlight-label-0","semanticRole":"label","animation":"label","order":17,"startPct":88,"durationPct":8,"value":"freezing","label":"freezing"},{"nodeId":"line-highlight-label-20","semanticRole":"label","animation":"label","order":19,"startPct":88,"durationPct":8,"value":"room","label":"room"},{"nodeId":"line-highlight-label-37","semanticRole":"label","animation":"label","order":21,"startPct":88,"durationPct":8,"value":"body","label":"body"}]} Temperature scale Number line from -20 to 40-20-10010203040freezingfreezingroomroombodybody

Temperature scale

Open JSON

A number-line test with negative values and named highlights.

Three branches A hierarchy-style composition using primitive rectangles and connectors. {"version":"0.1","sceneId":"three-branches-government","targets":[{"nodeId":"root","semanticRole":"shape","animation":"fade","order":1,"startPct":15.64,"durationPct":8,"value":"Government","label":"Government"},{"nodeId":"leg","semanticRole":"shape","animation":"fade","order":3,"startPct":22.91,"durationPct":8,"value":"Legislative","label":"Legislative"},{"nodeId":"exec","semanticRole":"shape","animation":"fade","order":4,"startPct":26.55,"durationPct":8,"value":"Executive","label":"Executive"},{"nodeId":"jud","semanticRole":"shape","animation":"fade","order":5,"startPct":30.18,"durationPct":8,"value":"Judicial","label":"Judicial"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Three branches","label":"Three branches"},{"nodeId":"rootLabel","semanticRole":"label","animation":"label","order":2,"startPct":37,"durationPct":8,"value":"Government","label":"Government"},{"nodeId":"legLabel","semanticRole":"label","animation":"label","order":9,"startPct":42,"durationPct":8,"value":"Legislative\nmakes laws","label":"Legislative\nmakes laws"},{"nodeId":"execLabel","semanticRole":"label","animation":"label","order":10,"startPct":47,"durationPct":8,"value":"Executive\ncarries out laws","label":"Executive\ncarries out laws"},{"nodeId":"judLabel","semanticRole":"label","animation":"label","order":11,"startPct":52,"durationPct":8,"value":"Judicial\ninterprets laws","label":"Judicial\ninterprets laws"},{"nodeId":"rootToLeg","semanticRole":"connector","animation":"draw","order":6,"startPct":65.82,"durationPct":14},{"nodeId":"rootToExec","semanticRole":"connector","animation":"draw","order":7,"startPct":69.45,"durationPct":14},{"nodeId":"rootToJud","semanticRole":"connector","animation":"draw","order":8,"startPct":73.09,"durationPct":14}]} Three branches Government GOVERNMENT Legislative Executive Judicial Legislativemakes laws Executivecarries outlaws Judicialinterpretslaws

Three branches

Open JSON

A hierarchy-style composition using primitive rectangles and connectors.

Timeline Visual scene timeline {"version":"0.1","sceneId":"timeline","targets":[{"nodeId":"timeline-component-axis","semanticRole":"axis","animation":"draw","order":1,"startPct":5.08,"durationPct":12},{"nodeId":"timeline-component-event-0","semanticRole":"shape","animation":"fade","order":2,"startPct":18.15,"durationPct":8,"value":"Step 1: Start","label":"Step 1: Start"},{"nodeId":"timeline-component-event-1","semanticRole":"shape","animation":"fade","order":6,"startPct":30.46,"durationPct":8,"value":"Step 2: Build","label":"Step 2: Build"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Timeline","label":"Timeline"},{"nodeId":"timeline-component-date-0","semanticRole":"label","animation":"label","order":4,"startPct":35.33,"durationPct":8,"value":"Step 1","label":"Step 1"},{"nodeId":"timeline-component-label-0","semanticRole":"label","animation":"label","order":5,"startPct":38.67,"durationPct":8,"value":"Start","label":"Start"},{"nodeId":"timeline-component-date-1","semanticRole":"label","animation":"label","order":8,"startPct":42,"durationPct":8,"value":"Step 2","label":"Step 2"},{"nodeId":"timeline-component-event-2","semanticRole":"shape","animation":"fade","order":10,"startPct":42.77,"durationPct":8,"value":"Step 3: Launch","label":"Step 3: Launch"},{"nodeId":"timeline-component-label-1","semanticRole":"label","animation":"label","order":9,"startPct":45.33,"durationPct":8,"value":"Build","label":"Build"},{"nodeId":"timeline-component-date-2","semanticRole":"label","animation":"label","order":12,"startPct":48.67,"durationPct":8,"value":"Step 3","label":"Step 3"},{"nodeId":"timeline-component-label-2","semanticRole":"label","animation":"label","order":13,"startPct":52,"durationPct":8,"value":"Launch","label":"Launch"},{"nodeId":"timeline-component-stem-0","semanticRole":"connector","animation":"draw","order":3,"startPct":53.23,"durationPct":14},{"nodeId":"timeline-component-stem-1","semanticRole":"connector","animation":"draw","order":7,"startPct":65.54,"durationPct":14},{"nodeId":"timeline-component-stem-2","semanticRole":"connector","animation":"draw","order":11,"startPct":77.85,"durationPct":14}]} Timeline Timeline axisStep 1: StartStep 1StartStep 2: BuildStep 2BuildStep 3: LaunchStep 3Launch

Timeline

Open JSON

Canonical Scrwly scene example: timeline

Venn Diagram Visual scene venn-diagram {"version":"0.1","sceneId":"venn-diagram","targets":[{"nodeId":"venn-a-circle","semanticRole":"shape","animation":"fade","order":1,"startPct":17.71,"durationPct":8,"value":"Group A","label":"Group A"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Venn Diagram","label":"Venn Diagram"},{"nodeId":"venn-b-circle","semanticRole":"shape","animation":"fade","order":4,"startPct":34.86,"durationPct":8,"value":"Group B","label":"Group B"},{"nodeId":"venn-a-label","semanticRole":"label","animation":"label","order":2,"startPct":36,"durationPct":8,"value":"Group A","label":"Group A"},{"nodeId":"venn-a-items","semanticRole":"label","animation":"label","order":3,"startPct":40,"durationPct":8,"value":"left only\nfirst","label":"left only\nfirst"},{"nodeId":"venn-b-label","semanticRole":"label","animation":"label","order":5,"startPct":44,"durationPct":8,"value":"Group B","label":"Group B"},{"nodeId":"venn-b-items","semanticRole":"label","animation":"label","order":6,"startPct":48,"durationPct":8,"value":"right only\nsecond","label":"right only\nsecond"},{"nodeId":"venn-shared-items","semanticRole":"label","animation":"label","order":7,"startPct":52,"durationPct":8,"value":"shared\noverlap","label":"shared\noverlap"}]} Venn Diagram Group AGROUP Aleft onlyfirstGroup BGROUP Bright onlysecondsharedoverlap

Venn Diagram

Open JSON

Canonical Scrwly scene example: venn-diagram

Water Cycle A repeating process showing how water moves through the environment. {"version":"0.1","sceneId":"water-cycle","targets":[{"nodeId":"cycle-evaporation-box","semanticRole":"shape","animation":"fade","order":5,"startPct":22,"durationPct":8,"value":"Evaporation","label":"Evaporation"},{"nodeId":"cycle-evaporation-icon-halo","semanticRole":"shape","animation":"fade","order":6,"startPct":24,"durationPct":8},{"nodeId":"cycle-evaporation-icon","semanticRole":"shape","animation":"fade","order":7,"startPct":26,"durationPct":8,"value":"Evaporation","label":"Evaporation"},{"nodeId":"cycle-condensation-box","semanticRole":"shape","animation":"fade","order":9,"startPct":30,"durationPct":8,"value":"Condensation","label":"Condensation"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Water Cycle","label":"Water Cycle"},{"nodeId":"cycle-condensation-icon-halo","semanticRole":"shape","animation":"fade","order":10,"startPct":32,"durationPct":8},{"nodeId":"cycle-condensation-icon","semanticRole":"shape","animation":"fade","order":11,"startPct":34,"durationPct":8,"value":"Condensation","label":"Condensation"},{"nodeId":"cycle-evaporation-label","semanticRole":"label","animation":"label","order":8,"startPct":37,"durationPct":8,"value":"Evaporation","label":"Evaporation"},{"nodeId":"cycle-precipitation-box","semanticRole":"shape","animation":"fade","order":13,"startPct":38,"durationPct":8,"value":"Precipitation","label":"Precipitation"},{"nodeId":"cycle-precipitation-icon-halo","semanticRole":"shape","animation":"fade","order":14,"startPct":40,"durationPct":8},{"nodeId":"cycle-condensation-label","semanticRole":"label","animation":"label","order":12,"startPct":42,"durationPct":8,"value":"Condensation","label":"Condensation"},{"nodeId":"cycle-precipitation-icon","semanticRole":"shape","animation":"fade","order":15,"startPct":42,"durationPct":8,"value":"Precipitation","label":"Precipitation"},{"nodeId":"cycle-evaporation-arrow","semanticRole":"connector","animation":"draw","order":1,"startPct":46,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-collection-box","semanticRole":"shape","animation":"fade","order":17,"startPct":46,"durationPct":8,"value":"Collection","label":"Collection"},{"nodeId":"cycle-precipitation-label","semanticRole":"label","animation":"label","order":16,"startPct":47,"durationPct":8,"value":"Precipitation","label":"Precipitation"},{"nodeId":"cycle-condensation-arrow","semanticRole":"connector","animation":"draw","order":2,"startPct":48,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-collection-icon-halo","semanticRole":"shape","animation":"fade","order":18,"startPct":48,"durationPct":8},{"nodeId":"cycle-precipitation-arrow","semanticRole":"connector","animation":"draw","order":3,"startPct":50,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-collection-icon","semanticRole":"shape","animation":"fade","order":19,"startPct":50,"durationPct":8,"value":"Collection","label":"Collection"},{"nodeId":"cycle-collection-arrow","semanticRole":"connector","animation":"draw","order":4,"startPct":52,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-collection-label","semanticRole":"label","animation":"label","order":20,"startPct":52,"durationPct":8,"value":"Collection","label":"Collection"}]} Water Cycle EvaporationEvaporationEvaporationCondensationCondensationCondensationPrecipitationPrecipitationPrecipitationCollectionCollectionCollection

Water Cycle

Open JSON

A repeating process showing how water moves through the environment.