Pulsing Wi-Fi Icon

Pulsing Wi-Fi Icon is an animated SVG component that visualizes wireless signal propagation. Four arcs pulse from inner to outer in a smooth wave motion. Built with Framer Motion, it’s lightweight, scalable, and fully customizable via Framer properties.

About This Component

Visual Design

• Four curved arcs arranged in a quarter-circle layout
• Classic Wi-Fi signal appearance with a minimal, modern style
• Default purple gradient color scheme (light to dark)
• Crisp rendering at any size using SVG paths

Animation

• Staggered opacity animations across all four arcs
• Pulsing motion flows from inner to outer arc
• Continuous infinite loop for seamless signal visualization
• Smooth transitions powered by Framer Motion

Customization

• Individual color controls for each arc:
  • Outer Arc
  • Arc 2
  • Arc 3
  • Inner Arc
• Adjustable animation speed from 0.5s to 5s
• Fully resizable while maintaining a fixed 4:4 aspect ratio
• Simple control via Framer Property Controls

Technical

• Built with Framer Motion for high-performance animation
• SVG-based implementation for resolution-independent scaling
• Clean, reusable component structure
• Ideal for SaaS dashboards, connectivity indicators, and network-related UI