Circle preview

Live preview

Read as Markdown

The preview draws a teal circle centered at (150, 100), with radius 60, on a 600 by 200 logical surface. Its diameter is 120 logical pixels. The rest of the surface is transparent.

createElement(Circle, {
  style: { cx: 150, cy: 100, radius: 60, fill: "#267d7c" },
});

Increase radius to change the geometry; changing only fill changes paint. The responsive display scales this fixed logical surface, so display pixels may differ from logical units.

Full Circle reference · Open editable Circle · Sizing foundations

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.