Interpolate fills the shape

[sajadghawami]

Hey guys,

i am having the problem, that two shapes that i interpolate will have a phase inbetween where the shape is filled:

Before: Inbetween: After:

That's the code:

const paths = {
  circleOutline:
    'M77,5A72,72,0,1,1,5,77,72.08,72.08,0,0,1,77,5m0-5a77,77,0,1,0,77,77A77,77,0,0,0,77,0Z',
  rectangleOutline:
'M102.73,5A46.33,46.33,0,0,1,149,51.27v51.46A46.33,46.33,0,0,1,102.73,149H51.27A46.33,46.33,0,0,1,5,102.73V51.27A46.33,46.33,0,0,1,51.27,5h51.46m0-5H51.27A51.26,51.26,0,0,0,0,51.27v51.46A51.26,51.26,0,0,0,51.27,154h51.46A51.26,51.26,0,0,0,154,102.73V51.27A51.26,51.26,0,0,0,102.73,0Z',
 };

    const interpolator = interpolate(paths.circleOutline, paths.rectangleOutline);
<path d={interpolator(0.7)} />

What am i doing wrong?

[dcolens]

I see the same behaviour, any tips on avoiding the shape filling ?

[anderseide]

Would love to see this fixed also.

It's also a known challenge since the "fill" really isn't fill but the lack of support for "holes" in a path. Ref. the "Deal with holes?" item in the To do list.

M77,5A72,72,0,1,1,5,77,72.08,72.08,0,0,1,77,5m0-5a77,77,0,1,0,77,77A77,77,0,0,0,77,0Z The path from the example above has two shapes, represented by the M and m

As described in the documentation

If your path string includes holes or multiple shapes in a single string, everything but the first outer shape will be ignored.

This is what gives the "filled" experience during animation, as only the first path get's calculated, and in the final stage, the target path get's added and gives us the final expected result.