# VectorNetwork

The `VectorNetwork`

API is the advanced way to change the geometry of an object. For the simple (and recommended) way to specify geometry, please look at the `VectorPath`

definition instead.

Vector networks enable Figma to provide better ways of manipulating stroke geometry than other apps. They are essentially a superset of paths; a vector network can represent everything paths can represent while paths can’t represent everything a vector network represents.

While paths can only represent chains of segments, vector networks can represent whole graphs of segments. This means more than two segments can connect together at a point. This is more natural to edit (connect anything to anything else) and is useful for preserving caps and joins as the graph is edited.

Vector networks come in three parts: an array of vertices, an array of segments that index into the array of vertices, and an array of regions that index into the array of segments.

## VectorNetwork

### VectorVertex> [readonly]

vertices: ReadonlyArray<Vertices are points in the graph.

### VectorSegment> [readonly]

segments: ReadonlyArray<Segments connect vertices.

### VectorRegion> [readonly]

regions?: ReadonlyArray<Regions are defined by segments and specify that an area is to be filled. Defaults to [].

## VectorVertex

Each vertex is a point in the graph, defined by its position.

### [readonly]

x: numberx position of the vertex relative to the position of the node.

### [readonly]

y: numbery position of the vertex relative to the position of the node.

### StrokeCap [readonly]

strokeCap?:Appearance of the end of a stroke. Defaults to the node's property if left unspecified.

### StrokeJoin [readonly]

strokeJoin?:Appearance of the join between two segments. Defaults to the node's property if left unspecified.

### [readonly]

cornerRadius?: numberCorner radius at this vertex. Defaults to the node's property if left unspecified.

### HandleMirroring [readonly]

handleMirroring?:How to two curve handles behave relative to one another. Defaults to the node's property if left unspecified.

## VectorSegment

Each segment has a start and an end vertex, referenced by index.

Segments represent both line segments and cubic spline segments. A line segment is just a cubic spline segment where both handles have a tangent of `{x: 0, y: 0}`

, which are also the default values of `tangentStart`

and `tangentEnd`

.

As long as the stroke weight is non-zero, a stroke will appear for every segment in the vector network. *Note* that it does not matter which is the start handle and which is the end handle. Segments are non-directional graph edges.

### [readonly]

start: numberThe index of the vertex that starts this segment.

### [readonly]

end: numberThe index of the vertex that ends this segment.

### Vector [readonly]

tangentStart?:The tangent on the start side of this segment. Defaults to { x: 0, y: 0 }

### Vector [readonly]

tangentEnd?:The tangent on the end side of this segment. Defaults to { x: 0, y: 0 }

## VectorRegion

Each region is essentially the same data as a `VectorPath`

; it has a winding rule and one or more loops. A region such as the fill of the letter "o" needs two loops, one for the outside and one for the inside. Each loop is an array of segment indices that specify the segments involved in the loop consecutively as they are encountered around the edge of the loop. Which segment the loop starts on is not important.

### [readonly]

windingRule: "NONZERO" | "EVENODD"Winding rule for this region.

### [readonly]

loops: ReadonlyArray<ReadonlyArray<number>>List of loops, each of which is a list of indices of `VectorSegment`

(s)

As an example, here's the same geometry as the path example `M 0 100 L 100 100 L 50 0 Z`

above, in vector network representation:

```
node.vectorNetwork = {
// The vertices of the triangle
vertices: [
{ position: { x: 0, y: 100} },
{ position: { x: 100, y: 100} },
{ position: { x: 50, y: 0} },
],
// The edges of the triangle. The index refers to the vertices array.
segments: [
{
start: { index: 0, tangent: { x: 0, y: 0} },
end: { index: 1, tangent: { x: 0, y: 0} },
},
{
start: { index: 1, tangent: { x: 0, y: 0} },
end: { index: 2, tangent: { x: 0, y: 0} },
},
{
start: { index: 2, tangent: { x: 0, y: 0} },
end: { index: 0, tangent: { x: 0, y: 0} },
},
],
// The loop that forms the triangle. Each loop is a
// sequence of indices into the segments array.
regions: [
{ windingRule: "NONZERO", loops: [[0, 1, 2]] }
],
}
```