Conical Gradients¶

class Conical_Gradient¶

A specification for linear gradients of colors.

spread not applicable to conical gradients

Conceptually, the spread feature of other gradients can not be applied to conical gradients because conical gradients are implemented using the polar coordinate system.

preset : str | int | None¶

An optional preset gradient that has a pre-defined mapping of colors. Each preset is referenced by name (string) or by index (integer). See the Preset Gradients document for a complete list of supported values (with generated examples).

my-layout.yml¶

layers:
  - background:
      conical_gradient:
        preset: 84
        # or equivalently
        preset: PhoenixStart
        center: { x: 600, y: 315 }
        angle: 27.5

colors : Dict[Annotated[float, FieldInfo(annotation=NoneType, required=True, metadata=[Ge(ge=0.0), Le(le=1.0)])], Color]¶

A mapping of colors to their corresponding positions in the gradient. Each item in this mapping is composed of key: value pairs in which:

The key: is a position at which the color will occur in the gradient. This float must be in the range 0 to 1 inclusively. More detail about how these positional values are used is described in center and angle.
The value is a solid color to use at the specified point in the gradient.

This mapping’s color positions does not have to be in any specific order. If using a preset, then this mapping will override colors in the preset’s mapping of colors. When neither the preset or colors is specified, this defaults to 0.0: black and 1.0: white.

my-layout.yml¶

layers:
  - background:
      conical_gradient:
        colors:
          0.0: red
          0.5: green
          1.0: blue
        center: { x: 600, y: 315 }
        angle: 27.5

center : Offset¶: The starting position (offset) relative to the layout’s offset (the absolute top-left corner of the card). This offset corresponds to the minimum 0.0 position in the mapping of colors.

angle : float¶

The angle of the the line from center the represents the gradient’s start and stop limits. This value (in degrees) is clamped to a value greater than or equal to 0 and less than 360. The angle of origin (0 degrees) is located at 3 o’clock and increases counter-clockwise. The scale of listed colors begins at 0.0 on this line and continues counter-clockwise until ending at 1.0 on this line.

angle: -45 angle: 0 angle: 45 angle: 180

my-layout.yml¶

size: { height: 400, width: 400 }
layers:
  - ellipse:
      conical_gradient:
        center: { x: 200, y: 200 }
        angle: -45
        colors:
          0.0: red
          0.5: green
          1.0: blue

my-layout.yml¶

size: { height: 400, width: 400 }
layers:
  - ellipse:
      conical_gradient:
        center: { x: 200, y: 200 }
        angle: 0
        colors:
          0.0: red
          0.5: green
          1.0: blue

my-layout.yml¶

size: { height: 400, width: 400 }
layers:
  - ellipse:
      conical_gradient:
        center: { x: 200, y: 200 }
        angle: 45
        colors:
          0.0: red
          0.5: green
          1.0: blue

my-layout.yml¶

size: { height: 400, width: 400 }
layers:
  - ellipse:
      conical_gradient:
        center: { x: 200, y: 200 }
        angle: 180
        colors:
          0.0: red
          0.5: green
          1.0: blue