Path

Press play to preview the animation

import ...

export default makeScene2D(function* (view) {
  const path = createRef<Path>();

  view.add(
    <Path
      ref={path}
      lineWidth={4}
      stroke={'#e13238'}
      data="M 151.34904,307.20455 L 264.34904,307.20455 C 264.34904,291.14096 263.2021,287.95455 236.59904,287.95455 C 240.84904,275.20455 258.12424,244.35808 267.72404,244.35808 C 276.21707,244.35808 286.34904,244.82592 286.34904,264.20455 C 286.34904,286.20455 323.37171,321.67547 332.34904,307.20455 C 345.72769,285.63897 309.34904,292.21514 309.34904,240.20455 C 309.34904,169.05135 350.87417,179.18071 350.87417,139.20455 C 350.87417,119.20455 345.34904,116.50374 345.34904,102.20455 C 345.34904,83.30695 361.99717,84.403577 358.75805,68.734879 C 356.52061,57.911656 354.76962,49.23199 353.46516,36.143889 C 352.53959,26.857305 352.24452,16.959398 342.59855,17.357382 C 331.26505,17.824992 326.96549,37.77419 309.34904,39.204549 C 291.76851,40.631991 276.77834,24.238028 269.97404,26.579549 C 263.22709,28.901334 265.34904,47.204549 269.34904,60.204549 C 275.63588,80.636771 289.34904,107.20455 264.34904,111.20455 C 239.34904,115.20455 196.34904,119.20455 165.34904,160.20455 C 134.34904,201.20455 135.49342,249.3212 123.34904,264.20455 C 82.590696,314.15529 40.823919,293.64625 40.823919,335.20455 C 40.823919,353.81019 72.349045,367.20455 77.349045,361.20455 C 82.349045,355.20455 34.863764,337.32587 87.995492,316.20455 C 133.38711,298.16014 137.43914,294.47663 151.34904,307.20455 z"
      position={[-100, -100]}
      scale={0.5}
      start={0}
      end={0}
    ></Path>,
  );

  yield* path().end(1, 1);
  yield* path().fill('#e13238', 1);
});

This component allows us to draw and animate SVG path.

Defining Path

You can define path to display by setting data property of Path component.

Animating Path

Morphing Between Two Path

To morph between two path you can tween data property.

Press play to preview the animation

import ...

export default makeScene2D(function* (view) {
  const path = createRef<Path>();

  view.add(
    <Path
      ref={path}
      lineWidth={4}
      stroke={'#e13238'}
      data="M301.113,12.011L576.715,584.766L25.508,584.766L301.113,12.011z"
      position={[-100, -100]}
      scale={0.25}
    ></Path>,
  );

  yield* path().data(
    'M25.508,12.011 L576.715,12.011 L576.715,584.766 L25.508,584.766 L25.508,12.011 z',
    1,
  );
});

Animating objects along a spline

Like Spline and Bezier, you can also make other components follow this component path. You can use the getPointAtPercentage to get point along this path.

Press play to preview the animation

import ...

export default makeScene2D(function* (view) {
  const path = createRef<Path>();
  const progress = createSignal(0);

  view.add(
    <>
      <Path
        ref={path}
        lineWidth={6}
        stroke={'lightgray'}
        data={
          'M -180 -21 C -180 -54.1371 -153.1371 -81 -120 -81 C -86.8629 -81 -60 -54.1371 -60 -21 C -60 12.1371 -33.1371 33 0 33 C 33.1371 33 48 3 48 -21 C 48 -45 30 -69 0 -69 C -30 -69 -48 -45 -48 -21 C -48 3 -33.1371 33 0 33 C 39 34.5 60 12 60 -21 C 60 -54.1371 86.8629 -81 120 -81 C 153.1371 -81 180 -54.1371 180 -21 C 180 12.1371 153.1371 39 120 39 L -120 39 C -153.1371 39 -180 12.1371 -180 -21 Z'
        }
      />
      <Rect
        size={26}
        fill={'lightseagreen'}
        position={() => path().getPointAtPercentage(progress()).position}
        rotation={() => path().getPointAtPercentage(progress()).tangent.degrees}
      />,
    </>,
  );

  yield* progress(1, 2).to(0, 2);
});