Grid pattern

A stylish SVG grid pattern component that fills any container and can be customized in terms of grid size, positioning, and stroke style. Supports highlighting specific squares.

Props

width?: number
The width of each cell.
Default: 42

height?: number
The height of each cell.
Default: 42

stroke-dasharray?: number
The dasharray of the stroke.

squares?: Array<[x: number, y: number]>
Highlight specific cells.
Default: []

glow?: boolean
Light up the grid lines with the primary color around the cursor.

Examples

Free

When used freely, the grid pattern fills its parent container.

Preview

Code

<template>
    <FluxPane variant="flat">
        <FluxAspectRatio :aspect-ratio="21 / 9">
            <FluxVisualGridPattern
                :height="42"
                :width="42"
                :stroke-dasharray="2"
                :squares="[
                    [1, 1],
                    [2, 2],
                    [7, 5],
                    [8, 4]
                ]"/>
        </FluxAspectRatio>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxAspectRatio, FluxPane } from '@flux-ui/components';
    import { FluxVisualGridPattern } from '@flux-ui/visuals';
</script>

Glow

With `glow` enabled, the grid lines light up around the cursor as it moves across the container, while the rest stays dimmed.

Preview

Code

<template>
    <FluxPane variant="well">
        <FluxAspectRatio :aspect-ratio="21 / 9">
            <FluxVisualGridPattern
                glow
                :width="30"
                :height="30"
                :stroke-dasharray="3"/>
        </FluxAspectRatio>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxAspectRatio, FluxPane } from '@flux-ui/components';
    import { FluxVisualGridPattern } from '@flux-ui/visuals';
</script>