This component no longer exists. It was in Svelte Animations’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-05 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
Striped Pattern
svelte-animations/striped-patternRemovedBlock
An SVG-based striped pattern background component with configurable direction and stripe dimensions.
Install it
npx shadcn@latest add https://sv-animations.vercel.app/r/striped-pattern.jsonSource
1<script lang="ts">2 import { cn } from "$UTILS$.js";3 import type { SVGAttributes } from "svelte/elements";45 interface Props extends SVGAttributes<SVGSVGElement> {6 direction?: "left" | "right";7 class?: string;8 }910 let {11 direction = "left",12 class: className,13 width = 10,14 height = 10,15 ...restProps16 }: Props = $props();1718 let id = $props.id();19 let w = $derived(Number(width));20 let h = $derived(Number(height));21</script>2223<svg24 aria-hidden="true"25 class={cn("pointer-events-none absolute inset-0 z-10 h-full w-full stroke-[0.5]", className)}26 xmlns="http://www.w3.org/2000/svg"27 {...restProps}28>29 <defs>30 <pattern {id} width={w} height={h} patternUnits="userSpaceOnUse">31 {#if direction === "left"}32 <line x1="0" y1={h} x2={w} y2="0" stroke="currentColor" />33 <line x1={-w} y1={h} x2="0" y2="0" stroke="currentColor" />34 <line x1={w} y1={h} x2={w * 2} y2="0" stroke="currentColor" />35 {:else}36 <line x1="0" y1="0" x2={w} y2={h} stroke="currentColor" />37 <line x1={-w} y1="0" x2="0" y2={h} stroke="currentColor" />38 <line x1={w} y1="0" x2={w * 2} y2={h} stroke="currentColor" />39 {/if}40 </pattern>41 </defs>42 <rect width="100%" height="100%" fill={`url(#${id})`} />43</svg>
