This example shows how to draw shapes and line segments with the `Path` shape.

{{>graphics-path-source}}

HTML

```
```

CSS

``` #mygraphiccontainer { position: relative; width: 700px; height:300px; } ```

Javascript

Create a `Graphic` instance.

``` var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"}); ```

Create two path elements for end shapes. Give each a red fill and a black stroke.

``` var diamond1 = mygraphic.addShape({ type: "path", stroke: { weight: 1, color: "#000" }, fill: { color: "#f00" } }); var diamond2 = mygraphic.addShape({ type: "path", stroke: { weight: 1, color: "#000" }, fill: { color: "#f00" } }); ```

Create a path for the connecting segment. Give it a black dashed stroke and no fill. The `dashstyle` property of the stroke attribute allows for the creation of a dashed stroke. The first value is the length of the dash and the second value is the gap space between dashes.

``` var connector = mygraphic.addShape({ type: "path", stroke: { weight: 1, color: "#000", opacity: 1, dashstyle: [3, 4] } }); ```

Draw the first diamond.

``` diamond1.moveTo(60, 60); diamond1.lineTo(80, 40); diamond1.lineTo(100, 60); diamond1.lineTo(80, 80); diamond1.lineTo(60, 60); diamond1.end(); ```

Draw the connector segment.

``` connector.moveTo(100, 60); connector.lineTo(450, 220); connector.end(); ```

Draw the second diamond.

``` diamond2.moveTo(450, 220); diamond2.lineTo(470, 200); diamond2.lineTo(490, 220); diamond2.lineTo(470, 240); diamond2.lineTo(450, 220); diamond2.end(); ```

Complete Example Source

``` {{>graphics-path-source}} ```