Dot Pattern

`<pura-dot-pattern>` lays a dot field behind its slotted content, in the style of Magic UI's Dot Pattern, and complements `<pura-grid-pattern>`, which only covers grid lines. `variant` switches to honeycomb outlines (`hex`, an inline SVG pattern) or diagonal stripes (`stripes`); `fade` applies a radial-gradient mask so the pattern fades toward the edges (default), at the center, or not at all; and the `glow` attribute reveals a brighter copy through a radial mask that sweeps the field with one pure CSS `@keyframes`, no animation runtime. Theme with `--pura-dot-pattern-color`, `--pura-dot-pattern-size`, `--pura-dot-pattern-gap`, `--pura-dot-pattern-glow`, `--pura-dot-pattern-spot` (glow size), and `--pura-dot-pattern-duration`. The sweep is gated behind `prefers-reduced-motion: no-preference`, so under reduce the glow rests centered. Each instance registers in `window.__puraDotPatterns` by `data-pura-id` and mirrors its resolved config in `data-pura-dot-*` attributes.

Preview

<!-- dot backdrop with a sweeping glow, faded at the edges -->
<pura-dot-pattern glow style="--pura-dot-pattern-glow: #22d3ee;">
  <section class="hero">Content over the dots</section>
</pura-dot-pattern>

<!-- honeycomb variant, full coverage, custom spacing -->
<pura-dot-pattern variant="hex" gap="32" fade="none">
  <div>...</div>
</pura-dot-pattern>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/dot-pattern.js"></script>

import "./pura/lib/dot-pattern.js";