โ† All examples

Photosynthesis

A simple visual explanation of photosynthesis inputs and outputs.

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
{
  "version": "0.1",
  "id": "photosynthesis-cycle",
  "title": "Photosynthesis",
  "description": "A simple visual explanation of photosynthesis inputs and outputs.",
  "canvas": {
    "width": 900,
    "height": 600,
    "background": "background",
    "padding": 40
  },
  "theme": {
    "id": "clean-light"
  },
  "nodes": [
    {
      "id": "cycle1",
      "x": 70,
      "y": 96,
      "width": 760,
      "height": 430,
      "accessibility": {
        "label": "Photosynthesis cycle diagram",
        "role": "img"
      },
      "type": "component",
      "component": "CycleDiagram",
      "props": {
        "items": [
          {
            "id": "sun",
            "label": "Sunlight",
            "icon": "sun"
          },
          {
            "id": "water",
            "label": "Water",
            "icon": "water"
          },
          {
            "id": "co2",
            "label": "Carbon dioxide",
            "icon": "cloud"
          },
          {
            "id": "plant",
            "label": "Plant makes glucose",
            "icon": "leaf"
          },
          {
            "id": "oxygen",
            "label": "Oxygen released",
            "icon": "oxygen"
          }
        ],
        "clockwise": true
      }
    },
    {
      "id": "title",
      "x": 450,
      "y": 60,
      "type": "text",
      "text": "Photosynthesis",
      "fontSize": 28,
      "align": "center"
    }
  ]
}