dots-composition-example

tilespec.json

{
  "grid": {
    "width": 20,
    "height": 20,
    "tileSize": 100,
    "stategy": "random"
  },
  "tileSet": [
    {
      "component": "SimpleDots",
      "props": {
        "centerFill": "#222",
        "centerStroke": "white",
        "centerStrokeWidth": 10,
        "radialFill": "transparent",
        "radialStroke": "white",
        "radialStrokeWidth": 10,
        "background": "deepskyblue",
        "withRadialStroke": true,
        "withCenterStroke": true,
        "rotations": [
          0,
          45
        ],
        "orders": 3,
        "centralRadius": 100,
        "secondaryRadius": 150,
        "tileSize": 50,
        "tileFill": "#000",
        "tileStroke": "transparent",
        "tileStrokeWidth": 0,
        "rotation": 0,
        "color1": "teal",
        "color2": "hotpink",
        "background1": "white",
        "lightDots": false,
        "dotsOpacity": 1
      }
    },
    {
      "component": "SquareDots",
      "props": {
        "centerFill": "#222",
        "radialFill": "transparent",
        "centerStroke": "#f80707",
        "radialStroke": "white",
        "withRadialStroke": true,
        "withCenterStroke": true,
        "centerStrokeWidth": 20,
        "radialStrokeWidth": 10,
        "background": "deepskyblue",
        "rotations": [
          0,
          45
        ],
        "orders": 4,
        "centralRadius": 100,
        "secondaryRadius": 150,
        "tileSize": 50,
        "tileFill": "#000",
        "tileStroke": "transparent",
        "tileStrokeWidth": 0,
        "rotation": 0,
        "color1": "teal",
        "color2": "hotpink",
        "background1": "white",
        "lightDots": false,
        "dotsOpacity": 1
      }
    },
    {
      "component": "SimpleDots",
      "props": {
        "centerFill": "white",
        "centerStroke": "white",
        "centerStrokeWidth": 10,
        "radialFill": "rgba(255, 255,255, 0.25)",
        "radialStroke": "white",
        "radialStrokeWidth": 10,
        "background": "deepskyblue",
        "withRadialStroke": true,
        "withCenterStroke": true,
        "rotations": [
          0,
          45
        ],
        "orders": 2,
        "centralRadius": 100,
        "secondaryRadius": 150,
        "tileSize": 50,
        "tileFill": "#000",
        "tileStroke": "transparent",
        "tileStrokeWidth": 0,
        "rotation": 0,
        "color1": "teal",
        "color2": "hotpink",
        "background1": "white",
        "lightDots": false,
        "dotsOpacity": 1
      }
    }
  ]
}