Three.js Particle Trails on SVG Paths (RGB Triangles + Additive Glow)

Animated particle trails that follow SVG paths in Three.js, with per-triangle RGB coloring, additive blending, and real-time shader effects.
In this demo, I also tackle common rendering issues like layering particles over an image mesh and keeping colors clean when using additive blending.

Tools used: Three.js, GLSL shaders, JavaScript, SVG path sampling.

3 Likes

This is really cool. Animated particle trails following SVG paths in Three.js with custom GLSL shaders for real time effects. The per triangle RGB coloring and additive blending look super clean, especially with the way the depth and layering over the image mesh were handled.

Great use of Three.js, GLSL, JavaScript, and SVG path sampling.

Yes, the possibilities are endless with this technique.

Nice! If you view it side on the RGB colours mix to form yellow, purple, cyan etc.

1 Like