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

Examples

Free

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

Preview

Code

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

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