Shape

Corners from none to full, and 35 expressive shapes that morph into each other. Components take their corner radii from the shape tokens; the expressive shapes are polygons ported from androidx graphics-shapes.

Corner scale

Each step is --m3e-sys-shape-corner-<step>. full is a true pill, rendered as calc(infinity * 1px), not half of the component's size. Partial variants (for example extra-large-top) set some corners of a step and leave the others square, as four logical-corner properties.

none 0dp
extra-small 4dp
small 8dp
medium 12dp
large 16dp
large-increased 20dp
extra-large 28dp
extra-large-increased 32dp
extra-extra-large 48dp
full pill

Material shapes

The 35 presets of Compose's MaterialShapes, built with the same RoundedPolygon parameters and normalized to a unit square. They appear in the loading indicator, in avatars and in image masks; materialShape(name) in @kyralabs/m3e-shapes returns one.

Circle
Square
Slanted
Arch
Fan
Arrow
Semi circle
Oval
Pill
Triangle
Diamond
Clam shell
Pentagon
Gem
Sunny
Very sunny
Cookie 4Sided
Cookie 6Sided
Cookie 7Sided
Cookie 9Sided
Cookie 12Sided
Ghostish
Clover 4Leaf
Clover 8Leaf
Burst
Soft burst
Boom
Soft boom
Flower
Puffy
Puffy diamond
Pixel circle
Pixel triangle
Bun
Heart

Shape morph

A Morph pairs the curves of two shapes by proximity and splits curves where their counts differ, then interpolates. Drag the progress or press Morph: the animation runs on the expressive default spatial spring, as every geometry change does, and jumps under reduced motion.

The morph demo runs with JavaScript.

import { Morph, materialShape, morphToPath, toSvgPathData } from '@kyralabs/m3e-shapes';

const morph = new Morph(materialShape('Circle'), materialShape('Cookie9Sided'));
path.setAttribute('d', toSvgPathData(morphToPath(morph, 0.5))); // in a viewBox="0 0 1 1" SVG

Rectangular components (a button's corners on press, a FAB menu toggle) animate border-radius on a spring instead of morphing polygons.

Sources

Corner scale: ShapeTokens.kt L28–81 at the pinned commit, generated (FOUNDATIONS_SPEC §3).
Shapes and morph: MaterialShapes.kt (Material3 1.5.0-beta01) and androidx.graphics.shapes 1.0.1, ported to TypeScript with their Apache-2.0 headers.