# Path-like shapes
Create curved, stroked, and polygonal shapes and transform them.

## APIs demonstrated

- [capsuleShape2D](/reference/functions/physics-2d/) from `@pibbl/core/physics/2d/geometry`
- [segmentShape2D](/reference/functions/physics-2d/) from `@pibbl/core/physics/2d/geometry`
- [chainShape2D](/reference/functions/physics-2d/) from `@pibbl/core/physics/2d/geometry`
- [polygonShape2D](/reference/functions/physics-2d/) from `@pibbl/core/physics/2d/geometry`
- [arcShape2D](/reference/functions/physics-2d/) from `@pibbl/core/physics/2d/geometry`
- [wedgeShape2D](/reference/functions/physics-2d/) from `@pibbl/core/physics/2d/geometry`
- [transformShape2D](/reference/functions/physics-2d/) from `@pibbl/core/physics/2d/geometry`
- [PibblPhysicsTransform2D](/reference/types/physics-2d/) from `@pibbl/core/physics/2d/geometry`

## Complete example

[Plain source](/minimal/physics/geometry-paths.ts). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```ts
import {
  arcShape2D,
  boundsOfShape2D,
  capsuleShape2D,
  chainShape2D,
  polygonShape2D,
  segmentShape2D,
  transformShape2D,
  wedgeShape2D,
  type PibblPhysicsShape2D,
  type PibblPhysicsTransform2D,
  type PibblPhysicsVector2,
} from '@pibbl/core/physics/2d/geometry';

const start: PibblPhysicsVector2 = [0, 0];
const end: PibblPhysicsVector2 = [20, 0];
const triangle: readonly PibblPhysicsVector2[] = [[0, 0], [20, 0], [10, 18]];
const shapes: Record<string, PibblPhysicsShape2D> = {
  capsule: capsuleShape2D({ start, end, radius: 4 }),
  segment: segmentShape2D({ start, end }),
  chain: chainShape2D({ points: [[0, 0], [20, 0], [20, 20]] }),
  polygon: polygonShape2D({ points: triangle }),
  arc: arcShape2D({ radius: 16, startAngleRadians: 0, endAngleRadians: Math.PI, thickness: 3 }),
  wedge: wedgeShape2D({ radius: 16, startAngleRadians: 0, endAngleRadians: Math.PI / 2 }),
};
const transform: PibblPhysicsTransform2D = { position: [40, 30], rotationDegrees: 30 };
const rows = Object.entries(shapes).map(([name, shape]) => {
  const moved = transformShape2D(shape, transform);
  const bounds = boundsOfShape2D(moved);
  return `${name}: ${bounds.min.map(n => n.toFixed(1)).join(',')} to ${bounds.max.map(n => n.toFixed(1)).join(',')}`;
});

const output = document.createElement('pre');
output.textContent = rows.join('\n');
document.body.append(output);

```

## Usage notes

- Each row reports the world bounds after one shared transform.

## Documentation version

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