A fractal

Three levels of nested containers. The strategy changes at each level: a grid of rings of grids.

64 boxes0 edges0 findings

Edit it

A fractalResetPlayground →

# A fractal
f "" grid(columns: 3) nested {
  f.1 "" radial nested {
    f.1.1 "" grid nested { f.1.1.1 "" f.1.1.2 "" f.1.1.3 "" f.1.1.4 "" }
    f.1.2 "" grid nested { f.1.2.1 "" f.1.2.2 "" f.1.2.3 "" f.1.2.4 "" }
    f.1.3 "" grid nested { f.1.3.1 "" f.1.3.2 "" f.1.3.3 "" f.1.3.4 "" }
    f.1.4 "" grid nested { f.1.4.1 "" f.1.4.2 "" f.1.4.3 "" f.1.4.4 "" }
  }
  f.2 "" radial nested {
    f.2.1 "" grid nested { f.2.1.1 "" f.2.1.2 "" f.2.1.3 "" f.2.1.4 "" }
    f.2.2 "" grid nested { f.2.2.1 "" f.2.2.2 "" f.2.2.3 "" f.2.2.4 "" }
    f.2.3 "" grid nested { f.2.3.1 "" f.2.3.2 "" f.2.3.3 "" f.2.3.4 "" }
    f.2.4 "" grid nested { f.2.4.1 "" f.2.4.2 "" f.2.4.3 "" f.2.4.4 "" }
  }
  f.3 "" radial nested {
    f.3.1 "" grid nested { f.3.1.1 "" f.3.1.2 "" f.3.1.3 "" f.3.1.4 "" }
    f.3.2 "" grid nested { f.3.2.1 "" f.3.2.2 "" f.3.2.3 "" f.3.2.4 "" }
    f.3.3 "" grid nested { f.3.3.1 "" f.3.3.2 "" f.3.3.3 "" f.3.3.4 "" }
    f.3.4 "" grid nested { f.3.4.1 "" f.3.4.2 "" f.3.4.3 "" f.3.4.4 "" }
  }
}

# A fractal f "" grid(columns: 3) nested { f.1 "" radial nested { f.1.1 "" grid nested { f.1.1.1 "" f.1.1.2 "" f.1.1.3 "" f.1.1.4 "" } f.1.2 "" grid nested { f.1.2.1 "" f.1.2.2 "" f.1.2.3 "" f.1.2.4 "" } f.1.3 "" grid nested { f.1.3.1 "" f.1.3.2 "" f.1.3.3 "" f.1.3.4 "" } f.1.4 "" grid nested { f.1.4.1 "" f.1.4.2 "" f.1.4.3 "" f.1.4.4 "" } } f.2 "" radial nested { f.2.1 "" grid nested { f.2.1.1 "" f.2.1.2 "" f.2.1.3 "" f.2.1.4 "" } f.2.2 "" grid nested { f.2.2.1 "" f.2.2.2 "" f.2.2.3 "" f.2.2.4 "" } f.2.3 "" grid nested { f.2.3.1 "" f.2.3.2 "" f.2.3.3 "" f.2.3.4 "" } f.2.4 "" grid nested { f.2.4.1 "" f.2.4.2 "" f.2.4.3 "" f.2.4.4 "" } } f.3 "" radial nested { f.3.1 "" grid nested { f.3.1.1 "" f.3.1.2 "" f.3.1.3 "" f.3.1.4 "" } f.3.2 "" grid nested { f.3.2.1 "" f.3.2.2 "" f.3.2.3 "" f.3.2.4 "" } f.3.3 "" grid nested { f.3.3.1 "" f.3.3.2 "" f.3.3.3 "" f.3.3.4 "" } f.3.4 "" grid nested { f.3.4.1 "" f.3.4.2 "" f.3.4.3 "" f.3.4.4 "" } } }

64 boxes, 0 edges. The audit finds no defect.

The input

The same layout in TypeScript. The input is plain data, so it can come from JSON.

fractal.ts

import { layout } from "ireko";

const input = {
  "root": {
    "id": "f",
    "label": "",
    "mode": "nested",
    "layout": {
      "type": "grid",
      "columns": 3
    },
    "children": [
      {
        "id": "f.1",
        "label": "",
        "mode": "nested",
        "layout": "radial",
        "children": [
          {
            "id": "f.1.1",
            "label": "",
            "mode": "nested",
            "layout": "grid",
            "children": [
              {
                "id": "f.1.1.1",
                "label": ""
              },
              {
                "id": "f.1.1.2",
                "label": ""
              },
              {
                "id": "f.1.1.3",
                "label": ""
              },
              {
                "id": "f.1.1.4",
                "label": ""
              }
            ]
          },
          {
            "id": "f.1.2",
            "label": "",
            "mode": "nested",
            "layout": "grid",
            "children": [
              {
                "id": "f.1.2.1",
                "label": ""
              },
              {
                "id": "f.1.2.2",
                "label": ""
              },
              {
                "id": "f.1.2.3",
                "label": ""
              },
              {
                "id": "f.1.2.4",
                "label": ""
              }
            ]
          },
          {
            "id": "f.1.3",
            "label": "",
            "mode": "nested",
            "layout": "grid",
            "children": [
              {
                "id": "f.1.3.1",
                "label": ""
              },
              {
                "id": "f.1.3.2",
                "label": ""
              },
              {
                "id": "f.1.3.3",
                "label": ""
              },
              {
                "id": "f.1.3.4",
                "label": ""
              }
            ]
          },
          {
            "id": "f.1.4",
            "label": "",
            "mode": "nested",
            "layout": "grid",
            "children": [
              {
                "id": "f.1.4.1",
                "label": ""
              },
              {
                "id": "f.1.4.2",
                "label": ""
              },
              {
                "id": "f.1.4.3",
                "label": ""
              },
              {
                "id": "f.1.4.4",
                "label": ""
              }
            ]
          }
        ]
      },
      {
        "id": "f.2",
        "label": "",
        "mode": "nested",
        "layout": "radial",
        "children": [
          {
            "id": "f.2.1",
            "label": "",
            "mode": "nested",
            "layout": "grid",
            "children": [
              {
                "id": "f.2.1.1",
                "label": ""
              },
              {
                "id": "f.2.1.2",
                "label": ""
              },
              {
                "id": "f.2.1.3",
                "label": ""
              },
              {
                "id": "f.2.1.4",
                "label": ""
              }
            ]
          },
          {
            "id": "f.2.2",
            "label": "",
            "mode": "nested",
            "layout": "grid",
            "children": [
              {
                "id": "f.2.2.1",
                "label": ""
              },
              {
                "id": "f.2.2.2",
                "label": ""
              },
              {
                "id": "f.2.2.3",
                "label": ""
              },
              {
                "id": "f.2.2.4",
                "label": ""
              }
            ]
          },
          {
            "id": "f.2.3",
            "label": "",
            "mode": "nested",
            "layout": "grid",
            "children": [
              {
                "id": "f.2.3.1",
                "label": ""
              },
              {
                "id": "f.2.3.2",
                "label": ""
              },
              {
                "id": "f.2.3.3",
                "label": ""
              },
              {
                "id": "f.2.3.4",
                "label": ""
              }
            ]
          },
          {
            "id": "f.2.4",
            "label": "",
            "mode": "nested",
            "layout": "grid",
            "children": [
              {
                "id": "f.2.4.1",
                "label": ""
              },
              {
                "id": "f.2.4.2",
                "label": ""
              },
              {
                "id": "f.2.4.3",
                "label": ""
              },
              {
                "id": "f.2.4.4",
                "label": ""
              }
            ]
          }
        ]
      },
      {
        "id": "f.3",
        "label": "",
        "mode": "nested",
        "layout": "radial",
        "children": [
          {
            "id": "f.3.1",
            "label": "",
            "mode": "nested",
            "layout": "grid",
            "children": [
              {
                "id": "f.3.1.1",
                "label": ""
              },
              {
                "id": "f.3.1.2",
                "label": ""
              },
              {
                "id": "f.3.1.3",
                "label": ""
              },
              {
                "id": "f.3.1.4",
                "label": ""
              }
            ]
          },
          {
            "id": "f.3.2",
            "label": "",
            "mode": "nested",
            "layout": "grid",
            "children": [
              {
                "id": "f.3.2.1",
                "label": ""
              },
              {
                "id": "f.3.2.2",
                "label": ""
              },
              {
                "id": "f.3.2.3",
                "label": ""
              },
              {
                "id": "f.3.2.4",
                "label": ""
              }
            ]
          },
          {
            "id": "f.3.3",
            "label": "",
            "mode": "nested",
            "layout": "grid",
            "children": [
              {
                "id": "f.3.3.1",
                "label": ""
              },
              {
                "id": "f.3.3.2",
                "label": ""
              },
              {
                "id": "f.3.3.3",
                "label": ""
              },
              {
                "id": "f.3.3.4",
                "label": ""
              }
            ]
          },
          {
            "id": "f.3.4",
            "label": "",
            "mode": "nested",
            "layout": "grid",
            "children": [
              {
                "id": "f.3.4.1",
                "label": ""
              },
              {
                "id": "f.3.4.2",
                "label": ""
              },
              {
                "id": "f.3.4.3",
                "label": ""
              },
              {
                "id": "f.3.4.4",
                "label": ""
              }
            ]
          }
        ]
      }
    ]
  }
};

const result = layout(input, {"nodeSize":{"width":28,"height":28},"spacing":8,"header":14});