RadialGradient

23 Sep 20251 minute to read

A focal point defines the beginning of the gradient, and a circle defines the end point of the gradient

<div id='diagram'></div>

let stopscol: StopModel[] = [];
let stops1: StopModel = { color: 'white', offset: 0, opacity: 0.7 };
stopscol.push(stops1);
let stops2: StopModel = { color: 'red', offset: 0, opacity: 0.3 };
stopscol.push(stops2);
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stopscol, type: 'Radial' };
let nodes: NodeModel[] = [{ id: 'node1', width: 100, height: 100,
style: { gradient: gradient }
}];
let diagram: Diagram = new Diagram({
...
  nodes: nodes,
...
});
diagram.appendTo('#diagram');

Properties

cx number

Defines the cx value of radial gradient

Defaults to 0

cy number

Defines the cy value of radial gradient

Defaults to cy

fx number

Defines the fx value of radial gradient

Defaults to 0

fy number

Defines the fy value of radial gradient

Defaults to fy

id string

Defines the id of gradient

Defaults to ’’

r number

Defines the r value of radial gradient

Defaults to 50

stops StopModel[]

Defines the stop collection of gradient

Defaults to []

type GradientType

Defines the type of gradient

• Linear - Sets the type of the gradient as Linear
• Radial - Sets the type of the gradient as Radial

Defaults to ‘None’