Circle Element
Draw a filled or outlined circle.
Circle Element
The Circle element draws a circular shape within its bounding area. It can be filled, stroked, or both. Use it for token icons, bullet points, stat indicators, and any circular graphic element on a card.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
FillColor | string | — | Fill color (hex, named, or constant) |
FillOpacity | number | 1 | Fill opacity (0–1) |
StrokeColor | string | — | Border color |
StrokeMM | number | 0 | Border thickness in mm |
StrokeOpacity | number | 1 | Border opacity (0–1) |
OuterColor | string | — | Color outside the circle bounds |
TintColor | string | — | Color to tint the fill and stroke |
TintAmount | number | 0 | Tint intensity (0–100) |
FillColor
FillColor sets the interior fill color of the circle. It accepts #RRGGBB hex codes, CSS named colors, and [[ConstantName]] constant references. When no FillColor is set, the circle renders without a fill (transparent interior), showing only the stroke if one is defined. You can use data bindings to vary the fill color per card — for example, "{{ElementColor}}" to pick a different color per element type.
FillOpacity
FillOpacity controls the transparency of the fill from 0 (completely invisible) to 1 (fully opaque). A semi-transparent fill allows background images or underlying elements to show through. This is useful for semi-transparent status overlays or indicators that should not completely obscure the artwork behind them.
StrokeColor
StrokeColor sets the color of the circle's outline ring. Accepts hex values, CSS named colors, and constant references. If StrokeMM is non-zero but StrokeColor is not set, the border defaults to black.
StrokeMM
StrokeMM sets the border ring thickness of the circle in millimetres. Unlike the rectangle's Stroke property, this property is named StrokeMM to make the unit explicit. A value of 0 means no border is drawn. The stroke is centered on the circle's circumference edge.
StrokeOpacity
StrokeOpacity controls the transparency of the circle's border ring, from 0 (invisible) to 1 (fully opaque). Use a lower opacity for subtle or decorative borders that should visually recede.
OuterColor
OuterColor fills the area outside the circle's bounds with a solid color. Since the circle is inscribed within a rectangular bounding box, the four corner areas outside the circle are normally transparent. Setting OuterColor fills these corners — useful when you want the circle to appear "punched out" of a solid background, or to mask the area outside the circle with the card's background color.
TintColor
TintColor applies a color tint to both the fill and stroke of the circle. Use this to dynamically shift the circle's colors at render time — for example, tinting a neutral badge with a data-bound faction color. Accepts #RRGGBB hex codes, CSS named colors, and [[ConstantName]] constant references.
TintAmount
TintAmount controls how strongly the TintColor is applied, from 0 (no tint — original colors) to 100 (full tint — solid tint color). Values in between blend the tint with the original fill and stroke colors proportionally.