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 →

Pie graph A filled pie graph with legend values. {"version":"0.1","sceneId":"pie-graph","targets":[{"nodeId":"pie-center","semanticRole":"shape","animation":"fade","order":5,"startPct":27.38,"durationPct":8,"value":"Pie center","label":"Pie center"},{"nodeId":"legend-reading-swatch","semanticRole":"shape","animation":"fade","order":6,"startPct":30.46,"durationPct":8},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Class time by activity","label":"Class time by activity"},{"nodeId":"legend-practice-swatch","semanticRole":"shape","animation":"fade","order":8,"startPct":36.62,"durationPct":8},{"nodeId":"legend-reading","semanticRole":"label","animation":"label","order":7,"startPct":37,"durationPct":8,"value":"Reading 40%","label":"Reading 40%"},{"nodeId":"legend-practice","semanticRole":"label","animation":"label","order":9,"startPct":42,"durationPct":8,"value":"Practice 30%","label":"Practice 30%"},{"nodeId":"legend-discussion-swatch","semanticRole":"shape","animation":"fade","order":10,"startPct":42.77,"durationPct":8},{"nodeId":"legend-discussion","semanticRole":"label","animation":"label","order":11,"startPct":47,"durationPct":8,"value":"Discussion 20%","label":"Discussion 20%"},{"nodeId":"pie-reading","semanticRole":"connector","animation":"draw","order":1,"startPct":47.08,"durationPct":14,"value":"Reading 40 percent","label":"Reading 40 percent"},{"nodeId":"legend-review-swatch","semanticRole":"shape","animation":"fade","order":12,"startPct":48.92,"durationPct":8},{"nodeId":"pie-practice","semanticRole":"connector","animation":"draw","order":2,"startPct":50.15,"durationPct":14,"value":"Practice 30 percent","label":"Practice 30 percent"},{"nodeId":"legend-review","semanticRole":"label","animation":"label","order":13,"startPct":52,"durationPct":8,"value":"Review 10%","label":"Review 10%"},{"nodeId":"pie-discussion","semanticRole":"connector","animation":"draw","order":3,"startPct":53.23,"durationPct":14,"value":"Discussion 20 percent","label":"Discussion 20 percent"},{"nodeId":"pie-review","semanticRole":"connector","animation":"draw","order":4,"startPct":56.31,"durationPct":14,"value":"Review 10 percent","label":"Review 10 percent"}]} Class time by activity Reading 40 percent Practice 30 percent Discussion 20 percent Review 10 percent Pie center Reading 40% Practice 30% Discussion 20% Review 10%

Pie graph

Open JSON

A filled pie graph with legend values.

Plant and animal cells A Venn diagram test for transparent overlapping shapes. {"version":"0.1","sceneId":"plant-animal-venn","targets":[{"nodeId":"venn-plant-circle","semanticRole":"shape","animation":"fade","order":1,"startPct":17.71,"durationPct":8,"value":"Plant cell","label":"Plant cell"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Plant and animal cells","label":"Plant and animal cells"},{"nodeId":"venn-animal-circle","semanticRole":"shape","animation":"fade","order":4,"startPct":34.86,"durationPct":8,"value":"Animal cell","label":"Animal cell"},{"nodeId":"venn-plant-label","semanticRole":"label","animation":"label","order":2,"startPct":36,"durationPct":8,"value":"Plant cell","label":"Plant cell"},{"nodeId":"venn-plant-items","semanticRole":"label","animation":"label","order":3,"startPct":40,"durationPct":8,"value":"Cell wall\nChloroplasts","label":"Cell wall\nChloroplasts"},{"nodeId":"venn-animal-label","semanticRole":"label","animation":"label","order":5,"startPct":44,"durationPct":8,"value":"Animal cell","label":"Animal cell"},{"nodeId":"venn-animal-items","semanticRole":"label","animation":"label","order":6,"startPct":48,"durationPct":8,"value":"Flexible shape\nSmall vacuoles","label":"Flexible shape\nSmall vacuoles"},{"nodeId":"venn-shared-items","semanticRole":"label","animation":"label","order":7,"startPct":52,"durationPct":8,"value":"Nucleus\nMembrane\nCytoplasm","label":"Nucleus\nMembrane\nCytoplasm"}]} Plant and animal cells Plant cellPLANT CELLCell wallChloroplastsAnimal cellANIMAL CELLFlexibleshapeSmallvacuolesNucleusMembraneCytoplasm

Plant and animal cells

Open JSON

A Venn diagram test for transparent overlapping shapes.

Rock cycle A five-step cycle to stress-test curved arrows and label spacing. {"version":"0.1","sceneId":"rock-cycle","targets":[{"nodeId":"cycle-magma-box","semanticRole":"shape","animation":"fade","order":6,"startPct":21.6,"durationPct":8,"value":"Magma cools","label":"Magma cools"},{"nodeId":"cycle-magma-icon-halo","semanticRole":"shape","animation":"fade","order":7,"startPct":23.2,"durationPct":8},{"nodeId":"cycle-magma-icon","semanticRole":"shape","animation":"fade","order":8,"startPct":24.8,"durationPct":8,"value":"Magma cools","label":"Magma cools"},{"nodeId":"cycle-igneous-box","semanticRole":"shape","animation":"fade","order":10,"startPct":28,"durationPct":8,"value":"Igneous rock","label":"Igneous rock"},{"nodeId":"cycle-igneous-icon-halo","semanticRole":"shape","animation":"fade","order":11,"startPct":29.6,"durationPct":8},{"nodeId":"cycle-igneous-icon","semanticRole":"shape","animation":"fade","order":12,"startPct":31.2,"durationPct":8,"value":"Igneous rock","label":"Igneous rock"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Rock cycle","label":"Rock cycle"},{"nodeId":"cycle-sediment-box","semanticRole":"shape","animation":"fade","order":14,"startPct":34.4,"durationPct":8,"value":"Sediment","label":"Sediment"},{"nodeId":"cycle-magma-label","semanticRole":"label","animation":"label","order":9,"startPct":36,"durationPct":8,"value":"Magma cools","label":"Magma cools"},{"nodeId":"cycle-sediment-icon-halo","semanticRole":"shape","animation":"fade","order":15,"startPct":36,"durationPct":8},{"nodeId":"cycle-sediment-icon","semanticRole":"shape","animation":"fade","order":16,"startPct":37.6,"durationPct":8,"value":"Sediment","label":"Sediment"},{"nodeId":"cycle-igneous-label","semanticRole":"label","animation":"label","order":13,"startPct":40,"durationPct":8,"value":"Igneous rock","label":"Igneous rock"},{"nodeId":"cycle-sedimentary-box","semanticRole":"shape","animation":"fade","order":18,"startPct":40.8,"durationPct":8,"value":"Sedimentary rock","label":"Sedimentary rock"},{"nodeId":"cycle-sedimentary-icon-halo","semanticRole":"shape","animation":"fade","order":19,"startPct":42.4,"durationPct":8},{"nodeId":"cycle-sediment-label","semanticRole":"label","animation":"label","order":17,"startPct":44,"durationPct":8,"value":"Sediment","label":"Sediment"},{"nodeId":"cycle-sedimentary-icon","semanticRole":"shape","animation":"fade","order":20,"startPct":44,"durationPct":8,"value":"Sedimentary rock","label":"Sedimentary rock"},{"nodeId":"cycle-magma-arrow","semanticRole":"connector","animation":"draw","order":1,"startPct":45.6,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-igneous-arrow","semanticRole":"connector","animation":"draw","order":2,"startPct":47.2,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-metamorphic-box","semanticRole":"shape","animation":"fade","order":22,"startPct":47.2,"durationPct":8,"value":"Metamorphic rock","label":"Metamorphic rock"},{"nodeId":"cycle-sedimentary-label","semanticRole":"label","animation":"label","order":21,"startPct":48,"durationPct":8,"value":"Sedimentary rock","label":"Sedimentary rock"},{"nodeId":"cycle-sediment-arrow","semanticRole":"connector","animation":"draw","order":3,"startPct":48.8,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-metamorphic-icon-halo","semanticRole":"shape","animation":"fade","order":23,"startPct":48.8,"durationPct":8},{"nodeId":"cycle-sedimentary-arrow","semanticRole":"connector","animation":"draw","order":4,"startPct":50.4,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-metamorphic-icon","semanticRole":"shape","animation":"fade","order":24,"startPct":50.4,"durationPct":8,"value":"Metamorphic rock","label":"Metamorphic rock"},{"nodeId":"cycle-metamorphic-arrow","semanticRole":"connector","animation":"draw","order":5,"startPct":52,"durationPct":14,"value":"arrow","label":"arrow"},{"nodeId":"cycle-metamorphic-label","semanticRole":"label","animation":"label","order":25,"startPct":52,"durationPct":8,"value":"Metamorphic rock","label":"Metamorphic rock"}]} Rock cycle Magma coolsMagma coolsMagma coolsIgneous rockIgneous rockIgneous rockSedimentSedimentSedimentSedimentary rockSedimentary rockSedimentary rockMetamorphic rockMetamorphic rockMetamorphic rock

Rock cycle

Open JSON

A five-step cycle to stress-test curved arrows and label spacing.

Solar system scale A primitive symbol layout for circles, tonal contrast, and labels. {"version":"0.1","sceneId":"solar-system-scale","targets":[{"nodeId":"sun","semanticRole":"shape","animation":"fade","order":2,"startPct":18.15,"durationPct":8,"value":"Sun","label":"Sun"},{"nodeId":"mercury","semanticRole":"shape","animation":"fade","order":3,"startPct":21.23,"durationPct":8,"value":"Mercury","label":"Mercury"},{"nodeId":"venus","semanticRole":"shape","animation":"fade","order":4,"startPct":24.31,"durationPct":8,"value":"Venus","label":"Venus"},{"nodeId":"earth","semanticRole":"shape","animation":"fade","order":5,"startPct":27.38,"durationPct":8,"value":"Earth","label":"Earth"},{"nodeId":"mars","semanticRole":"shape","animation":"fade","order":6,"startPct":30.46,"durationPct":8,"value":"Mars","label":"Mars"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Solar system scale","label":"Solar system scale"},{"nodeId":"jupiter","semanticRole":"shape","animation":"fade","order":7,"startPct":33.54,"durationPct":8,"value":"Jupiter","label":"Jupiter"},{"nodeId":"sunLabel","semanticRole":"label","animation":"label","order":8,"startPct":35.33,"durationPct":8,"value":"Sun","label":"Sun"},{"nodeId":"mercuryLabel","semanticRole":"label","animation":"label","order":9,"startPct":38.67,"durationPct":8,"value":"Mercury","label":"Mercury"},{"nodeId":"venusLabel","semanticRole":"label","animation":"label","order":10,"startPct":42,"durationPct":8,"value":"Venus","label":"Venus"},{"nodeId":"earthLabel","semanticRole":"label","animation":"label","order":11,"startPct":45.33,"durationPct":8,"value":"Earth","label":"Earth"},{"nodeId":"axis","semanticRole":"connector","animation":"draw","order":1,"startPct":47.08,"durationPct":14},{"nodeId":"marsLabel","semanticRole":"label","animation":"label","order":12,"startPct":48.67,"durationPct":8,"value":"Mars","label":"Mars"},{"nodeId":"jupiterLabel","semanticRole":"label","animation":"label","order":13,"startPct":52,"durationPct":8,"value":"Jupiter","label":"Jupiter"}]} Solar system scale Sun Mercury Venus Earth Mars Jupiter Sun Mercury Venus Earth Mars Jupiter

Solar system scale

Open JSON

A primitive symbol layout for circles, tonal contrast, and labels.

Sprint timeline A short product timeline with compact milestone labels. {"version":"0.1","sceneId":"sprint-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":"Mon: Plan","label":"Mon: Plan"},{"nodeId":"timeline-event-1","semanticRole":"shape","animation":"fade","order":7,"startPct":25.33,"durationPct":8,"value":"Tue: Build","label":"Tue: Build"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Sprint timeline","label":"Sprint timeline"},{"nodeId":"timeline-date-0","semanticRole":"label","animation":"label","order":4,"startPct":33.67,"durationPct":8,"value":"Mon","label":"Mon"},{"nodeId":"timeline-event-2","semanticRole":"shape","animation":"fade","order":12,"startPct":34.86,"durationPct":8,"value":"Thu: Review","label":"Thu: Review"},{"nodeId":"timeline-label-0","semanticRole":"label","animation":"label","order":5,"startPct":35.33,"durationPct":8,"value":"Plan","label":"Plan"},{"nodeId":"timeline-description-0","semanticRole":"label","animation":"label","order":6,"startPct":37,"durationPct":8,"value":"Scope work","label":"Scope work"},{"nodeId":"timeline-date-1","semanticRole":"label","animation":"label","order":9,"startPct":38.67,"durationPct":8,"value":"Tue","label":"Tue"},{"nodeId":"timeline-label-1","semanticRole":"label","animation":"label","order":10,"startPct":40.33,"durationPct":8,"value":"Build","label":"Build"},{"nodeId":"timeline-description-1","semanticRole":"label","animation":"label","order":11,"startPct":42,"durationPct":8,"value":"Core changes","label":"Core changes"},{"nodeId":"timeline-date-2","semanticRole":"label","animation":"label","order":14,"startPct":43.67,"durationPct":8,"value":"Thu","label":"Thu"},{"nodeId":"timeline-event-3","semanticRole":"shape","animation":"fade","order":17,"startPct":44.38,"durationPct":8,"value":"Fri: Ship","label":"Fri: Ship"},{"nodeId":"timeline-label-2","semanticRole":"label","animation":"label","order":15,"startPct":45.33,"durationPct":8,"value":"Review","label":"Review"},{"nodeId":"timeline-description-2","semanticRole":"label","animation":"label","order":16,"startPct":47,"durationPct":8,"value":"Test and refine","label":"Test and refine"},{"nodeId":"timeline-date-3","semanticRole":"label","animation":"label","order":19,"startPct":48.67,"durationPct":8,"value":"Fri","label":"Fri"},{"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":"Ship","label":"Ship"},{"nodeId":"timeline-description-3","semanticRole":"label","animation":"label","order":21,"startPct":52,"durationPct":8,"value":"Release notes","label":"Release notes"},{"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}]} Sprint timeline Timeline axisMon: PlanMonPlanScope workTue: BuildTueBuildCore changesThu: ReviewThuReviewTest and refineFri: ShipFriShipRelease notes

Sprint timeline

Open JSON

A short product timeline with compact milestone labels.

States of matter Visual scene states-of-matter-comparison {"version":"0.1","sceneId":"states-of-matter-comparison","targets":[{"nodeId":"solid","semanticRole":"shape","animation":"fade","order":1,"startPct":16.44,"durationPct":8,"value":"Solid","label":"Solid"},{"nodeId":"liquid","semanticRole":"shape","animation":"fade","order":2,"startPct":20.89,"durationPct":8,"value":"Liquid","label":"Liquid"},{"nodeId":"gas","semanticRole":"shape","animation":"fade","order":3,"startPct":25.33,"durationPct":8,"value":"Gas","label":"Gas"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Solids, liquids and gases","label":"Solids, liquids and gases"},{"nodeId":"solidHeading","semanticRole":"label","animation":"label","order":4,"startPct":35.33,"durationPct":8,"value":"Solid","label":"Solid"},{"nodeId":"liquidHeading","semanticRole":"label","animation":"label","order":5,"startPct":38.67,"durationPct":8,"value":"Liquid","label":"Liquid"},{"nodeId":"gasHeading","semanticRole":"label","animation":"label","order":6,"startPct":42,"durationPct":8,"value":"Gas","label":"Gas"},{"nodeId":"solidText","semanticRole":"label","animation":"label","order":7,"startPct":45.33,"durationPct":8,"value":"Particles packed tightly\nKeeps its shape","label":"Particles packed tightly\nKeeps its shape"},{"nodeId":"liquidText","semanticRole":"label","animation":"label","order":8,"startPct":48.67,"durationPct":8,"value":"Particles move around\nTakes shape of container","label":"Particles move around\nTakes shape of container"},{"nodeId":"gasText","semanticRole":"label","animation":"label","order":9,"startPct":52,"durationPct":8,"value":"Particles spread out\nFills available space","label":"Particles spread out\nFills available space"}]} Solids, liquids and gases Solid Liquid Gas SOLID LIQUID GAS Particlespacked tightlyKeeps its shape Particles movearoundTakes shape ofcontainer Particlesspread outFills availablespace

States of matter

Open JSON

Canonical Scrwly scene example: states-of-matter-comparison