Flare Editor JSON - Simple Rectangle

rectangle_flare.js

{
    // all properties of items are their "setup"/"rig" properties
    // animations can override these as time elapses, however this example has no animations
    "artboards": {
        "type": "artboards", // every object is expected to have a type field
        "id": 985, // ids are used to reference one object from another, however this example doesn't use this
        "name": "Artboards", // every objet can have a user provided name
        "main": true,  // whether or not this artboard is the main artboard
        "children": // most objects can have children (type artboards, artboard, node, shape, path)
        [{
            "type": "artboard",
            "id": 986,
            "name": "Artboard",
            "translation": [0, 0], // artboard can have translation
            "origin": [0.5, 0.5], // this is the normalized coordinate of the origin 0, 0 == top left, 0.5, 0.5 == center, 1, 1 == bottom right
            "width": 1024, // width of the artboard
            "height": 768, // height of the artboard
            "color": [0.364705890417099, 0.364705890417099, 0.364705890417099, 1], // color of the artboard in rgba float32
            "clipContents": true, // whether contents outside the bounds determined by width, height, and origin are clipped
            "animations": [], // list of animations for this artboard (this example has none)
            "children": [{
                "type": "shape", // first item in the artboard is a shape
                "id": 987,
                "name": "Rectangle",
                "blendMode": "srcOver", // blend mode (srcOver is simple transparency)
                "drawOrder": 1, // similar to z-index in css
                "children": [{
                    "type": "colorStroke", // color stroke is only allowed inside of a shape
                    "id": 988,
                    "name": "Color",
                    "opacity": 1,
                    "color": [0, 0.41619041562080383, 0.5476190447807312, 1],
                    "width": 20, // thickness of the stroke
                    "cap": "butt",
                    "join": "miter",
                    "trim": "off", // options for trimming the stroke
                    "trimStart": 0,
                    "trimEnd": 1,
                    "trimOffset": 0
                }, {
                    "type": "colorFill", // fill for the parent shape
                    "id": 989,
                    "name": "Color",
                    "opacity": 1,
                    "color": [0.4399999976158142, 0.9832000136375427, 1, 1],
                    "fillRule": "nonzero"
                }, {
                    "type": "rectangle", // procedural path in the shape
                    "id": 990,
                    "name": "Rectangle Path",
                    "width": 500,
                    "height": 500,
                    "cornerRadius": 0
                }]
            }]
        }]
    }
}

rounded_rectangle.js

{
    "artboards": {
        "type": "artboards",
        "id": 985,
        "name": "Artboards",
        "main": 0,
        "children": [{
            "type": "artboard",
            "id": 986,
            "name": "Artboard",
            "translation": [0, 0],
            "origin": [0.5, 0.5],
            "width": 1024,
            "height": 768,
            "color": [0.364705890417099, 0.364705890417099, 0.364705890417099, 1],
            "clipContents": true,
            "animations": [],
            "children": [{
                "type": "shape",
                "id": 987,
                "name": "Rectangle",
                "blendMode": "srcOver",
                "drawOrder": 1,
                "children": [{
                    "type": "colorStroke",
                    "id": 988,
                    "name": "Color",
                    "opacity": 1,
                    "color": [0, 0.41619041562080383, 0.5476190447807312, 1],
                    "width": 20,
                    "cap": "butt",
                    "join": "miter",
                    "trim": "off",
                    "trimStart": 0,
                    "trimEnd": 1,
                    "trimOffset": 0
                }, {
                    "type": "colorFill",
                    "id": 989,
                    "name": "Color",
                    "opacity": 1,
                    "color": [0.4399999976158142, 0.9832000136375427, 1, 1],
                    "fillRule": "nonzero"
                }, {
                    "type": "path", // here the procedural rectangle was converted to a simple path
                    "id": 991,
                    "name": "Rectangle Path",
                    "isClosed": true,
                    "children": [{
                        "type": "point", // paths can have children of type point
                        "id": 992,
                        "name": "Path Point",
                        "translation": [-250, -250],
                        "in": [0, 0],
                        "out": [0, 0],
                        "pointType": "S", // points can be of type S for straight (linear), M for mirror (cubic), D for disconnected (cubic), and A for asymmetric (cubic)
                        "radius": 0
                    }, {
                        "type": "point",
                        "id": 993,
                        "name": "Path Point",
                        "translation": [250, -250],
                        "in": [0, 0],
                        "out": [0, 0],
                        "pointType": "S", // straight point type
                        "radius": 100 // radius of 100 
                    }, {
                        "type": "point",
                        "id": 994,
                        "name": "Path Point",
                        "translation": [250, 250],
                        "in": [0, 0],
                        "out": [0, 0],
                        "pointType": "S",
                        "radius": 0
                    }, {
                        "type": "point",
                        "id": 995,
                        "name": "Path Point",
                        "translation": [-250, 250],
                        "in": [0, 0],
                        "out": [0, 0],
                        "pointType": "S",
                        "radius": 0
                    }]
                }]
            }]
        }]
    }
}

These are actually JSON files, I just named the .js to allow the commenting to work.

This is what the first simple procedural rectangle looks like:

This is the second one converted to a path with a radius on the top right straight vertex: