Dot pattern

A background dot pattern made with SVGs, fully customizable using Tailwind CSS.

Dot Pattern

Edit on GitHub

Copy code

Show code

<script setup lang="ts">
import DotPattern from "@/components/dot-pattern/dot-pattern.vue";
import { cn } from "@/libs/utils";
</script>

<template>
  <div class="grid place-items-center w-full min-h-screen">
    <div
      class="relative flex size-full items-center justify-center overflow-hidden h-[450px] w-[300px] md:w-[600px] lg:w-[850px]"
    >
      <p
        class="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white"
      >
        Dot Pattern
      </p>
      <DotPattern
        :class="cn('[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]')"
      />
    </div>
  </div>
</template>

Installation

Copy and paste the following code into your project:

dot-pattern.vue

<script setup lang="ts">
import { useId } from "vue";
import { cn } from "@/lib/utils";

interface DotPatternProps {
  width?: any;
  height?: any;
  x?: any;
  y?: any;
  cx?: any;
  cy?: any;
  cr?: any;
  className?: string;
  [key: string]: any;
}
const props = withDefaults(defineProps<DotPatternProps>(), {
  width: 16,
  height: 16,
  x: 0,
  y: 0,
  cx: 1,
  cy: 1,
  cr: 1,
});

const id = `pattern-${useId()}`;
</script>

<template>
  <svg
    aria-hidden="true"
    :class="
      cn('pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80', props.className)
    "
    v-bind="props"
  >
    <defs>
      <pattern
        :id="id"
        :width="props.width"
        :height="props.height"
        patternUnits="userSpaceOnUse"
        patternContentUnits="userSpaceOnUse"
        :x="props.x"
        :y="props.y"
      >
        <circle id="pattern-circle" :cx="props.cx" :cy="props.cy" :r="props.cr" />
      </pattern>
    </defs>
    <rect width="100%" height="100%" strokeWidth="0" :fill="`url(#${id})`" />
  </svg>
</template>

Examples

Linear Gradient

Dot Pattern

Edit on GitHub

Copy code

Show code

<script setup lang="ts">
import DotPattern from "@/components/dot-pattern/dot-pattern.vue";
import { cn } from "@/libs/utils";
</script>

<template>
  <div class="grid place-items-center w-full min-h-screen">
    <div
      class="relative flex size-full items-center justify-center overflow-hidden h-[450px] w-[300px] md:w-[600px] lg:w-[850px]"
    >
      <p
        class="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white"
      >
        Dot Pattern
      </p>
      <DotPattern
        :width="20"
        :height="20"
        :cx="1"
        :cy="1"
        :cr="1"
        :class="cn('[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)]')"
      />
    </div>
  </div>
</template>

Props

Prop	Type	Description	Default
width	any	Width of the dot pattern	16
height	any	Height of the dot pattern	16
x	any	X position of the dot	0
y	any	Y position of the dot	0
cx	any	X position of the circle	1
cy	any	Y position of the circle	1
cr	any	Radius of the circle	1
class	string	Class of the dot pattern	-