Rectangle
Use rectangles as bold blocks of color, outlined frames, and precise layout anchors.
Full pageShapes
Circle
Draw a round mark from an explicit center and radius.
Full page
Ellipse
Stretch and rotate a curved mark with independent horizontal and vertical radii.
Full page
Arc
Draw a stroke-only curved sweep with explicit start and end angles.
Full page
Line
Connect a sequence of coordinates into expressive polylines and diagrams.
Full page
Wedge
Close a circular sweep back to its center to make a filled sector.
Full page
Horizontal line
Place crisp horizontal rules without repeating endpoint coordinates.
Full page
Vertical line
Build dividers, ticks, and rhythm with a one-axis line helper.
Full page
Polygon
Close ordered coordinate pairs into a filled, outlined multi-sided mark.
Full page
Regular polygon
Generate a regular shape with equal sides and angles from a center and exactly one size mode.
Full page
Star
Alternate outer tips and inner valleys to draw a star with selective rounded corners.
Full page
Path
Draw custom geometry with the browser’s Path2D vocabulary and let Pibbl paint it.
Full page
SVG path
Bring compact SVG path data straight into a Canvas composition.
Full page- Rectangle: Use rectangles as bold blocks of color, outlined frames, and precise layout anchors. Full page · Playground
- Circle: Draw a round mark from an explicit center and radius. Full page · Playground
- Ellipse: Stretch and rotate a curved mark with independent horizontal and vertical radii. Full page · Playground
- Arc: Draw a stroke-only curved sweep with explicit start and end angles. Full page · Playground
- Line: Connect a sequence of coordinates into expressive polylines and diagrams. Full page · Playground
- Wedge: Close a circular sweep back to its center to make a filled sector. Full page · Playground
- Horizontal line: Place crisp horizontal rules without repeating endpoint coordinates. Full page · Playground
- Vertical line: Build dividers, ticks, and rhythm with a one-axis line helper. Full page · Playground
- Polygon: Close ordered coordinate pairs into a filled, outlined multi-sided mark. Full page · Playground
- Regular polygon: Generate a regular shape with equal sides and angles from a center and exactly one size mode. Full page · Playground
- Star: Alternate outer tips and inner valleys to draw a star with selective rounded corners. Full page · Playground
- Path: Draw custom geometry with the browser’s Path2D vocabulary and let Pibbl paint it. Full page · Playground
- SVG path: Bring compact SVG path data straight into a Canvas composition. Full page · Playground
Documentation version
Section titled “Documentation version”Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.