Using sweep gradient

Use a sweep gradient to show transitions between two or more colors rotated around a center point.

To paint a shape node with a sweep gradient, use:

• Sweep Gradient Brush for a 2D shape node. See Painting a 2D shape node with a sweep gradient.

• SweepGradientMaterial for a 3D shape node. See Painting a 3D shape node with a sweep gradient.

For example, use a sweep gradient to create a circular processing indicator. See Creating a circular processing indicator.

Painting a 2D shape node with a sweep gradient

Use the SweepGradientMaterial to paint the fill or stroke of a 3D shape node with a sweep gradient.

To paint a 2D shape node with a sweep gradient:

1. In the Library press Alt and right-click Materials and Textures, select Sweep Gradient Brush, and name the brush.

   

2. Create or select a 2D shape node where you want to show the sweep gradient.

   For example, in the Node Tree create an Oval 2D node.

   

3. In the Properties add the Foreground Brush or Stroke Brush property, and set it to the sweep gradient brush that you created.

   For example, in the Properties add and set:

   • Foreground Brush to < No Brush >

   • Oval Width and Oval Height to set the size of the oval

   • Stroke Brush to the Sweep Gradient Brush

   • Stroke Thickness to set the thickness of the donut where you show the sweep gradient

   

4. In the Properties click next to the brush property that you added in the previous step to go to the Sweep Gradient Brush used by that property, add the Gradient Stops property, and set it to a comma-separated list of gradient color stops. See Gradient color stops.

   For example, to create a gradient from transparent to green, set Gradient Stops to:

   transparent, green
   

   

5. (Optional) In the Properties add and set:

   • Gradient Center to set the center of the sweep gradient on the x and y axes

   • Sweep Gradient Sweep Angle to set the span of the sweep gradient in radians

   • Sweep Gradient Start Angle to set the rotation of the sweep gradient in radians

   You can set these properties either in the Sweep Gradient Brush or in a 2D shape node that uses the Sweep Gradient Brush.

   

Painting a 3D shape node with a sweep gradient

Use the SweepGradientMaterial to paint the fill or stroke of a 3D shape node with a sweep gradient.

To paint a 3D shape node with a sweep gradient:

1. In the Asset Packages click + Add Asset Source and in the directory where you extracted the Kanzi Shapes package select the assets/Shapes directory.

   After you add the asset source, you see in the Asset Packages window the materials included in the Shapes asset package.

   When you add an asset source to Kanzi Studio, you make that asset source available to all your Kanzi Studio projects.

   

2. In the Asset Packages right-click the SweepGradientMaterial and select Import Asset Package.

   Kanzi Studio adds the SweepGradientMaterial material to the Library > Materials and Textures > Materials.

   

3. Create or select a 3D shape node where you want to show the sweep gradient.

   For example, in the Node Tree create an Oval 3D node.

   

4. In the Properties add the Fill Material or Stroke Material property, and set it to the SweepGradientMaterial material.

   For example, in the Properties add and set:

   • Fill Material to < Unassigned >

   • Stroke Material to the SweepGradientMaterial

   • Stroke Thickness to set the thickness of the donut where you show the sweep gradient

   

5. In the Properties click next to the material property that you added in the previous step to go to the SweepGradientMaterial, add the Gradient Stops property, and set it to a comma-separated list of gradient color stops. See Gradient color stops.

   For example, to create a gradient from transparent to green, in the Properties set:

   • Gradient Stops to

     transparent, green
     

   • Blend Mode to Alpha: Premultiplied

   

6. (Optional) In the Properties add and set:

   • Gradient Center to set the center of the sweep gradient on the x and y axes

   • Sweep Gradient Sweep Angle to set the span of the sweep gradient in radians

   • Sweep Gradient Start Angle to set the rotation of the sweep gradient in radians

   You can set these properties either in the Sweep Gradient Brush or in a 3D shape node that uses the Sweep Gradient Brush.

   

See also

Gradients

Using linear gradient

Using radial gradient

Filling a shape

Using stroke