SVG Shape Morph

Installation

npx kinetic-ui-cli@latest add svg-shape-morph

How It Works

Morphing SVGs is notoriously tricky because you usually have to interpolate between two drastically different mathematical paths. The SvgShapeMorph component utilizes framer-motion's native SVG path interpolation. By ensuring that pathA and pathB possess the exact same structure (the same number of M and L plotting commands), Framer Motion is able to Tween between the point coordinates flawlessly, allowing a "Play" icon to organically reshape into a "Pause" icon.

Usage Guide

1. Import the Component

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

import { SvgShapeMorph } from "@/components/creative/svg-shape-morph";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { SvgShapeMorph } from "@/components/creative/svg-shape-morph";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <SvgShapeMorph
        pathA="example"
        pathB="example"
        fill="example"
      />
    </div>
  );
}