Dot Pattern

SVG dot grid background with an optional radial mask for spotlight effects.

MMeridian DS·byMDMeridian DSPro

4,110

Bookmarks

16,800

Installs

102,400

Views

12 lines

import { DotPattern } from "@/components/ui/dot-pattern"

export default function DemoDotPattern() {
  return (
    <div className="relative flex min-h-[320px] w-full items-center justify-center overflow-hidden bg-zinc-950">
      <DotPattern className="[mask-image:radial-gradient(320px_circle_at_center,white,transparent)]" />