# Graphics

Reusable brand elements, each a dependency-free script.

- `gritmind-logo-animation.js` - the formal logo animation. Documented with the
  logo in `assets/logo/README.md`
- `gritmind-swoosh.js` and its SVG masters - below

## The swoosh

Four outlined bands that rise through an arch and fall through a U. It is a
nod to the logo: the bands are offset like its four arches. One wave is an arch
and a U; a swoosh repeats it as many times as the layout needs.

| File | What it is |
|---|---|
| `gritmind-swoosh.js` | The generator. Any number of waves, any colours, and a draw-on control for motion |
| `gritmind-swoosh-single-navy-on-light.svg` | One wave, `#131938` lines on `#fafafa` |
| `gritmind-swoosh-single-white-on-dark.svg` | One wave, `#ffffff` lines on `#20243a` |
| `gritmind-swoosh-row-navy-on-light.svg` | Four waves, as in the designer's file |
| `gritmind-swoosh-row-white-on-dark.svg` | Four waves, dark ground |

The masters are generated. Change the generator or the tokens, then run
`node scripts/build-swoosh.mjs`; never edit the SVGs by hand.

### Rules

- Lines are the ink colour of the ground: `light.ink` on light, `dark.ink` on
  dark. Why: it is part of the mark family, so it follows the logo's colourways.
- The band fill must be the colour of whatever the swoosh sits on. Why: the
  fill is what hides the bands behind, so a mismatched fill shows as a box
  around every band. On a photo or a gradient, do not place it; use a flat
  ground instead.
- Never change the band count, the band offset or the line weight, and never
  stretch it. To make it longer, add waves; to make it bigger, scale it.
  Why: these are the proportions it shares with the logo's arches.

### Geometry

Measured from the designer's file, in its units (points). All values live in
`GritmindSwoosh.geometry`.

| | |
|---|---|
| Bands | 4, each 36.857 right of the one before; the leftmost passes in front |
| Band | 37 between the centres of its edge lines, edge lines 4 |
| Legs | 188 apart; 277.8 between the arch's spring line and the U's |
| Bends | elliptical on the centre line, 94 wide by 89 tall |
| Ends | the first leg hangs 81 below the arch spring line, the last stops at 73.5 |
| One wave | 527.571 x 496.8; each extra wave adds 376 to the width |

The rebuild matches the designer's file to within a unit, checked by overlaying
both. Two differences are deliberate: each band is one continuous line, so the
seams where the designer's separate waves meet are gone, and the band offset is
one value where the file varies between 36.5 and 37.4.

### Using the generator

```html
<script src="gritmind-swoosh.js"></script>
<div id="s" style="color:#131938; --swoosh-ground:#fafafa"></div>
<script>
  var s = GritmindSwoosh.mount(document.getElementById('s'), { waves: 2 });
  s.draw(0.5); // bands drawn halfway along their length
</script>
```

- `GritmindSwoosh.markup({ waves, line, ground, drawn, title })` returns an
  `<svg>` string whose viewBox is the artwork in master units. `line` defaults
  to `currentColor` and `ground` to `var(--swoosh-ground)`.
- `GritmindSwoosh.mount(element, options)` renders into the element and returns
  `{ svg, draw(t) }`. `draw` takes 0 to 1 and suits frame-accurate video renders.
- In Node, `require()` it; `scripts/build-swoosh.mjs` does.

### Still to define

- Where the swoosh may appear, and at what sizes
- Whether it may take the accent colour
- Its motion: `draw(t)` is the mechanism, but no timing or easing is set yet

### Sources

- `Work/Gritmind/Brand/Swoosh/swoosh 1.ai` (iCloud): a single wave and a
  four-wave row, white on black and black on white
- `Work/Gritmind/Brand/Swoosh/swoosh 1.svg`: an earlier export of one wave