Mension Path.pen in the guide documentation

docs/guide.md

@@ -38,13 +38,34 @@ const normal = Path.normalAtTime(rect, 0.5)
 
 These functions are appropriately memoized, so even if called multiple times for the same path, not all calculations are re-executed. However, if you make destructive changes to the path data and then call these functions, you may not get the correct results.
 
-Therefore, when modifying path data, it is recommended to use utility functions that always return new path data rather than modifying original path (such as [`moveTo`](api/modules/Path.html#moveto) or [`lineTo`](api/modules/Path.html#lineto) similar to the Canvas API):
+Therefore, when you want to perform procedural operations such as modifying path data or adding new vertices to the path, you will take one of the following three methods:
+
+1. Use utility functions that always generate new path data (such as [`Path.moveTo`](./api/modules/Path.html#moveto) and [`Path.lineTo`](./api/modules/Path.html#lineto) similar to the Canvas API)
+2. Use [Path.pen](./api/modules/Path.html#pen) to draw path data in order of vertices
+3. Use a library for manipulating immutable data structures such as [immer](https://immerjs.github.io/immer/)
 
 ```ts
+// 1. Use utility functions
 let p = Path.moveTo(Path.empty, [10, 10])
 p = Path.lineTo(p, [20, 20])
 p = Path.cubicBezierTo(p, [80, 30], [0, 40], [50, 50])
 p = Path.closePath(p)
+
+// 2. Use Path.pen()
+const p = Path.pen()
+	.moveTo([10, 10])
+	.lineTo([20, 20])
+	.cubicBezierTo([80, 30], [0, 40], [50, 50])
+	.close()
+	.get()
+
+// 3. Example using immer
+import {produce} from 'immer'
+
+const pathA = Path.arc([50, 50], 40, 0, 90)
+const pathB = produce(pathA, draft => {
+	draft.curves[0].closed = true
+})
 ```
 
 Or use a library for manipulating immutable data structures such as [immer](https://immerjs.github.io/immer/):

docs/ja/guide.md

@@ -32,18 +32,28 @@ const normal = Path.normalAtTime(rect, 0.5)
 
 これらの戻り値は適切にキャッシュ（メモ化）するため、同じパスに対して何度も呼び出しても全ての計算が再実行されることはありません。しかし、パスデータに対して破壊的な変更を加えた後にこれらの関数を呼び出すと、正しい結果が得られないことがあります。
 
-このため、パスデータを変更する際には、常に新しいパスデータを生成するユーティリティ関数（Canvas APIと同様の[`Path.moveTo`](../api/modules/Path.html#moveto)や[`Path.lineTo`](../api/modules/Path.html#lineto)など）を使うか:
+このため、パスデータを変更したり、パスに新しい頂点を付け足すというような、手続き的な処理を行いたい場合、以下の3つの方法のいずれかをとることになります。
+
+1. 常に新しいパスデータを生成するユーティリティ関数（Canvas APIと同様の[`Path.moveTo`](../api/modules/Path.html#moveto)や[`Path.lineTo`](../api/modules/Path.html#lineto)など）を使う
+2. [Path.pen](../api/modules/Path.html#pen)を使って、パスデータを生成する
+3. [immer](https://immerjs.github.io/immer/)のようなイミュータブルなデータ構造を操作するためのライブラリを使う
 
 ```ts
+// 1. ユーティリティ関数を使う
 let p = Path.moveTo(Path.empty, [10, 10])
 p = Path.lineTo(p, [20, 20])
 p = Path.cubicBezierTo(p, [80, 30], [0, 40], [50, 50])
 p = Path.closePath(p)
-```
 
-あるいは、[immer](https://immerjs.github.io/immer/)のようなイミュータブルなデータ構造を操作するためのライブラリを使うことをお勧めします:
+// 2. Path.penを使う
+const p = Path.pen()
+	.moveTo([10, 10])
+	.lineTo([20, 20])
+	.cubicBezierTo([80, 30], [0, 40], [50, 50])
+	.close()
+	.get()
 
-```ts
+// 3. immerを使った例
 import {produce} from 'immer'
 
 const pathA = Path.arc([50, 50], 40, 0, 90)