Interactive Grid Pattern

An interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.

Edit on GitHub

Copy code

Show code

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

<template>
  <div class="grid place-items-center w-full min-h-screen">
    <div
      class="relative flex h-[450px] w-[300px] flex-col items-center justify-center overflow-hidden rounded-lg border md:w-[500px]"
    >
      <InteractiveGridPattern
        :class="
          cn(
            '[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]',
            'inset-x-0 inset-y-[-30%] h-[200%] skew-y-12',
          )
        "
      />
    </div>
  </div>
</template>

Installation

Copy and paste the following code into your project:

interactive-grid-pattern.vue

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

interface InteractiveGridPatternProps {
  width?: number;
  height?: number;
  squares?: [number, number];
  class?: string;
  squaresClassName?: string;
}

const props = withDefaults(defineProps<InteractiveGridPatternProps>(), {
  width: 40,
  height: 40,
  squares: () => [24, 24],
});

const hoveredSquare = ref<number | null>(null);
</script>

<template>
  <svg
    :width="width * squares[0]"
    :height="height * squares[1]"
    :class="cn('absolute inset-0 h-full w-full border border-gray-400/30', props.class)"
  >
    <rect
      v-for="(_, index) in squares[0] * squares[1]"
      :key="index"
      :x="(index % squares[0]) * width"
      :y="Math.floor(index / squares[0]) * height"
      :width="width"
      :height="height"
      :class="
        cn(
          'interactive-grid-square stroke-gray-400/30',
          hoveredSquare === index ? 'fill-gray-300/30' : 'fill-transparent',
          squaresClassName,
        )
      "
      @mouseenter="hoveredSquare = index"
      @mouseleave="hoveredSquare = null"
    />
  </svg>
</template>

<style scoped>
.interactive-grid-square {
  transition: all 1000ms ease-in-out;
}
.interactive-grid-square:hover {
  transition-duration: 100ms;
}
</style>

Examples

Colorful

Edit on GitHub

Copy code

Show code

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

<template>
  <div class="grid place-items-center w-full min-h-screen">
    <div
      class="relative flex h-[450px] w-[300px] flex-col items-center justify-center overflow-hidden rounded-lg border md:w-[500px]"
    >
      <InteractiveGridPattern
        :width="20"
        :height="20"
        :squares="[80, 80]"
        :class="cn('[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]')"
        squares-class-name="hover:fill-blue-500"
      />
    </div>
  </div>
</template>

Props

Prop	Type	Default	Description
width	number	40	Width of each square in the grid.
height	number	40	Height of each square in the grid.
squares	[number, number]	[24, 24]	Number of squares in the grid. First number is horizontal squares, second is vertical squares.
class	string	-	Class name applied to the grid container.
squaresClassName	string	-	Class name applied to individual squares in the grid.