Striped Pattern

Backgrounds

About

A customizable SVG background of diagonal striped lines that you can slant, dash, and mask with Tailwind CSS.

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

Code

How Striped Pattern is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { StripedPattern } from "@/components/ui/striped-pattern"

export default function StripedPatternDemo() {
  return (
    <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border">
      <StripedPattern className="[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]" />
    </div>
  )
}