# SVG path
[Full-page experience](/experience/svg-path/) · [Open playground](/playground/#/examples/drawing/svg-path)

Bring compact SVG path data straight into a Canvas composition.

## Try it

Click the coral heart for a tiny color pulse.

## What to learn

- Render an SVG `d` string without an SVG element.
- Style the resulting shape with Canvas fill and stroke properties.

## Integration boundaries

- Path data is parsed by the browser’s `Path2D` implementation.
- Use a group when imported path coordinates need translation or scale.

This is a Pibbl Canvas example. Its mount owns its runtime resources; call its controller's dispose method when removing it. The preview starts automatically unless reduced motion is enabled; Stop disposes the mount. Preserve the source's logical canvas size and aspect ratio. Native HTML is not captured by Canvas filters.

## Related APIs

- [SvgPath](/reference/components/svg-path/)

## Complete source

Host setup for this source: use a canvas with width 720 and height 420, compile with `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`, import its default `mount`, and call `const controller = mount(canvas)` after attaching the canvas. Call `controller.dispose()` before removing it.

### svg-path.example.tsx

```tsx
import {
  pibbl,
  useSignal,
  Group,
  Rectangle,
  SvgPath,
  Text,
  type PibblController,
} from "@pibbl/core";
function SvgPathStudy() {
  const active = useSignal(false);
  return [
    <Rectangle
      style={{
        left: 0,
        top: 0,
        width: 720,
        height: 420,
        fill: "#f7c948",
      }}
    />,
    <Rectangle
      style={{
        left: 52,
        top: 52,
        width: 616,
        height: 316,
        fill: "#fffdf6",
        stroke: "#17211d",
        strokeWidth: 6,
      }}
    />,
    <Group
      style={{
        translateX: 238,
        translateY: 70,
        scaleX: 2.45,
        scaleY: 2.45,
      }}
    >
      <SvgPath
        style={{
          d: "M50 88 C20 68 4 48 8 28 C12 4 42 0 50 20 C58 0 88 4 92 28 C96 48 80 68 50 88 Z",
          fill: active.get() ? "#1f4bd8" : "#ff6b57",
          stroke: "#17211d",
          strokeWidth: 2,
          cursor: "pointer",
        }}
        onClick={() => active.update((value) => !value)}
      />
    </Group>,
    <Text
      style={{
        left: 360,
        top: 326,
        fill: "#17211d",
        font: "800 17px sans-serif",
        textAlign: "center",
      }}
    >
      {active.get() ? "SVG PATH / ACTIVE" : "SVG PATH / CLICK"}
    </Text>,
  ];
}
export default function mount(canvas: HTMLCanvasElement): PibblController {
  return pibbl(canvas, <SvgPathStudy />);
}

```

## Documentation version

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