# Fill D3 arrow with colors

I managed to plot an arrow with D3 that changes direction and size dynamically. Now, I would like to fill the encapsulated area with a color. However, I plot the arrow outline with a succession of lines, so I am not sure how to tell D3 that this area is closed and ready to fill?

```    for (let i = 0; i < ARROW_SHAPE.length - 1; i++){
const x1: number = ARROW_SHAPE[i][0] * Math.cos(angle) - ARROW_SHAPE[i][1] * Math.sin(angle);
const y1: number = ARROW_SHAPE[i][0] * Math.sin(angle) + ARROW_SHAPE[i][1] * Math.cos(angle);
const x2: number = ARROW_SHAPE[i + 1][0] * Math.cos(angle) - ARROW_SHAPE[i + 1][1] * Math.sin(angle);
const y2: number = ARROW_SHAPE[i + 1][0] * Math.sin(angle) + ARROW_SHAPE[i + 1][1] * Math.cos(angle);
this.g.append('line')
.attr('stroke', color)
.attr('stroke-width', 4)
.attr('x1', x1 * size)
.attr('y1', y1 * size)
.attr('x2', x2 * size)
.attr('y2', y2 * size);
}
```

How shall I adjust my dummy code to create a polygon out of my lines and allow it to be filled?

Don’t create your arrow from a series of individual lines. Create a `<polygon>` or a `<path>` instead. A polygon is easiest.
```const arrow = [];