Background Pattern Library

Interactive showcase of 15 background patterns: from geometric tessellation to AI particle fields. Includes theme variations for topographic (mountain, ocean, desert) and particle systems (AI-blue, purple, matrix, cosmic). Each pattern tells a story and signals specific brand attributes. Choose the aesthetic that matches your positioning.

Geometric Precision

Modern • Energetic • Structured

V4: Subtle Geometric
Current Production

Delaunay triangulation with subtle blur creates visible geometric patterns that add modern energy and structure. Perfect for tech-forward brands.

Density
low
Blur
subtle (0.5px)
Animated
true
Complexity
35-42/100
Best For:
  • SaaS products and tech startups
  • Modern, energetic brands
  • Action-oriented messaging
  • Younger, tech-savvy audiences
// V4 Implementation <TessellationBg density="low" animated=true blur="subtle" />

Atmospheric Sophistication

Premium • Organic • Calming

V5: Heavy Blur (Organic)
New Variant

Same tessellation with heavy gaussian blur transforms geometric shapes into soft, organic color washes. Creates a premium, watercolor-like aesthetic.

Density
low
Blur
heavy (8px)
Animated
true
Complexity
25-32/100
Best For:
  • Luxury and premium services
  • High-end creative agencies
  • Aspirational, elevated messaging
  • Quality-focused audiences
// V5 Implementation <TessellationBg density="low" animated=true blur="heavy" />

Balanced Approach

Versatile • Approachable • Refined

Medium Blur (Balanced)
Experimental

The middle ground between geometric and organic. Shapes are visible but softened, creating a refined yet approachable aesthetic.

Density
medium
Blur
medium (2px)
Animated
true
Complexity
30-38/100
Best For:
  • Professional services
  • B2B SaaS products
  • Versatile brand aesthetics
  • Broad audience appeal
// Medium Blur Implementation <TessellationBg density="medium" animated=true blur="medium" />

Dense Geometry

Detailed • Static • Technical

High Density (Static)
Experimental

Maximum polygon count without animation creates a rich, detailed texture. Best for technical or data-focused applications.

Density
high
Blur
subtle (0.5px)
Animated
false
Complexity
45-55/100
Best For:
  • Data visualization tools
  • Technical documentation
  • Analytics dashboards
  • Developer-focused products
// High Density Implementation <TessellationBg density="high" animated= blur="subtle" />

Pure Color Flow

Minimal • Premium • Apple-like

Gradient Mesh (Apple-like)
Phase 3

Ultra-smooth gradient mesh with no shapes. Pure CSS color flow creates an Apple-like premium aesthetic. Zero computation, maximum elegance.

Theme
branded
Intensity
medium
Animated
true
Complexity
15-20/100
Best For:
  • Premium consumer tech
  • Design tools and creative apps
  • Minimalist brand aesthetics
  • Apple-inspired products
// Gradient Mesh Implementation <GradientMesh theme="branded" animated=true intensity="medium" />

Dark Radial Orbs

Sophisticated • DeFi • Premium Dark

Gradient Mesh - Noir Theme
New!

Dark background with vibrant glowing cyan, mint-green, and purple orbs. Bold, electric colors create a premium DeFi aesthetic. Increased blur (80px) and larger gradients for dramatic glow effect.

Theme
noir
Background
Dark gradient (#0a0e12)
Intensity
high
Animation
slow (20s)
Complexity
12-18/100
Best For:
  • DeFi and blockchain apps
  • Premium fintech platforms
  • Crypto dashboards
  • Sophisticated dark mode experiences
  • Asset management platforms
// Noir Theme (Dark + Glowing Orbs) <GradientMesh theme="noir" animated=true intensity="high" animationSpeed="slow" />

Elegant Light Orbs

Refined • Subtle • Professional

Gradient Mesh - Noir Light
New!

Light background with saturated blue, teal, and purple orbs. More vibrant than typical corporate backgrounds while remaining professional. Enhanced blur and larger gradients create rich color flow.

Theme
noir-light
Background
Light gray (#f8fafb)
Intensity
medium
Opacity
10-15% (subtle)
Best For:
  • Professional service sites
  • Corporate landing pages
  • Elegant product showcases
  • Premium B2B platforms
  • Sophisticated consulting firms
// Noir Light (Elegant Subtle) <GradientMesh theme="noir-light" animated=true intensity="medium" animationSpeed="slow" />

Whisper Soft Orbs

Minimal • Airy • Ultra-Light

Gradient Mesh - Noir Soft
New!

White background with colorful sky blue, aqua mint, and lavender orbs. More vibrant than typical minimal designs while staying refined. Soft glow effect creates modern, premium aesthetic.

Theme
noir-soft
Background
Pure white (#ffffff)
Intensity
low
Opacity
6-12% (whisper)
Best For:
  • Minimalist design portfolios
  • Clean product pages
  • Wellness and meditation apps
  • Luxury retail (online boutiques)
  • Ultra-refined brand aesthetics
// Noir Soft (Ultra-Minimal) <GradientMesh theme="noir-soft" animated=true intensity="low" animationSpeed="slow" />

Northern Lights

Electric • Magical • Vibrant

Gradient Mesh - Aurora
🌌 New!

Northern Lights inspired palette with electric aurora green, vivid purple, bright cyan-blue, and pink accents. Deep space background with intense glowing orbs. Maximum vibrancy.

Theme
aurora
Background
Deep space (#0a0d14)
Colors
Green, purple, cyan, pink
Intensity
high (35-50% opacity)
Vibrancy
Maximum ✨
Best For:
  • Creative portfolios
  • Gaming and entertainment platforms
  • Music and arts websites
  • Bold, energetic brands
  • Immersive experiences
  • Night-themed applications
// Aurora Theme (Northern Lights) <GradientMesh theme="aurora" animated=true intensity="high" animationSpeed="slow" />

Organic Cellular

Natural • Biological • Growth

Voronoi Diagram (Organic)
Phase 3

Voronoi diagrams create natural cellular patterns. Dual graph to Delaunay triangulation, perfect for biotech, health, and organic brands. Feels living and natural.

Density
low
Theme
branded
Animated
false
Complexity
30-40/100
Best For:
  • Biotech and health tech
  • Organic and natural brands
  • Growth-focused messaging
  • Scientific applications
// Voronoi Implementation <VoronoiBg density="low" theme="branded" strokeWidth=1 />

Journey & Elevation

Progress • Exploration • Achievement

Topographic Lines (Journey)
Phase 4

Elevation map contour lines create a unique journey narrative. Perfect for progress tracking, transformation stories, and brands focused on paths and milestones.

Density
medium
Theme
branded
Animated
true
Complexity
28-35/100
Best For:
  • Travel and adventure brands
  • Fitness and progress tracking
  • Educational journeys
  • Consulting and transformation
// Topographic Implementation <TopographicLines density="medium" theme="branded" animated=true />

Mountain Peaks

Dramatic • Earthy • Grounded

Topographic - Mountain Theme
Variant

Circular elevation contours around peaks create an authentic topographic map aesthetic. Earthy brown tones perfect for outdoor, adventure, and earth-connected brands.

Density
low
Theme
mountain
Style
circular
Stroke
2px (bold)
Complexity
22-28/100
Best For:
  • Outdoor and adventure brands
  • Hiking and climbing services
  • Environmental organizations
  • Rugged, authentic messaging
// Mountain Theme (Circular Contours) <TopographicLines theme="mountain" density="low" style="circular" strokeWidth=2 />

Ocean Depths

Calm • Flowing • Expansive

Topographic - Ocean Theme
Variant

Deep blue tones evoke ocean bathymetry maps. Perfect for marine, water sports, and brands focused on depth and exploration.

Density
medium
Theme
ocean
Feel
Flowing
Complexity
28-35/100
Best For:
  • Marine and water sports
  • Diving and ocean exploration
  • Coastal travel services
  • Calm, flowing brand aesthetics
// Ocean Theme (Smooth, Thin) <TopographicLines theme="ocean" density="medium" strokeWidth=1 />

Desert Dunes

Warm • Open • Expansive

Topographic - Desert Theme
Variant

Warm sandy tones with sparse contours create a desert dune aesthetic. Perfect for brands emphasizing space, warmth, and minimal complexity.

Density
low
Theme
desert
Feel
Spacious
Complexity
22-28/100
Best For:
  • Wellness and meditation
  • Minimalist travel services
  • Warm, inviting brand aesthetics
  • Space and openness messaging
// Desert Theme (Low Density) <TopographicLines theme="desert" density="low" strokeWidth=2 />

Relief Map

3D Paper-Cut • Sculptural • Premium

Topographic - Relief Mode
New!

3D paper-cut style with gradient-filled valleys and drop shadows. Combines circular peaks with flowing ridges for a sophisticated, tactile aesthetic inspired by /images/hero-validation.webp.

Density
medium
Theme
mountain
Style
relief
Stroke
1.5px
Effect
3D shadows + gradients
Best For:
  • Premium landing pages
  • Design-forward tech brands
  • Validation/proof pages (like V3)
  • Sophisticated, modern aesthetics
// Relief Mode (3D Effect) <TopographicLines style="relief" theme="mountain" density="medium" strokeWidth=1.5 />

Teal Relief Valleys

Premium • Sculptural • Validation

ReliefMap Component
New!

Dedicated 3D relief component with teal gradient valleys and white ridges, precisely matching the hero-validation.webp aesthetic. Mixed circular + flowing patterns with drop shadows.

Density
medium
Theme
teal
Depth
medium (6px shadows)
Mixed
circular + flowing
Effect
Gradient fills + SVG filters
Best For:
  • Hero sections (like V3 validation)
  • Premium tech brands
  • Modern design portfolios
  • Nature-inspired but refined
// ReliefMap (Teal Valleys) <ReliefMap theme="teal" density="medium" depth="medium" mixedStyle=true />

Detailed Cartography

Precise • Technical • Detailed

Topographic - High Density
Variant

Dense contour lines (18 peaks) create a detailed technical map aesthetic. Perfect for precision-focused brands and complex journey narratives.

Density
high
Theme
branded
Animated
false
Complexity
38-45/100
Best For:
  • Technical documentation
  • Precision mapping services
  • Complex journey narratives
  • Professional cartography
// High Density (Fine Detail) <TopographicLines density="high" animated= strokeWidth=0.8 />

AI & Data Networks

Intelligent • Futuristic • Connected

Particle Field (AI Aesthetic)
Phase 4

Neural network-inspired particle system with depth and connections. The quintessential AI/ML aesthetic - perfect for cutting-edge tech and "infinite possibility" narratives.

Density
medium
Theme
ai-blue
Connections
true
Complexity
38-48/100
Best For:
  • AI and ML platforms
  • Data visualization tools
  • Tech startups (AI-focused)
  • Innovation-driven messaging
// Particle Field Implementation <ParticleField density="medium" theme="ai-blue" connections=true />

Creative AI

Artistic • Imaginative • Bold

Particle Field - Purple Theme
Variant

Purple/magenta neural network aesthetic for creative AI tools. Perfect for design platforms, creative automation, and artistic AI applications.

Theme
ai-purple
Vibe
Creative
Connections
true
Complexity
38-48/100
Best For:
  • Creative AI tools
  • Design automation platforms
  • Artistic AI applications
  • Bold, imaginative messaging
// Purple Creative Theme <ParticleField theme="ai-purple" density="medium" />

Matrix Code

Technical • Cyberpunk • Digital

Particle Field - Matrix Theme
Variant

Green matrix code aesthetic with high particle density. Perfect for developer tools, cybersecurity, and technical/hacker narratives.

Theme
matrix
Density
high
Vibe
Hacker
Complexity
45-55/100
Best For:
  • Developer platforms
  • Cybersecurity services
  • Technical/hacker aesthetics
  • Code-focused products
// Matrix High Density <ParticleField theme="matrix" density="high" />

Cosmic Space

Ethereal • Mysterious • Infinite

Particle Field - Cosmic Theme
Variant

Pink/purple/blue cosmic gradient with sparse particles (no connections). Perfect for space-themed, exploration, or ethereal brand narratives.

Theme
cosmic
Density
low
Connections
false
Complexity
25-35/100
Best For:
  • Space and astronomy
  • Exploration narratives
  • Ethereal, mysterious brands
  • Sci-fi aesthetics
// Cosmic Starfield <ParticleField theme="cosmic" density="low" connections= />

🎨 Enhancement Properties

All patterns support these powerful enhancement properties for fine-tuned control over aesthetics and performance.

Blend Modes

Control how patterns blend with background gradients. Each mode creates a unique visual effect.

normal
blendMode="normal"
multiply
blendMode="multiply"
screen
blendMode="screen"
overlay
blendMode="overlay"
soft-light
blendMode="soft-light"
hard-light
blendMode="hard-light"
lighten
blendMode="lighten"
darken
blendMode="darken"

Best Practices:

  • lighten: Default for tessellation - subtle, professional
  • overlay: Bold, high-contrast - tech/AI aesthetics
  • soft-light: Gentle enhancement - premium feel
  • multiply: Darkening effect - dramatic backgrounds
  • screen: Brightening effect - light, airy feel

Animation Speed

Control animation timing: slow for calming effects, fast for energy and dynamism.

slow (18s)
Slow (18s)

Calming, subtle movement. Best for premium, luxury brands.

animationSpeed="slow"
normal (12s)
Normal (12s)

Balanced movement. Default for most use cases.

animationSpeed="normal"
fast (8s)
Fast (8s)

Energetic, dynamic. Best for tech startups, action-oriented brands.

animationSpeed="fast"

Dark Mode Support

All patterns adapt to dark mode automatically or can be forced to light/dark variants.

Light Mode
Light Mode (Forced)

Always displays light variant, regardless of user preference.

darkMode="light"
Dark Mode
Dark Mode (Forced)

Always displays dark variant, regardless of user preference.

darkMode="dark"
Auto Mode
Auto (Default)

Respects user's system preference (prefers-color-scheme).

darkMode="auto"

Mouse Attraction (ParticleField)

Particles respond to mouse movement, creating an interactive, engaging experience.

Without Mouse Attraction
Standard (Static)

Particles move independently, ignoring cursor position.

mouseAttraction=
⭐ With Mouse Attraction - Move your cursor!
Interactive

Particles subtly move toward cursor. Creates engaging, responsive feel.

mouseAttraction=true

When to Use:

  • Hero sections: Draw attention, encourage exploration
  • Interactive demos: Reinforce "intelligent" or "responsive" messaging
  • AI/ML products: Visual metaphor for AI responding to inputs
  • Avoid: Mobile devices (touch doesn't provide cursor position)

Complete Props Reference

Property Type Default Description
blendMode 'normal' | 'multiply' | 'screen' | 'overlay' | 'soft-light' | 'hard-light' | 'lighten' | 'darken' 'lighten' CSS blend mode for pattern layer
animationSpeed 'slow' | 'normal' | 'fast' 'normal' Animation duration (18s/12s/8s)
darkMode 'auto' | 'light' | 'dark' 'auto' Color scheme adaptation
mouseAttraction boolean false Particles move toward cursor (ParticleField only)
density 'low' | 'medium' | 'high' 'low' Element density (varies by pattern)
animated boolean false Enable animation
theme string Pattern-specific Color theme (varies by pattern)

Complete Examples

Tessellation with All Props

// Maximum control example <TessellationBg density="low" animated=true blur="subtle" blendMode="lighten" animationSpeed="slow" darkMode="auto" />

Particle Field with Mouse Attraction

// Interactive AI aesthetic <ParticleField density="medium" theme="ai-blue" animated=true connections=true depth=true mouseAttraction=true blendMode="overlay" animationSpeed="fast" />

Topographic Lines with Custom Speed

// Slow, premium feel <TopographicLines density="medium" theme="mountain" animated=true strokeWidth=2 animationSpeed="slow" blendMode="soft-light" />

Quick Comparison Guide

🎯 By Brand Type

  • Tech Startup: V4 (subtle)
  • AI/ML Platform: Particle Field
  • Luxury Service: V5 (heavy)
  • Consumer Tech: Gradient Mesh
  • Biotech/Health: Voronoi
  • Travel/Fitness: Topographic Lines
  • Developer Tool: High density

💰 By Price Point

  • £0-500: V4 (energetic)
  • £500-1000: Medium blur
  • £1000+: V5 (premium)

🎨 By Aesthetic

  • Geometric: V4 (tessellation)
  • Organic Wash: V5 (blurred)
  • Minimal: Gradient Mesh
  • Cellular: Voronoi
  • Journey: Topographic Lines
  • Futuristic: Particle Field
  • Technical: High density

⚡ Performance

  • All variants: GPU-accelerated
  • Load time: < 1ms
  • File size: ~500 bytes CSS
  • Accessibility: Full support