Scrwly visual runtime
API v1
← All examples

Basic Shapes

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

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.

Scene JSON

Open in playground ↗ 
{
  "version": "0.1",
  "schemaVersion": "0.1",
  "id": "basic-shapes",
  "title": "Basic Shapes",
  "description": "Primitive rect, circle, ellipse, line, path, and text nodes.",
  "canvas": {
    "width": 900,
    "height": 520,
    "background": "background",
    "padding": 48
  },
  "theme": {
    "id": "clean-light"
  },
  "nodes": [
    {
      "id": "title",
      "x": 450,
      "y": 64,
      "type": "text",
      "text": "Basic Shapes",
      "fontSize": 28,
      "fontWeight": 800,
      "align": "center"
    },
    {
      "id": "rect",
      "x": 100,
      "y": 130,
      "width": 170,
      "height": 110,
      "style": {
        "fill": "#e9e9e2",
        "stroke": "background",
        "strokeWidth": 1.4
      },
      "type": "roundedRect",
      "radius": 8,
      "label": "Rounded rectangle"
    },
    {
      "id": "circle",
      "x": 430,
      "y": 185,
      "style": {
        "fill": "#111111",
        "stroke": "background",
        "strokeWidth": 1.4
      },
      "type": "circle",
      "radius": 56,
      "label": "Circle"
    },
    {
      "id": "ellipse",
      "x": 670,
      "y": 185,
      "width": 170,
      "height": 92,
      "style": {
        "fill": "#9a9a9a",
        "stroke": "background",
        "strokeWidth": 1.4
      },
      "type": "ellipse",
      "label": "Ellipse"
    },
    {
      "id": "line",
      "style": {
        "stroke": "line",
        "strokeWidth": 3
      },
      "accessibility": {
        "role": "decorative"
      },
      "type": "line",
      "points": [
        {
          "x": 130,
          "y": 340
        },
        {
          "x": 330,
          "y": 340
        }
      ]
    },
    {
      "id": "path",
      "style": {
        "fill": "none",
        "stroke": "accent",
        "strokeWidth": 3
      },
      "type": "path",
      "pathData": "M 430 360 C 500 300 590 420 660 340",
      "label": "Curved path"
    },
    {
      "id": "caption",
      "x": 450,
      "y": 450,
      "width": 620,
      "type": "text",
      "text": "Shapes use fills, tonal contrast, and readable labels.",
      "fontSize": 16,
      "align": "center",
      "wrap": true
    }
  ]
}