Next.js Discord

Discord Forum

How do you replicate the svg line movement animation as in the NextJS homepage?

Answered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
I'm trying to understand how the blue lines animation works in the NextJS homepage and was hoping to see how to replicate. I have already dove in to inspect the elements and understand that stroke-width from path changes value just like x1 x2 y1 y2 in the linearGradient element, but how do you control them?

There's no animate under the svg where you typically expect to find it and I tried going through the JavaScript to find out how they do this animation, but still am not able to find it. I just need a simple replica of this animation.

8 Replies

Transvaal lionOP
Bumping this thread
Transvaal lionOP
Bump
Transvaal lionOP
bump
Semipalmated Plover
Bump
Nebelung
Answer
Nebelung
there is a "Gradient Tracing" section that explains that a little bit. hope this helps. it's from a blog by rauno freiberg.
@Nebelung https://rauno.me/craft/nextjs
Transvaal lionOP
Thank you! I'll check it out!
@Nebelung https://rauno.me/craft/nextjs
Transvaal lionOP
I've replicated it! Thank you! Although, I'm not sure how it would be for a much more complex SVG as something like a swirl or a face. This'll do for now!