# noodles — Examples

## curve

```html
<noodles-ui id="noodle-bezier" style="position:relative; width:400px; height:200px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);">
  <div data-noodle-port="right" style="position:absolute; left:20px; top:30px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Node A</div>
  <div data-noodle-port="left right" style="position:absolute; left:160px; top:90px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Node B</div>
  <div data-noodle-port="left" style="position:absolute; left:300px; top:40px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Node C</div>
</noodles-ui>
```

## editable + show-ports

```html
<noodles-ui id="noodle-editable" editable show-ports style="position:relative; width:400px; height:200px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);">
  <div data-noodle-port="right bottom" style="position:absolute; left:20px; top:30px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Source</div>
  <div data-noodle-port="left right top" style="position:absolute; left:160px; top:100px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Middle</div>
  <div data-noodle-port="left top" style="position:absolute; left:300px; top:40px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Target</div>
</noodles-ui>
```

## animated

```html
<noodles-ui id="noodle-animated" animated style="position:relative; width:400px; height:160px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);">
  <div data-noodle-port="right" style="position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Start</div>
  <div data-noodle-port="left" style="position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">End</div>
</noodles-ui>
```
