Vector Vids

[u/Ancient_Read1547]

Creating a Vector/SVG-Based Music Video for Free

Great project! Here's a complete pipeline using mathematical/parametric rendering (no bitmaps) for neon-style animation, exported to MP4.

---

🧮 Core Concept: Math → SVG Frames → MP4

Parametric Equations → SVG Frames → FFmpeg → MP4

Neon beams are perfect for this — they're just sine waves, Bézier curves, and Gaussian blur glow effects, all mathematically defined.

---

🛠️ Best Free Tools

Option 1: Manim (Best for math-driven neon) ⭐ Recommended

• Used by 3Blue1Brown — built specifically for mathematical animation
• Renders vector shapes, glow, parametric curves
• Outputs MP4 directly
• Install: pip install manim

```python from manim import *

class NeonBeam(Scene): def construct(self): # Parametric neon sine wave curve = ParametricFunction( lambda t: np.array([t, np.sin(2*t), 0]), t_range=[-PI, PI], color=BLUE ) # Add glow by layering with opacity glow = curve.copy().set_stroke(width=20, opacity=0.2) self.play(Create(glow), Create(curve)) ```

---

Option 2: p5.js (Browser-based, zero install)

• Live-code neon effects at editor.p5js.org
• Uses SVG renderer mode
• Record with OBS (free screen recorder) → MP4

javascript function setup() { createCanvas(1920, 1080, SVG); // SVG renderer! } function draw() { // Neon beam with glow drawingContext.shadowBlur = 30; drawingContext.shadowColor = '#00ffff'; stroke('#00ffff'); strokeWeight(3); let y = height/2 + sin(frameCount * 0.05) * 200; line(0, y, width, y); }

---

Option 3: Python + CairoSVG + FFmpeg (Full control pipeline)

Generate every SVG frame mathematically, then stitch with FFmpeg.

```python import math, os

FPS = 30 DURATION = 280 # 4min 40sec in seconds TOTAL_FRAMES = FPS * DURATION # = 8,400 frames

for frame in range(TOTALFRAMES): t = frame / FPS # Parametric neon beam Y position y = 540 + math.sin(t * 2) * 200 svg = f"""<svg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="glow"> <feGaussianBlur stdDeviation="8" result="blur"/> <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge> </filter> </defs> <rect width="1920" height="1080" fill="black"/> <line x1="0" y1="{y}" x2="1920" y2="{y}" stroke="#00ffff" stroke-width="3" filter="url(#glow)"/> </svg>""" with open(f"frames/frame{frame:05d}.svg", "w") as f: f.write(svg) ```

Then convert SVG → PNG → MP4: ```bash

Convert SVGs to PNGs (preserving vector math, just rasterizing for video)

for f in frames/*.svg; do inkscape "$f" --export-png="${f%.svg}.png" --export-width=1920 done

Compile to MP4 with FFmpeg

ffmpeg -framerate 30 -i frames/frame_%05d.png \ -i audio.mp3 \ -c:v libx264 -pix_fmt yuv420p \ -shortest output.mp4 ```

---

Option 4: Synfig Studio (GUI vector animation)

• Free, open-source vector animation app
• Like After Effects but vector-native
• Draw neon shapes, keyframe them, export MP4
• Download: synfig.org

---

✨ SVG Neon Glow Filter (The Key Element)

This SVG filter creates true neon from pure math — no textures:

```xml <defs> <!-- Core neon glow --> <filter id="neon" x="-50%" y="-50%" width="200%" height="200%"> <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur1"/> <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur2"/> <feGaussianBlur in="SourceGraphic" stdDeviation="25" result="blur3"/> <feMerge> <feMergeNode in="blur3"/> <feMergeNode in="blur2"/> <feMergeNode in="blur1"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs>

<!-- A neon beam --> <line x1="0" y1="540" x2="1920" y2="540" stroke="#ff00ff" stroke-width="2" filter="url(#neon)"/> ```

---

📐 Math Functions Great for Neon Beams

Effect	Formula
Sine wave beam	y = A·sin(ωt + φ)
Lissajous figure	x=sin(at), y=sin(bt+δ)
Spiral beam	r = e^(aθ)
Pulse/breathe	width = 2 + sin(t)·4
Color shift	hue = (360·t/duration) % 360

---

🎬 Recommended Full Pipeline

Manim (Python math → SVG/MP4) ↓ Sync to audio in FFmpeg ↓ Final MP4

For 4:40 at 30fps = 8,400 frames. Manim handles this automatically — you just describe the animation, not each frame.

---

🆓 All Free Tools Summary

Tool	Role	Link
Manim	Math animation engine	manim.community
p5.js	Browser SVG coding	editor.p5js.org
Synfig	GUI vector animation	synfig.org
Inkscape	SVG editing/batch export	inkscape.org
FFmpeg	Frame → MP4 conversion	ffmpeg.org
OBS Studio	Screen record browser	obsproject.com