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 →

Fractions on a number line Visual scene fraction-number-line {"version":"0.1","sceneId":"fraction-number-line","targets":[{"nodeId":"line1-axis","semanticRole":"axis","animation":"draw","order":1,"startPct":4.35,"durationPct":12},{"nodeId":"line1-tick-0","semanticRole":"tick","animation":"tick","order":2,"startPct":16,"durationPct":8},{"nodeId":"line1-tick-0-25","semanticRole":"tick","animation":"tick","order":4,"startPct":21,"durationPct":8},{"nodeId":"line1-tick-0-5","semanticRole":"tick","animation":"tick","order":6,"startPct":26,"durationPct":8},{"nodeId":"line1-tick-0-75","semanticRole":"tick","animation":"tick","order":8,"startPct":31,"durationPct":8},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Fractions on a number line","label":"Fractions on a number line"},{"nodeId":"line1-label-0","semanticRole":"label","animation":"label","order":3,"startPct":34.5,"durationPct":8,"value":"0","label":"0"},{"nodeId":"line1-tick-1","semanticRole":"tick","animation":"tick","order":10,"startPct":36,"durationPct":8},{"nodeId":"line1-label-0-25","semanticRole":"label","animation":"label","order":5,"startPct":37,"durationPct":8,"value":"0.25","label":"0.25"},{"nodeId":"line1-label-0-5","semanticRole":"label","animation":"label","order":7,"startPct":39.5,"durationPct":8,"value":"0.5","label":"0.5"},{"nodeId":"line1-label-0-75","semanticRole":"label","animation":"label","order":9,"startPct":42,"durationPct":8,"value":"0.75","label":"0.75"},{"nodeId":"line1-label-1","semanticRole":"label","animation":"label","order":11,"startPct":44.5,"durationPct":8,"value":"1","label":"1"},{"nodeId":"line1-highlight-0-25","semanticRole":"highlight","animation":"pop","order":12,"startPct":70,"durationPct":8,"value":"1/4","label":"1/4"},{"nodeId":"line1-highlight-0-5","semanticRole":"highlight","animation":"pop","order":14,"startPct":78,"durationPct":8,"value":"1/2","label":"1/2"},{"nodeId":"line1-highlight-0-75","semanticRole":"highlight","animation":"pop","order":16,"startPct":86,"durationPct":8,"value":"3/4","label":"3/4"},{"nodeId":"line1-highlight-label-0-25","semanticRole":"label","animation":"label","order":13,"startPct":88,"durationPct":8,"value":"1/4","label":"1/4"},{"nodeId":"line1-highlight-label-0-5","semanticRole":"label","animation":"label","order":15,"startPct":88,"durationPct":8,"value":"1/2","label":"1/2"},{"nodeId":"line1-highlight-label-0-75","semanticRole":"label","animation":"label","order":17,"startPct":88,"durationPct":8,"value":"3/4","label":"3/4"}]} Fractions on a number line Number line from 0 to 100.250.50.7511 over 4141 over 2123 over 434

Fractions on a number line

Open JSON

Canonical Scrwly scene example: fraction-number-line

Labelled Object Visual scene labelled-object {"version":"0.1","sceneId":"labelled-object","targets":[{"nodeId":"labelled-object-component-object-field","semanticRole":"shape","animation":"fade","order":0,"startPct":12,"durationPct":8,"value":"Object Parts","label":"Object Parts"},{"nodeId":"labelled-object-component-object","semanticRole":"shape","animation":"fade","order":1,"startPct":14.86,"durationPct":8,"value":"Object Parts","label":"Object Parts"},{"nodeId":"labelled-object-component-pin-1","semanticRole":"shape","animation":"fade","order":4,"startPct":23.43,"durationPct":8},{"nodeId":"labelled-object-component-title","semanticRole":"label","animation":"label","order":2,"startPct":32,"durationPct":8,"value":"Object Parts","label":"Object Parts"},{"nodeId":"labelled-object-component-pin-2","semanticRole":"shape","animation":"fade","order":7,"startPct":32,"durationPct":8},{"nodeId":"labelled-object-component-label-1","semanticRole":"label","animation":"label","order":5,"startPct":37,"durationPct":8,"value":"Left label","label":"Left label"},{"nodeId":"labelled-object-component-pin-0","semanticRole":"shape","animation":"fade","order":10,"startPct":40.57,"durationPct":8},{"nodeId":"labelled-object-component-label-2","semanticRole":"label","animation":"label","order":8,"startPct":42,"durationPct":8,"value":"Right label","label":"Right label"},{"nodeId":"labelled-object-component-label-0","semanticRole":"label","animation":"label","order":11,"startPct":47,"durationPct":8,"value":"Top label","label":"Top label"},{"nodeId":"labelled-object-component-pin-3","semanticRole":"shape","animation":"fade","order":13,"startPct":49.14,"durationPct":8},{"nodeId":"labelled-object-component-label-3","semanticRole":"label","animation":"label","order":14,"startPct":52,"durationPct":8,"value":"Bottom label","label":"Bottom label"},{"nodeId":"labelled-object-component-callout-1","semanticRole":"connector","animation":"draw","order":3,"startPct":52.57,"durationPct":14},{"nodeId":"labelled-object-component-callout-2","semanticRole":"connector","animation":"draw","order":6,"startPct":61.14,"durationPct":14},{"nodeId":"labelled-object-component-callout-0","semanticRole":"connector","animation":"draw","order":9,"startPct":69.71,"durationPct":14},{"nodeId":"labelled-object-component-callout-3","semanticRole":"connector","animation":"draw","order":12,"startPct":78.29,"durationPct":14}]} Object PartsObject PartsLeft labelRight labelTop labelBottom label

Labelled Object

Open JSON

Canonical Scrwly scene example: labelled-object

Large Scene Boundary Valid scene at the initial maximum canvas boundary. {"version":"0.1","sceneId":"large-scene-boundary","targets":[{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Large Scene Boundary","label":"Large Scene Boundary"},{"nodeId":"safe-area","semanticRole":"shape","animation":"fade","order":1,"startPct":32,"durationPct":8,"value":"Safe area","label":"Safe area"},{"nodeId":"caption","semanticRole":"label","animation":"label","order":2,"startPct":52,"durationPct":8,"value":"All content remains inside the 4096 by 4096 canvas.","label":"All content remains inside the 4096 by 4096 canvas."}]} Large Scene Boundary Safe area All content remains inside the 4096 by 4096 canvas.

Large Scene Boundary

Open JSON

Valid scene at the initial maximum canvas boundary.

Moon landing timeline Key events from the Apollo 11 moon landing. {"version":"0.1","sceneId":"moon-landing-timeline","targets":[{"nodeId":"timeline-axis","semanticRole":"axis","animation":"draw","order":1,"startPct":3.9,"durationPct":12},{"nodeId":"timeline-event-0","semanticRole":"shape","animation":"fade","order":2,"startPct":15.81,"durationPct":8,"value":"Jul 16, 1969: Launch","label":"Jul 16, 1969: Launch"},{"nodeId":"timeline-event-1","semanticRole":"shape","animation":"fade","order":7,"startPct":25.33,"durationPct":8,"value":"Jul 20, 1969: Landing","label":"Jul 20, 1969: Landing"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Apollo 11 moon landing timeline","label":"Apollo 11 moon landing timeline"},{"nodeId":"timeline-date-0","semanticRole":"label","animation":"label","order":4,"startPct":33.67,"durationPct":8,"value":"Jul 16, 1969","label":"Jul 16, 1969"},{"nodeId":"timeline-event-2","semanticRole":"shape","animation":"fade","order":12,"startPct":34.86,"durationPct":8,"value":"Jul 21, 1969: First step","label":"Jul 21, 1969: First step"},{"nodeId":"timeline-label-0","semanticRole":"label","animation":"label","order":5,"startPct":35.33,"durationPct":8,"value":"Launch","label":"Launch"},{"nodeId":"timeline-description-0","semanticRole":"label","animation":"label","order":6,"startPct":37,"durationPct":8,"value":"Saturn V leaves Earth","label":"Saturn V leaves Earth"},{"nodeId":"timeline-date-1","semanticRole":"label","animation":"label","order":9,"startPct":38.67,"durationPct":8,"value":"Jul 20, 1969","label":"Jul 20, 1969"},{"nodeId":"timeline-label-1","semanticRole":"label","animation":"label","order":10,"startPct":40.33,"durationPct":8,"value":"Landing","label":"Landing"},{"nodeId":"timeline-description-1","semanticRole":"label","animation":"label","order":11,"startPct":42,"durationPct":8,"value":"Eagle reaches the Moon","label":"Eagle reaches the Moon"},{"nodeId":"timeline-date-2","semanticRole":"label","animation":"label","order":14,"startPct":43.67,"durationPct":8,"value":"Jul 21, 1969","label":"Jul 21, 1969"},{"nodeId":"timeline-event-3","semanticRole":"shape","animation":"fade","order":17,"startPct":44.38,"durationPct":8,"value":"Jul 24, 1969: Splashdown","label":"Jul 24, 1969: Splashdown"},{"nodeId":"timeline-label-2","semanticRole":"label","animation":"label","order":15,"startPct":45.33,"durationPct":8,"value":"First step","label":"First step"},{"nodeId":"timeline-description-2","semanticRole":"label","animation":"label","order":16,"startPct":47,"durationPct":8,"value":"Armstrong walks","label":"Armstrong walks"},{"nodeId":"timeline-date-3","semanticRole":"label","animation":"label","order":19,"startPct":48.67,"durationPct":8,"value":"Jul 24, 1969","label":"Jul 24, 1969"},{"nodeId":"timeline-stem-0","semanticRole":"connector","animation":"draw","order":3,"startPct":49.71,"durationPct":14},{"nodeId":"timeline-label-3","semanticRole":"label","animation":"label","order":20,"startPct":50.33,"durationPct":8,"value":"Splashdown","label":"Splashdown"},{"nodeId":"timeline-description-3","semanticRole":"label","animation":"label","order":21,"startPct":52,"durationPct":8,"value":"Crew returns safely","label":"Crew returns safely"},{"nodeId":"timeline-stem-1","semanticRole":"connector","animation":"draw","order":8,"startPct":59.24,"durationPct":14},{"nodeId":"timeline-stem-2","semanticRole":"connector","animation":"draw","order":13,"startPct":68.76,"durationPct":14},{"nodeId":"timeline-stem-3","semanticRole":"connector","animation":"draw","order":18,"startPct":78.29,"durationPct":14}]} Apollo 11 moon landing timeline Timeline axisJul 16, 1969: LaunchJul 16, 1969LaunchSaturn V leaves EarthJul 20, 1969: LandingJul 20, 1969LandingEagle reaches the MoonJul 21, 1969: First stepJul 21, 1969First stepArmstrong walksJul 24, 1969: SplashdownJul 24, 1969SplashdownCrew returns safely

Moon landing timeline

Open JSON

Key events from the Apollo 11 moon landing.

Number Line Visual scene number-line {"version":"0.1","sceneId":"number-line","targets":[{"nodeId":"number-line-component-axis","semanticRole":"axis","animation":"draw","order":1,"startPct":5.08,"durationPct":12},{"nodeId":"number-line-component-tick-0","semanticRole":"tick","animation":"tick","order":2,"startPct":16,"durationPct":8},{"nodeId":"number-line-component-tick-0-25","semanticRole":"tick","animation":"tick","order":4,"startPct":21,"durationPct":8},{"nodeId":"number-line-component-tick-0-5","semanticRole":"tick","animation":"tick","order":6,"startPct":26,"durationPct":8},{"nodeId":"number-line-component-tick-0-75","semanticRole":"tick","animation":"tick","order":8,"startPct":31,"durationPct":8},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Number Line","label":"Number Line"},{"nodeId":"number-line-component-label-0","semanticRole":"label","animation":"label","order":3,"startPct":35.33,"durationPct":8,"value":"0","label":"0"},{"nodeId":"number-line-component-tick-1","semanticRole":"tick","animation":"tick","order":10,"startPct":36,"durationPct":8},{"nodeId":"number-line-component-label-0-25","semanticRole":"label","animation":"label","order":5,"startPct":38.67,"durationPct":8,"value":"0.25","label":"0.25"},{"nodeId":"number-line-component-label-0-5","semanticRole":"label","animation":"label","order":7,"startPct":42,"durationPct":8,"value":"0.5","label":"0.5"},{"nodeId":"number-line-component-label-0-75","semanticRole":"label","animation":"label","order":9,"startPct":45.33,"durationPct":8,"value":"0.75","label":"0.75"},{"nodeId":"number-line-component-label-1","semanticRole":"label","animation":"label","order":11,"startPct":48.67,"durationPct":8,"value":"1","label":"1"},{"nodeId":"number-line-component-highlight-0-5","semanticRole":"highlight","animation":"pop","order":12,"startPct":70,"durationPct":8,"value":"1/2","label":"1/2"},{"nodeId":"number-line-component-highlight-label-0-5","semanticRole":"label","animation":"label","order":13,"startPct":88,"durationPct":8,"value":"1/2","label":"1/2"}]} Number Line Number line from 0 to 100.250.50.7511 over 212

Number Line

Open JSON

Canonical Scrwly scene example: number-line

Photosynthesis A simple visual explanation of photosynthesis inputs and outputs. {"version":"0.1","sceneId":"photosynthesis-cycle","targets":[{"nodeId":"cycle1-sun-box","semanticRole":"shape","animation":"fade","order":5,"startPct":20,"durationPct":8,"value":"Sunlight","label":"Sunlight"},{"nodeId":"cycle1-sun-icon-halo","semanticRole":"shape","animation":"fade","order":6,"startPct":21.6,"durationPct":8},{"nodeId":"cycle1-sun-icon","semanticRole":"shape","animation":"fade","order":7,"startPct":23.2,"durationPct":8,"value":"Sunlight","label":"Sunlight"},{"nodeId":"cycle1-water-box","semanticRole":"shape","animation":"fade","order":9,"startPct":26.4,"durationPct":8,"value":"Water","label":"Water"},{"nodeId":"cycle1-water-icon-halo","semanticRole":"shape","animation":"fade","order":10,"startPct":28,"durationPct":8},{"nodeId":"cycle1-water-icon","semanticRole":"shape","animation":"fade","order":11,"startPct":29.6,"durationPct":8,"value":"Water","label":"Water"},{"nodeId":"cycle1-sun-label","semanticRole":"label","animation":"label","order":8,"startPct":32,"durationPct":8,"value":"Sunlight","label":"Sunlight"},{"nodeId":"cycle1-co2-box","semanticRole":"shape","animation":"fade","order":13,"startPct":32.8,"durationPct":8,"value":"Carbon dioxide","label":"Carbon dioxide"},{"nodeId":"cycle1-co2-icon-halo","semanticRole":"shape","animation":"fade","order":14,"startPct":34.4,"durationPct":8},{"nodeId":"cycle1-water-label","semanticRole":"label","animation":"label","order":12,"startPct":36,"durationPct":8,"value":"Water","label":"Water"},{"nodeId":"cycle1-co2-icon","semanticRole":"shape","animation":"fade","order":15,"startPct":36,"durationPct":8,"value":"Carbon dioxide","label":"Carbon dioxide"},{"nodeId":"cycle1-plant-box","semanticRole":"shape","animation":"fade","order":17,"startPct":39.2,"durationPct":8,"value":"Plant makes glucose","label":"Plant makes glucose"},{"nodeId":"cycle1-co2-label","semanticRole":"label","animation":"label","order":16,"startPct":40,"durationPct":8,"value":"Carbon dioxide","label":"Carbon dioxide"},{"nodeId":"cycle1-plant-icon-halo","semanticRole":"shape","animation":"fade","order":18,"startPct":40.8,"durationPct":8},{"nodeId":"cycle1-plant-icon","semanticRole":"shape","animation":"fade","order":19,"startPct":42.4,"durationPct":8,"value":"Plant makes glucose","label":"Plant makes glucose"},{"nodeId":"cycle1-sun-arrow","semanticRole":"connector","animation":"draw","order":0,"startPct":44,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle1-plant-label","semanticRole":"label","animation":"label","order":20,"startPct":44,"durationPct":8,"value":"Plant makes glucose","label":"Plant makes glucose"},{"nodeId":"cycle1-water-arrow","semanticRole":"connector","animation":"draw","order":1,"startPct":45.6,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle1-oxygen-box","semanticRole":"shape","animation":"fade","order":21,"startPct":45.6,"durationPct":8,"value":"Oxygen released","label":"Oxygen released"},{"nodeId":"cycle1-co2-arrow","semanticRole":"connector","animation":"draw","order":2,"startPct":47.2,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle1-oxygen-icon-halo","semanticRole":"shape","animation":"fade","order":22,"startPct":47.2,"durationPct":8},{"nodeId":"cycle1-oxygen-label","semanticRole":"label","animation":"label","order":24,"startPct":48,"durationPct":8,"value":"Oxygen released","label":"Oxygen released"},{"nodeId":"cycle1-plant-arrow","semanticRole":"connector","animation":"draw","order":3,"startPct":48.8,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle1-oxygen-icon","semanticRole":"shape","animation":"fade","order":23,"startPct":48.8,"durationPct":8,"value":"Oxygen released","label":"Oxygen released"},{"nodeId":"cycle1-oxygen-arrow","semanticRole":"connector","animation":"draw","order":4,"startPct":50.4,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"title","semanticRole":"label","animation":"label","order":25,"startPct":52,"durationPct":8,"value":"Photosynthesis","label":"Photosynthesis"}]} SunlightSunlightSunlightWaterWaterWaterCarbon dioxideCarbon dioxideCarbon dioxidePlant makes glucosePlant makes glucosePlant makesglucoseOxygen releasedOxygen releasedOxygen released Photosynthesis

Photosynthesis

Open JSON

A simple visual explanation of photosynthesis inputs and outputs.