feat(2d): add Path component

[levirs565]

This will add Path component to render and animate SVG path.

This is part of add Latex component pull request.

Path component will inherit Curve component. This component can morph between two SVG path.

Why Morphing Path is Necessary for Latex Tweening

When we render Latex, some character can render into different SVG path depending on its situtation.

For example: ( and ) character.

You can see these two math.

$$
\left( 1 \right)
$$

$$ \left( 1 \right) $$

$$
\left( {1 \over 2} \right)
$$

$$ \left( {1 \over 2} \right) $$

We can see that ( and ) in these two math look have two size. Path of ( character in two math are actually different. When tweening latex between these math, we must morph path of ( character.

[nick-bors]

Lets gooo!! one step closer to latex animation

[aarthificial]

There are some problems with the tweening algorithm:

Subpaths disappear when tweening:

project.mp4

Code

import {makeScene2D} from '@motion-canvas/2d/lib/scenes';
import {Path} from '@motion-canvas/2d/lib/components';
import {createRef} from '@motion-canvas/core/lib/utils';
import {waitFor} from '@motion-canvas/core/lib';

export default makeScene2D(function* (view) {
  const path = createRef<Path>();
  view.add(
    <Path
      ref={path}
      lineWidth={8}
      stroke={'white'}
      data="M -200,0 h 100 M 100,0 h 100"
    />,
  );

  yield* waitFor(0.5);
  yield* path().data('M -200,100 h 100 M 100,0 h 100', 1);
  yield* waitFor(0.5);
});

The path gets closed during the transition

close.mp4

Code

import {makeScene2D} from '@motion-canvas/2d/lib/scenes';
import {Path} from '@motion-canvas/2d/lib/components';
import {createRef} from '@motion-canvas/core/lib/utils';
import {waitFor} from '@motion-canvas/core/lib';

export default makeScene2D(function* (view) {
  const path = createRef<Path>();
  view.add(
    <Path
      ref={path}
      lineWidth={8}
      stroke={'white'}
      data="M -200,-200 h 400 v 400"
    />,
  );

  yield* waitFor(0.5);
  yield* path().data('M -200,-200 v 400 h 400', 1);
  yield* waitFor(0.5);
});

Tweening to an empty path throws an error.

Code

import {makeScene2D} from '@motion-canvas/2d/lib/scenes';
import {Path} from '@motion-canvas/2d/lib/components';
import {createRef} from '@motion-canvas/core/lib/utils';
import {waitFor} from '@motion-canvas/core/lib';

export default makeScene2D(function* (view) {
  const path = createRef<Path>();
  view.add(
    <Path
      ref={path}
      lineWidth={8}
      stroke={'white'}
      data="M -200,-200 h 400 v 400"
    />,
  );

  yield* waitFor(0.5);
  yield* path().data('M 0,0', 1);
  yield* waitFor(0.5);
});

[levirs565]

I have fixed all issue.

Kute.js svgMorph actually cannot tween unclosed path well. Its also caanot tween between closed and unclosed path. It only can tween unclosed single line into closed shape. I create my own implementation to do that. I implement 2 method in 2 commit.

• First method is to immitate how kute.js morph single line into circle. When createCurveProfileLerp encounter twening between closed and unclosed path, it will force close unclosed path. However, this will make filled area gone. To prevent this, we must add extra polygon. This method is on feat(2d): morph between closed and unclosed path
• Second method is simpler than first. It will not force close unclosed path which means filled area not gone. When interpolatin from unclosed to closed path, first all point is interpolated like unclosed path. When first point and last point is equal then path closed automatically. This will make different interpolation than first method but with simpler and performant code. This method is on feat(2d): simple closed and unclosed path morphing.

In my opionion, we must use second method. Although the interpolation is different from KUTE.js, the code is much simpler and performant.

[aarthificial]

The PR is generally good for merging but the documentation requires some updates.
Since #712, fiddles (```tsx editor) are required to correctly import all modules they use.

[levirs565]

I have fixed documentation error.

[aarthificial]

Awesome! Thanks for the PR and apologies for the delays.

[ksassnowski]

Thanks a ton @levirs565! Whenever you're ready, please go ahead and open the next PR. We really appreciate your work on this!