First of all: The styling of the path must be the same for each viewport. In other words, whether on desktop, tablet or mobile – the path must have the same thickness, colour, etc. Otherwise, the settings of the mobile variant apply to all variants.

We have tested various styling options and noticed that something may work when exporting from one graphics programme and not from another. So it’s best to try out whether your idea works as a learning path.

Basically, we noticed the following if you work in Adobe Illustrator:

• Angular paths or completely straight lines are problematic and should therefore be avoided. However, this works in Figma, so you should test it in your graphics programme. In Adobe Illustrator, you can make do with minimal curves that are hardly noticeable visually.
• If you use a dashed path, then do without the corner compensation.
• The end of the path must be rounded, angular does not work properly.

Paths can basically be any colour, dashed, dotted or have a shadow. A colour gradient also usually works, although we sometimes had problems with this in Adobe Illustrator. Files exported from Figma are somewhat more stable in combination with Dash Learning Paths; we had no problems with colour gradients here.