Hexagon Pattern
Hexagon Pattern tiles a honeycomb from one <pattern> definition. The tile holds two hexagons and their seam copies, so the browser repeats a handful of polygons instead of painting a grid of elements. Radius, spacing and orientation are independent.
Spacing is measured between the visible edges rather than on the raw axes, so gap reads as the same distance on every side of a hexagon. Dashed outlines are drawn from deduplicated edges: drawing each hexagon separately would restart the dash at every shared edge and break the rhythm.
A second <hexagons> array fills individual cells on top of the pattern, which is how you pick out a few cells without leaving the tile.
Usage
Hexagon Pattern
A honeycomb tile, with a handful of cells filled in
<template>
<div class="relative h-64 w-full overflow-hidden rounded-xl border border-default bg-default">
<MHexagonPattern
:radius="26"
:gap="4"
:hexagons="[[1, 1], [4, 4], [2, 2], [3, 4], [5, 4], [8, 2]]"
class="[mask-image:radial-gradient(320px_circle_at_center,white,transparent)]"
/>
<div class="relative z-10 flex h-full flex-col items-center justify-center gap-2 text-center">
<h3 class="text-2xl font-bold text-highlighted">
Hexagon Pattern
</h3>
<p class="max-w-xs text-sm text-muted">
A honeycomb tile, with a handful of cells filled in
</p>
</div>
</div>
</template>
Examples
Customize
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
radius | number | 40 | Radius of one hexagon, measured from its centre to a vertex, in pixels. |
gap | number | 0 | Visible spacing between neighbouring hexagons, in pixels. The tile grows to make room while the hexagons keep their radius. |
direction | 'horizontal' | 'vertical' | 'horizontal' | horizontal draws flat-top hexagons in a horizontal honeycomb; vertical draws pointy-top hexagons in a vertical one. |
strokeDasharray | string | '0' | Dash pattern for the outlines. 0, none or an empty string keeps them solid. |
hexagons | [number, number][] | [] | [col, row] cells to fill on top of the repeating pattern. |
color | string | 'var(--ui-border)' | Colour of the outlines and the filled cells. |
x | number | -1 | Horizontal offset of the pattern origin. |
y | number | -1 | Vertical offset of the pattern origin. |
class | string | '' | CSS classes for the <svg>. The element is positioned to fill its parent, so give the parent a height. |
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.hexagonPattern in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | pointer-events-none absolute inset-0 size-full fill-current stroke-current |
highlight | - | overflow-visible |
Accessibility
The <svg> is aria-hidden and pointer-events-none: the pattern is decoration, so it is skipped by screen readers and never intercepts a click. Put any real content in a sibling on top of it.