---
id: portfolio.ds.sqvl-mesh-animation
name: "SQVL Mesh Animation"
type: pattern
status: active
relations: []
sources: ["apps/portfolio-site/src/design-system/docs/sqvl-mesh-animation.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/SqvlMeshAnimation.astro","packages/design-system/src/components/animations/SqvlMeshAnimation.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/sqvl-mesh-animation.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/sqvl-mesh-animation.astro"]
---
# SQVL Mesh Animation

## Purpose
Realtime SVG source for the SQVL project visual, built from a parallax topographic map, squad markers, and animated mesh links.

## Use
- A new SQVL video loop needs a source of truth or runtime fallback.
- Squad locations and mesh communication need to read at a glance.
- The visual must adapt its network density to the rendered canvas size.

## Contract
- Keep the canvas full bleed and predominantly black.
- Keep every contour as an independent stroked SVG path without fills.
- Do not connect or intersect neighboring contour paths.
- Pan contour layers left and right on the same sine wave while scaling travel by depth.
- Reduce contour brightness with depth so distant layers are darker.
- Keep squad markers opaque and above the contour layers.
- Calculate the number of mesh bars from each connection's rendered length.
- Animate signals by increasing and decreasing the height of the existing mesh bars.
- Keep waveform signals amber and preserve consistent bar spacing across links.
- Respect reduced-motion preferences.

## Current Usage

- SVG source and fallback child of `SQVL Mesh Video Animation`.
- Design System component preview.

## Code Paths

- `packages/design-system/src/components/SqvlMeshAnimation.astro`
- `packages/design-system/src/components/animations/SqvlMeshAnimation.astro`

## Do Not Use

Do not use outside the documented source, composition, or ownership contract without Design System Architect review.

## Accessibility

Preserve applicable accessibility behavior of the implementation and verify changes in actual usage.

## Verification

- Confirm every source path in frontmatter resolves to current implementation or documentation.
- Run `scripts/design-system-graph --check --no-write`.
- Verify actual usage and documented Preview against the enabled package profiles before completion.