### Installing Rough Notation via npm

Source: https://github.com/rough-stuff/rough-notation/blob/master/README.md

This command adds the Rough Notation library to your project as a dependency using npm, saving it to your `package.json` file.

```Bash
npm install --save rough-notation
```

--------------------------------

### Animating Multiple Annotations with Annotation Group

Source: https://github.com/rough-stuff/rough-notation/blob/master/README.md

This JavaScript example shows how to use `annotationGroup` to sequentially animate multiple annotations. It creates individual annotation objects and then groups them, allowing them to be shown in a defined order.

```JavaScript
import { annotate, annotationGroup } from 'rough-notation';

const a1 = annotate(document.querySelector('#e1'), { type: 'underline' });
const a2 = annotate(document.querySelector('#e3'), { type: 'box' });
const a3 = annotate(document.querySelector('#e3'), { type: 'circle' });

const ag = annotationGroup([a3, a1, a2]);
ag.show();
```

--------------------------------

### Creating and Displaying a Basic Annotation

Source: https://github.com/rough-stuff/rough-notation/blob/master/README.md

This JavaScript snippet demonstrates how to create a basic annotation on an HTML element using `annotate()` and then display it using the `show()` method. It imports the `annotate` function and applies an 'underline' style.

```JavaScript
import { annotate } from 'rough-notation';
// Or using unpkg
// import { annotate } from 'https://unpkg.com/rough-notation?module';

const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline' });
annotation.show();
```

--------------------------------

### Loading Rough Notation ES Module

Source: https://github.com/rough-stuff/rough-notation/blob/master/README.md

This HTML script tag loads the Rough Notation library as an ES module directly from unpkg, making it available for modern JavaScript applications.

```HTML
<script type="module" src="https://unpkg.com/rough-notation?module"></script>
```

--------------------------------

### Loading Rough Notation IIFE Version

Source: https://github.com/rough-stuff/rough-notation/blob/master/README.md

This HTML script tag loads the IIFE (Immediately Invoked Function Expression) version of Rough Notation from unpkg, which exposes a global `RoughNotation` object.

```HTML
<script src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script>
```

--------------------------------

### Updating Rough Notation Color (JavaScript)

Source: https://github.com/rough-stuff/rough-notation/blob/master/README.md

This snippet demonstrates how to create a Rough Notation annotation and then dynamically update its color property after it has been displayed. It first selects an HTML element, creates an 'underline' annotation with an initial red color, shows it, and then changes the annotation's color to green. This illustrates that annotation properties can be modified post-creation.

```JavaScript
const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline', color: 'red' });
annotation.show();
annotation.color = 'green';
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.