Animated SVG Beam
A component that animates SVG paths with a moving beam effect, offering color, gradient, timing, and loop customizations.
Make it with Workshop
Build your own component with AI
This component is part of Framercrafts, a library of supercharged Framer components and overrides.
Description
AnimatedBeam creates animations along SVG paths. It displays a moving beam that traces the path of any uploaded SVG file. The component provides a placeholder when no SVG is selected and works with any Framer project.
Use Cases
1. UI Elements - Animated buttons and navigation indicators
2. Data Visualization - Animated routes on maps and charts
3. Loading Indicators - Custom path-following loading animations
4. Decorative Elements - Logo animations and background effects
5. Educational Content - Step-by-step process visualizations
Customizations
• SVG File - Upload any SVG file
• Color/Gradient - Solid color or customizable gradient
• Beam Properties - Width and segment length
• Animation Timing - Duration, loop settings, and delay
• Stroke Width - Thickness of the animated path
