Skip to main content

​
Striped Pattern

A simple SVG-based diagonal striped pattern component. Creates clean, repeating diagonal lines that can be oriented left or right.

​
Installation

npx shadcn-svelte@latest add https://sv-animations.vercel.app/r/striped-pattern.json

​
Usage

<script lang="ts">
  import { StripedPattern } from "$lib/components/magic-ui/striped-pattern";
</script>

<div class="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border">
  <StripedPattern
    direction="left"
    width={10}
    height={10}
    class="text-gray-500"
  />
  <p class="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white">
    Striped Pattern
  </p>
</div>

​
Props

​
direction
'left' | 'right'
default:"left"
The direction of the diagonal stripes. “left” creates stripes from top-left to bottom-right, “right” creates stripes from top-right to bottom-left.
​
width
number
default:"10"
The width of the pattern tile in pixels. Controls the spacing between stripes.
​
height
number
default:"10"
The height of the pattern tile in pixels. Controls the spacing between stripes.
​
class
string
Additional CSS classes to apply to the SVG element. Use to control color with text-* utilities.

​
Examples

​
Left Direction Stripes

<StripedPattern direction="left" />

​
Right Direction Stripes

<StripedPattern direction="right" />

​
Wider Spacing

<StripedPattern
  width={20}
  height={20}
  class="text-blue-500"
/>

​
Narrow Spacing

<StripedPattern
  width={5}
  height={5}
  class="text-purple-500"
/>

​
Custom Color

<StripedPattern
  direction="right"
  width={15}
  height={15}
  class="text-emerald-500/50"
/>

​
Dense Pattern

<StripedPattern
  width={8}
  height={8}
  class="text-gray-400/30"
/>

​
Notes

  • Purely SVG-based with no animations
  • Very lightweight and performant
  • Stroke width is fixed at 0.5 for clean lines
  • Use Tailwind’s text-* utilities to control stripe color
  • Width and height props control both size and spacing
  • Pattern automatically fills the container element
  • Can be combined with opacity utilities for subtle effects

Build docs developers (and LLMs) love

Get started for freeTalk to us