---
title: "Animated SVG Beam — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Noman · Backgrounds. This component is part of Framercrafts, a library of supercharged Framer components and overrides."
canonical: "https://framer.elliotli.dev/component/animated-svg-beam"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Animated SVG Beam

# Animated SVG Beam

[View on Framer](https://framer.com/marketplace/components/animated-svg-beam/?via=elliot-li)

![Animated SVG Beam preview image 1](https://framer.elliotli.dev/og/component/animated-svg-beam/06fa9fa2295e9b70/1600x1200.jpg)

## Summary

This component is part of Framercrafts, a library of supercharged Framer components and overrides.

## Description

This component is part of [Framercrafts](https://framercrafts.com/), 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

## Rank history [How rankings work →](/terms#rankings)

-   All · #9123

## Details

- **Author**: Noman
- **Price**: $6.00
- **Published**: 2025-07-30
- **Updated**: 2026-09-21
- **Added**: 2025-07-29
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background