GitHubopen_in_new

Material Shape Paths

This package exposes animatable Material shape paths as plain string constants.

The current path data is adapted from KTibow's m3-svelte:

The copied data includes all exported full-size and small animatable shape paths from those source files. Each path is kept as an individual named export, rather than a single exported object or array, so unused shapes can be removed by tree shaking.

ts
import { pathAnimatableSoftBurst, pathAnimatableSmallSunny } from '@rikkaw/m3-vue';

Preview

Animatable

pathAnimatableCircle
pathAnimatableSquare
pathAnimatableSlanted
pathAnimatableArch
pathAnimatableFan
pathAnimatableArrow
pathAnimatableSemicircle
pathAnimatableOval
pathAnimatablePill
pathAnimatableTriangle
pathAnimatableDiamond
pathAnimatableClamshell
pathAnimatablePentagon
pathAnimatableGem
pathAnimatableVerySunny
pathAnimatableSunny
pathAnimatableFourSidedCookie
pathAnimatableSixSidedCookie
pathAnimatableSevenSidedCookie
pathAnimatableNineSidedCookie
pathAnimatableTwelveSidedCookie
pathAnimatableGhostish
pathAnimatableFourLeafClover
pathAnimatableEightLeafClover
pathAnimatableBurst
pathAnimatableSoftBurst
pathAnimatableBoom
pathAnimatableSoftBoom
pathAnimatableFlower
pathAnimatablePuffy
pathAnimatablePuffyDiamond
pathAnimatablePixelCircle
pathAnimatablePixelTriangle
pathAnimatableBun
pathAnimatableHeart

Animatable Small

pathAnimatableSmallCircle
pathAnimatableSmallSquare
pathAnimatableSmallSlanted
pathAnimatableSmallArch
pathAnimatableSmallFan
pathAnimatableSmallArrow
pathAnimatableSmallSemicircle
pathAnimatableSmallOval
pathAnimatableSmallPill
pathAnimatableSmallTriangle
pathAnimatableSmallDiamond
pathAnimatableSmallClamshell
pathAnimatableSmallPentagon
pathAnimatableSmallGem
pathAnimatableSmallVerySunny
pathAnimatableSmallSunny
pathAnimatableSmallFourSidedCookie
pathAnimatableSmallSixSidedCookie
pathAnimatableSmallSevenSidedCookie
pathAnimatableSmallNineSidedCookie
pathAnimatableSmallTwelveSidedCookie
pathAnimatableSmallGhostish
pathAnimatableSmallFourLeafClover
pathAnimatableSmallEightLeafClover
pathAnimatableSmallFlower
pathAnimatableSmallPuffy
pathAnimatableSmallPuffyDiamond
pathAnimatableSmallBun
pathAnimatableSmallHeart

LoadingIndicator imports only the seven full-size constants it needs and builds its morph sequence locally.