Help - SVG createMotionPath() Offset

[TheHyrox]

Hi there! 👋

I'm currently working on a project inspired by the homepage of Anime.js, using SVG paths as a toolset. The animated "3D" track with the car following it really inspired me to create something similar but for many tracks across various motorsport categories.

I've spent several days working on it and ended up with a pretty solid base (still in WIP). However, I'm currently stuck on one issue...

For the tracks, I'm using SVG paths that I didn't create myself (mostly from Wikipedia and SVG stuff), so the starting point of the path often isn't aligned with the actual starting line of the track which is pretty annoying.

There's a style property called stroke-dashoffset that can visually offset an SVG path. But, Anime.js’s createMotionPath() function doesn't seem to be affected by this offset.

I've created a CodePen to illustrate the problem. (the codepen is simplify and for illustration purpose, so I don't added the 3d effect) (also don't mind the wrong path direction that's another issue I still need to fix)

I tried many solutions, search on reddit, stackoverflow, even ask several llm and I still don't have a solution... please can someone help me ?

[VR-Rathod]

stroke-dashoffset only changes the visual stroke, not the geometry used by Anime.js.

Anime.js uses getPointAtLength() which ignores stroke styles.

To shift the starting point:

✏️ Manually edit the path in tools like Inkscape or Illustrator, or

🧠 Programmatically rebuild the path from a new start point using JavaScript.

• For 3D effects, combining Anime.js + Three.js gives you better control and flexibility.