Gradient | Notion

The Gradient object.

Example:Applying a linear gradient color containing evenly distributed color stops:

// Define two points which we will be using to construct
// the path and to position the gradient color:
var topLeft = view.center - [80, 80];
var bottomRight = view.center + [80, 80];

// Create a rectangle shaped path between
// the topLeft and bottomRight points:
var path = new Path.Rectangle({
    topLeft: topLeft,
    bottomRight: bottomRight,
    // Fill the path with a gradient of three color stops
    // that runs between the two points we defined earlier:
    fillColor: {
        gradient: {
            stops: ['yellow', 'red', 'blue']
        },
        origin: topLeft,
        destination: bottomRight
    }
});

Example:Create a circle shaped path at the center of the view, using 40% of the height of the view as its radius and fill it with a radial gradient color:

var path = new Path.Circle({
    center: view.center,
    radius: view.bounds.height * 0.4
});

// Fill the path with a radial gradient color with three stops:
// yellow from 0% to 5%, mix between red from 5% to 20%,
// mix between red and black from 20% to 100%:
path.fillColor = {
    gradient: {
        stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
        radial: true
    },
    origin: path.position,
    destination: path.bounds.rightCenter
};

Properties

stops
radial

Methods

clone()
equals(gradient)

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0d10a785-5dc5-44f5-ac4f-2eb80d24b302/Wentin_Logo.svg" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0d10a785-5dc5-44f5-ac4f-2eb80d24b302/Wentin_Logo.svg" width="40px" /> wentin.co

</aside>

<aside> <img src="https://cdn1.iconfinder.com/data/icons/ios-11-glyphs/30/twitter-512.png" alt="https://cdn1.iconfinder.com/data/icons/ios-11-glyphs/30/twitter-512.png" width="40px" /> Twitter

</aside>

<aside> <img src="https://image.flaticon.com/icons/png/512/25/25231.png" alt="https://image.flaticon.com/icons/png/512/25/25231.png" width="40px" /> Github

</aside>

Shortcuts