Background Shapes

An SVG background that fills a mirrored grid with randomly changing geometric cells (lines, circles, squares) for an animated decorative backdrop.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Background Shapes to your project and fits it to your theme.

import { BackgroundShapes } from "@/components/ui/background-shapes";

const Demo = () => {
  return (
    <div className="flex h-full min-h-[500px] w-full items-center justify-center bg-[#2164D6]">
      <BackgroundShapes width={800} height={500} colors={["white"]} />
    </div>
  );
};

export default Demo;