Gradients

You can fill shapes and paths with a gradient which smoothly transitions between two or more colors. Two types of gradients are currently available — linear and radial. Instances of either kind can be passed in as the fill argument for shapes and paths.

Linear Gradient

A linear gradient is specified by its endpoints ((x0, y0) and (x1, y1)) and two or more colors placed along that line segment. For instance, consider the following linear gradient:

from scripton.canvas import LinearGradient

gradient = LinearGradient(
    # Starting Point
    x0=265,
    y0=73,

    # Ending Point
    x1=447,
    y1=285,

    colors={
        0.0: '#FF5760',
        0.5: '#3D79FF',
        1.0: '#00FF8B'
    }
)

The figure below visualizes a way to understand this gradient:

The endpoints of the gradient are specified relative to the canvas.
The resulting gradient is always relative to the canvas, rather than any shape (rectangle, circle, ...) it's used to fill. The dashed circle in the figure visualizes what it would look like if this gradient was used to fill it. Notice that the gradient does not translate or scale to fit the circle.
The normalized color positions (0.0 — 1.0) are relative to the gradient's extents.

Radial Gradient

A radial gradient is specified by:

Two circles parameterized by their center and radius — a starting circle ((x0, y0, r0)) and an ending circle ((x1, y1, r1))
Two or more colors positioned between the circles

As a concrete example, consider the following radial gradient:

from scripton.canvas import RadialGradient

gradient = RadialGradient(
    # Starting circle
    x0=200,
    y0=200,
    r0=50,

    # Ending circle
    x1=210,
    y1=220,
    r1=100,

    colors={
        0: '#FFC833',
        0.5: '#FF5449',
        1.0: '#34186B'
    }
)

This radial gradient can be visualized and understood using the following figure:

As in the case of the linear gradient, all coordinates are relative to the global canvas coordinate frame (rather than any shape being filled using the gradient).
In this example, we have three colors positioned at 0, 0.5, and 1.0. These positions are visualized in the figure on the right. They're obtained by linearly interpolating from the starting circle (at 0.0) to the ending circle (at 1.0).