Animated SVG Beam

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