Ripl

Appearance

Circle ​

A Circle draws a filled and/or stroked circle defined by a center point (cx, cy) and radius. It's the simplest shape in Ripl and a great starting point for learning the element API. Circles are commonly used as data point markers, avatar placeholders, decorative elements, and building blocks for more complex visualizations.

Example ​

RadiusStrokeOpacity

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.