Arc¶

An arc draws part of a circle on the card. Use it as a background shape, curved panel, highlight, or decorative element.

An arc is defined by its center, radius, and the number of degrees it covers.

Basic configuration¶

Add arcs under layout.arcs:

1
2
3
4
5
6
7
8
9

layout:
  arcs:
    - id: background-arc
      xpos: 50
      ypos: 50
      radius: 40
      arc_degrees: 260
      styles:
        fill: var(--primary-background-color)

xpos and ypos position the center of the arc.

radius controls its size and arc_degrees controls how much of the circle is drawn.

Configuration options¶

Arc size and direction¶

Change arc_degrees to create shorter or longer arcs:

1
2
3
4

- xpos: 50
  ypos: 50
  radius: 40
  arc_degrees: 180

1
2
3
4

- xpos: 50
  ypos: 50
  radius: 40
  arc_degrees: 260

1
2
3
4

- xpos: 50
  ypos: 50
  radius: 40
  arc_degrees: 360

Rotate the arc¶

Use rotate to move the opening around the circle without changing the number of degrees:

1
2
3
4
5

- xpos: 50
  ypos: 50
  radius: 40
  arc_degrees: 260
  rotate: 90

This makes it easy to use the same arc shape at different orientations.

Fill and outline¶

Arc shapes support SVG fill and outline styling:

1
2
3
4
5

styles:
  fill: var(--secondary-background-color)
  stroke: var(--divider-color)
  stroke-width: 1
  opacity: 0.8

Common properties include:

See Styling for the complete styling guide.

Color from an entity¶

Connect an arc to an entity when its color should respond to the entity state.

Arc color stops are applied to the fill by default:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

- xpos: 50
  ypos: 50
  radius: 40
  arc_degrees: 260
  entity_index: 0

  show:
    item_style: colorstop

  color_stops:
    colors:
      0: green
      50: orange
      100: red

See Color stops for ranges, gradients, palettes, and interpolation.

Related¶

• Circle
• Rectangle
• Positioning and sizing
• Styling
• Color stops
• Actions
• Animations