SVG Isometric Grid

Installation

npx kinetic-ui-cli@latest add svg-isometric-grid

How It Works

Rendering 3D scenes is normally reserved for WebGL/Canvas, but we can achieve stunning pseudo-3D effects using SVG by applying an isometric projection matrix algorithm to standard X/Y Cartesian coordinates. The SvgIsometricGrid mathematically calculates a grid of dots in isometric space (isoX, isoY). When a dot is clicked, it records that coordinate as an epicenter, and every other dot calculates its Pythagorean distance from that epicenter to mathematically stagger a Framer Motion delay, causing a perfectly smooth, physical ripple effect across the terrain.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { SvgIsometricGrid } from "@/components/creative/svg-isometric-grid";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { SvgIsometricGrid } from "@/components/creative/svg-isometric-grid";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <SvgIsometricGrid
        gridSize{10}
        spacing{10}
        dotRadius{10}
      />
    </div>
  );
}