Shape Magic

SVG shape editor with automatic rounded inner corners and bridge curves. Export as SVG, React component, or CSS clip-path.

svg shape design clip-path geometry export

Tools

Style

Fill

Settings

Radius

Export

100%

Shape Studio

"use client";

import { ShapeMagic } from "@/components/vritti/shape-magic";

export function ShapeMagicExample() {
  return (
    <div className="w-full h-[600px]">
      <ShapeMagic />
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/shape-magic"