Dot Pattern
High-performance SVG-based dot pattern background component with advanced animations and interactive effects
Pro features
What the Pro version adds to this component.
Multiple Pattern Types
Square, hexagonal, diagonal, and circular geometric patterns
Advanced Animations
Pulse, wave, fade, scale, and rotate animation effects
Interactive Hover Effects
Dynamic dot scaling with mouse movement tracking
Gradient Support
Radial, linear, and conic gradient coloring
Mask & Fade Effects
Smooth edge fading and masking capabilities
Full Customization
Density, blur, parallax, and responsive controls
SVG Optimization
High-performance SVG-based rendering engine
Parallax Scrolling
Depth-based scrolling effects for immersive experiences
Installation
Install via CLI
npx @moontra/moonui-cli add dot-patternUsage
Build Faster with Dot Patterns
High-performance SVG patterns with advanced animations, gradients, and interactive effects for modern web applications
Examples
Quantum Computing Platform - Hyperdimensional Grid
Next-generation quantum computing infrastructure featuring a mesmerizing hyperdimensional dot grid that visualizes quantum entanglement, superposition states, and computational processes in real-time with advanced gradient effects.
Neural AI Platform - Synaptic Network
Revolutionary AI infrastructure with pulsating hexagonal patterns mimicking neural synapses. The animated grid represents deep learning processes, with gradient flows showing data propagation through transformer networks.
Cybersecurity Command Center - Threat Matrix
Advanced threat detection platform with wave-animated patterns representing real-time security monitoring. The dynamic grid visualizes network traffic analysis, intrusion detection, and zero-day threat prevention systems.
Cloud Infrastructure Platform - Hyperscale Network
Enterprise cloud computing platform with interactive hover effects showing distributed data centers. The responsive pattern adapts to mouse movement, visualizing edge computing nodes and global CDN presence.
Blockchain Financial Platform - Distributed Ledger
Decentralized finance infrastructure with rotating gradient patterns representing blockchain consensus mechanisms. The animated network showcases smart contract execution and cross-chain interoperability.
High-Performance Computing Lab - Data Stream Matrix
Scientific computing infrastructure with performance-optimized patterns. The fade animation represents parallel processing pipelines, while the low-density grid ensures maximum rendering performance for data-intensive visualizations.