Tessellation
Fill a surface with repeating geometric tiles.
Preview
Import
import { Tessellation } from "@sigil-ui/components";Usage
<div className="grid w-full grid-cols-1 gap-[var(--s-space-3)] sm:grid-cols-3">
{["zigzag", "crosshatching", "diamondGrid"].map((variant) => (
<div key={variant} className="relative h-40 overflow-hidden border border-[var(--s-border)] bg-[var(--s-surface)]">
<Tessellation variant={variant === "zigzag" ? "zigzag" : variant === "crosshatching" ? "crosshatching" : "diamondGrid"} opacity={0.28} />
<span className="absolute bottom-3 left-3 bg-[var(--s-background)] px-2 py-1 font-mono text-xs text-[var(--s-text)]">{variant}</span>
</div>
))}
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | TessellationVariant | zigzag | Pattern variant. |
opacity | number | 0.06 | Pattern opacity. |
scale | number | 1 | Scale multiplier on background-size. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |