Path

The Path element is a general-purpose shape that delegates its geometry to a user-supplied callback function. Instead of having fixed geometry like a circle or rect, you provide a pathRenderer function that draws arbitrary commands onto a ContextPath. This makes it ideal for custom icons, complex outlines, or any shape that doesn't fit the built-in elements.

NOTE

For the full API, see the Core API Reference.

Demo

StarHeartArrowCrossSize

Usage

import {
    createPath,
} from '@ripl/web';

const path = createPath({
    fill: '#3a86ff',
    x: 50,
    y: 50,
    width: 100,
    height: 100,
    pathRenderer: (path, { x, y, width, height }) => {
        // Draw any geometry using the ContextPath API
        path.moveTo(x, y);
        path.lineTo(x + width, y + height / 2);
        path.lineTo(x, y + height);
        path.closePath();
    },
});

path.render(context);

Properties

• x — X position of the bounding area
• y — Y position of the bounding area
• width — Width of the bounding area
• height — Height of the bounding area
• pathRenderer — Callback (path: ContextPath, state: PathState) => void that draws the geometry

The Path Renderer

The pathRenderer callback receives:

1. path — A ContextPath instance with methods like moveTo, lineTo, arc, bezierCurveTo, quadraticCurveTo, rect, circle, ellipse, and closePath
2. state — The current { x, y, width, height } of the element

This separation means the geometry is always defined relative to the element's position and size, making the shape responsive and animatable.

Updating the Renderer

You can swap the path renderer at any time via setPathRenderer:

path.setPathRenderer((p, { x, y, width, height }) => {
    p.circle(x + width / 2, y + height / 2, width / 2);
});

Animation

Since x, y, width, and height are standard numeric properties, they can be animated with transitions:

await renderer.transition(path, {
    duration: 500,
    state: {
        x: 200,
        y: 100,
        width: 150,
        height: 150,
    },
});

The path renderer is called on every frame with the interpolated values, producing smooth size and position animations.

Icon Rendering

The Path element is useful for rendering custom SVG-style icons at arbitrary sizes:

function iconCheck(path, { x, y, width, height }) {
    const cx = x + width / 2;
    const cy = y + height / 2;
    const s = Math.min(width, height) * 0.4;
    path.moveTo(cx - s, cy);
    path.lineTo(cx - s * 0.3, cy + s * 0.7);
    path.lineTo(cx + s, cy - s * 0.5);
}

createPath({
    stroke: '#2ecc71',
    lineWidth: 3,
    autoFill: false,
    x: 0,
    y: 0,
    width: 32,
    height: 32,
    pathRenderer: iconCheck,
});