Skip to main content

​
Dot Pattern

A customizable dot pattern background component that creates a repeating grid of dots. Supports optional glow animations and mask effects for beautiful background designs.

​
Installation

npx shadcn-svelte@latest add https://sv-animations.vercel.app/r/dot-pattern.json

​
Usage

<script lang="ts">
  import { DotPattern } from "$lib/components/magic-ui/dot-pattern";
  import { cn } from "$lib/utils";
</script>

<div class="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border">
  <DotPattern
    class={cn(
      "mask-[radial-gradient(300px_circle_at_center,white,transparent)]"
    )}
  />
  <p class="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
    Dot Pattern
  </p>
</div>

​
Props

​
width
number
default:"16"
The width of the pattern tile in pixels.
​
height
number
default:"16"
The height of the pattern tile in pixels.
​
x
number
default:"0"
The x-offset of the entire pattern.
​
y
number
default:"0"
The y-offset of the entire pattern.
​
cx
number
default:"1"
The x-offset of individual dots within the pattern tile.
​
cy
number
default:"1"
The y-offset of individual dots within the pattern tile.
​
cr
number
default:"1"
The radius of each dot in pixels.
​
glow
boolean
default:"false"
Whether dots should have a glowing animation effect with pulsing opacity and scale.
​
class
string
Additional CSS classes to apply to the SVG element.

​
Examples

​
Basic Dot Pattern

<DotPattern />

​
With Glow Effect

<DotPattern
  glow={true}
  class={cn(
    "mask-[radial-gradient(300px_circle_at_center,white,transparent)]"
  )}
/>

​
With Linear Gradient Mask

<DotPattern
  class="mask-[linear-gradient(to_bottom_right,white,transparent,transparent)]"
/>

​
Custom Dot Size and Spacing

<DotPattern
  width={24}
  height={24}
  cr={2}
  class="text-blue-500"
/>

​
Larger Dots with Glow

<DotPattern
  width={32}
  height={32}
  cr={3}
  glow={true}
  class="text-purple-500 mask-[radial-gradient(500px_circle_at_center,white,transparent)]"
/>

​
Notes

  • The component uses motion-sv for glow animations
  • Glow effect creates random pulsing animations for each dot
  • Use CSS masks to create focused or gradient reveal effects
  • The pattern automatically adapts to container size
  • Each dot can have different animation timing when glow is enabled

Build docs developers (and LLMs) love

Get started for freeTalk to us