PathGroup

InstallationCopy Anchor Link

npm install @remold-ui/react

PathGroup is React only for now. Without React, morph each part with createMorph from @remold-ui/core, as in the Icon page's JavaScript tab.

UsageCopy Anchor Link

<Remold.PathGroup
  viewBox="0 0 200 200"
  paths={[
    { id: "face", path: face, className: "face" },
    { id: "extra", path: mood.extra, className: "extra" }, // a tear, or blushing cheeks
    { id: "brows", path: mood.brows, fill: "none", stroke: "currentColor", strokeWidth: 7 },
    { id: "eyes", path: mood.eyes, className: "eyes" },
    { id: "mouth", path: mood.mouth, className: "mouth" },
  ]}
/>

Each part is matched by its id and morphs from wherever it is when its path changes, even into a shape with a different number of pieces: angry brows lift into arches, a frown turns into a smile and opens into a laugh, and two round eyes become two hearts. Parts are drawn in the order you list them, so the eyes and mouth stay in front of the face.

Style the parts with className or SVG attributes. Colours aren't morphed by Remold; a CSS transition on fill and stroke keeps them in step, as in the example.

API referenceCopy Anchor Link

Data attributesCopy Anchor Link