Path animation issues in Safari

Certain path animations might look different or even broken in Safari as it doesn’t translate negative values for animating paths as Chrome or Firefox does.

You can fix this by avoiding the use of negative values for path animations.

Negative values for the dash-offset property are often used to create a self-erasing effect. As you can see in the example below where 100.58 is the path's length, the curved line will draw itself from the first keyframe to the second one, and it will erase itself from the second keyframe to the third one. For this, we've used a negative value.

svg animation

You can avoid the use of negative values for the dash-offset property if you replace them with multiples of the path's length. The example below is the same animation, but only with positive values:

svg animation

Practically, we took the path's length and used multiples of it for the dash-offset property in this order:

x3 - x2 - x1

To make things easier, we've added a multiplier:

svg animation

If you've got stuck and couldn't fix the error, you can also send us the original static SVG file. Please don't forget to mention the email address that you've used to sign up on SVGator and the project's name.

More articles:

How to create a path animation

Stroke-path animation explained

Still got questions? Send us an email to and we will get back to you as soon as we can.