Ripl

Appearance

Circle ​

A Circle draws a filled and/or stroked circle defined by a center point (cx, cy) and radius. It is the smallest complete example of the element API — state, styling, transforms, events and hit testing all behave here exactly as they do on every other shape. Circles are the usual choice for scatter markers, data point dots, avatar placeholders and graph nodes.

Example ​

Usage ​

ts
import {
    createCircle,
} from '@ripl/web';

const circle = createCircle({
    fill: '#3a86ff',
    cx: 200,
    cy: 150,
    radius: 60,
});

Properties ​

The circle's geometry is defined by cx, cy, and radius. All properties are animatable and support style inheritance from parent groups.

NOTE

For the full property list, see the Circle API Reference.