Extends Item

Ellipse

The Ellipse element draws a solid colored ellipse, optionally with a border outline.

Here are some examples.

property Color color: #black

The ellipse's fill color.

Ellipse {
    width: 100; height: 100

    color: #orange
}

property Gradient.Linear gradient: null

Sets the ellipse's fill gradient.

Ellipse {
    width: 100; height: 100

    gradient: Gradient.Linear {
        Gradient.Stop {
            stop: 0
            color: #red
        }
        Gradient.Stop {
            stop: 1
            color: #orange
        }
    }
}

property Float borderWidth: 0

property Color borderColor: #black

Together define the border of the ellipse. With the default border width of 0, the ellipse's color extends right to the edge. A positive border width causes the border color to extend inwards from the ellipse's edges.

Ellipse {
    width: 100; height: 100
    color: #orange

    borderWidth: 2
    borderColor: #black
}