Dot pattern

A customizable SVG-based dot pattern component that can seamlessly fill any container. Adjust properties like dot size and positioning, ideal for backgrounds and overlays.

Props

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

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

cr?: number
The radius of each dot.
Default: 1

cx?: number
The center-x of each dot.
Default: 1

cy?: number
The center-y of each dot.
Default: 1

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

Examples

Free

When used freely, the dot pattern fills the parent container.

Preview

Code

<template>
    <FluxAspectRatio :aspect-ratio="16 / 9">
        <FluxVisualDotPattern
            :width="15"
            :height="15"
            style="fill: var(--gray-900)"/>
    </FluxAspectRatio>
</template>

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

Glow

With `glow` enabled, the pattern lights 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">
            <FluxVisualDotPattern
                glow
                :width="18"
                :height="18"/>
        </FluxAspectRatio>
    </FluxPane>
</template>

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