Luna UI Documentation

CircleHoleElement is a VisualElement that paints a filled rectangle with a circular hole in the middle. Tween Radius from large to zero (or vice versa) to mask in/out the rest of the screen — used by Luna's circle-loading transition.

Circle Hole

Setup

html

<luna:CircleHoleElement Radius="200" CircleSegments="64" FillColor="#000000FF" />

Animate Radius to drive a transition:

csharp

hole.Radius = 0;
hole.experimental.animation
    .Start(0f, 800f, 600, (e, v) => hole.Radius = v);

When Radius <= 0, the rectangle fills completely (no hole).

Inspector (UxmlAttributes)

Attribute	Type	Description
`Radius`	float	Hole radius in pixels (default `10`).
`CircleSegments`	int	Polygon segments approximating the circle. Higher = smoother (default `10`).
`FillColor`	Color	Color of the filled area outside the hole (default opaque black).

Circle Hole

Setup

Inspector (UxmlAttributes)

See also