## Usage ```svelte ``` ## Variants ### Dots ### backgroundVariant='dots' ```svelte String(value).substring(0, 3)} /> ``` ### Grid ### backgroundVariant='grid' ```svelte String(value).substring(0, 3)} /> ``` ### Cross Hatch ### backgroundVariant='cross-hatch' ```svelte String(value).substring(0, 3)} /> ``` ### Diagonal Lines ### backgroundVariant='diagonal-lines' ```svelte String(value).substring(0, 3)} /> ``` ### Plus ### backgroundVariant='plus' ```svelte String(value).substring(0, 3)} /> ``` ### Falling Triangles ### backgroundVariant='falling-triangles' ```svelte String(value).substring(0, 3)} /> ``` ### 4-Pointed Star ### backgroundVariant='4-pointed-star' ```svelte String(value).substring(0, 3)} /> ``` ### Tiny Checkers ### backgroundVariant='tiny-checkers' ```svelte String(value).substring(0, 3)} /> ``` ### Overlapping Circles ### backgroundVariant='overlapping-circles' ```svelte String(value).substring(0, 3)} /> ``` ### Wiggle Lines ### backgroundVariant='wiggle-lines' ```svelte String(value).substring(0, 3)} /> ``` ### Bubbles ### backgroundVariant='bubbles' ```svelte String(value).substring(0, 3)} /> ``` ## Custom Variant Add your own style: define an SVG `` and register it as a variant. 1. Add the new name to the `BackgroundVariant` union in `src/lib/registry/ui/layerchart-background/types.ts`. 2. Create a pattern component that returns a `` with your SVG shapes. 3. Register the pattern component in `PATTERN_MAP`. Example custom pattern: ```ts title="src/lib/registry/ui/layerchart-background/types.ts" export type BackgroundVariant = | 'dots' | 'grid' | 'cross-hatch' | 'diagonal-lines' | 'plus' | 'falling-triangles' | '4-pointed-star' | 'tiny-checkers' | 'overlapping-circles' | 'wiggle-lines' | 'bubbles' | 'custom-pattern'; ``` ```svelte title="src/lib/registry/ui/layerchart-background/patterns/custom-pattern.svelte" ``` ```ts title="src/lib/registry/ui/layerchart-background/pattern-map.ts" import type { Component } from 'svelte'; import Bubbles from './patterns/bubbles.svelte'; import CrossHatch from './patterns/cross-hatch.svelte'; import DiagonalLines from './patterns/diagonal-lines.svelte'; import DotsPattern from './patterns/dots.svelte'; import FallingTriangles from './patterns/falling-triangles.svelte'; import FourPointedStar from './patterns/four-pointed-star.svelte'; import GridPattern from './patterns/grid.svelte'; import OverlappingCircles from './patterns/overlapping-circles.svelte'; import Plus from './patterns/plus.svelte'; import TinyCheckers from './patterns/tiny-checkers.svelte'; import WiggleLines from './patterns/wiggle-lines.svelte'; import CustomPattern from './patterns/custom-pattern.svelte'; import type { BackgroundVariant, PatternProps } from './types.js'; export const PATTERN_MAP: Record> = { dots: DotsPattern, grid: GridPattern, plus: Plus, bubbles: Bubbles, 'cross-hatch': CrossHatch, 'diagonal-lines': DiagonalLines, 'falling-triangles': FallingTriangles, '4-pointed-star': FourPointedStar, 'tiny-checkers': TinyCheckers, 'overlapping-circles': OverlappingCircles, 'wiggle-lines': WiggleLines, 'custom-pattern': CustomPattern }; ``` Then use it in any chart: ```svelte ``` > Tip: Use your logo as a pattern. Swap the SVG shape for an `` pointing to your logo, then control its size and transparency: ``.