---
title: "MorphPolygonShape"
description: "Creates a [Shape] that morphs between [start] and [end] as [progress] moves from `0f` to `1f`."
type: "function"
lastmod: "2026-09-24"
---
## API Reference

### MorphPolygonShape

> Source set: Common

```kotlin
public fun MorphPolygonShape(start: PolygonShape, end: PolygonShape, progress: () -> Float): Shape
```

Creates a `Shape` that morphs between `start` and `end` as [progress](/jetpack-compose/androidx.compose.foundation/foundation/functions/progress/api) moves from `0f` to `1f`.

Reads [progress](/jetpack-compose/androidx.compose.foundation/foundation/functions/progress/api) each time the outline is resolved. Values at or below `0f` resolve to `start`;
values at or above `1f` resolve to `end`. Create a separate instance for each morphing element.
Two shapes created with equal endpoints and the same [progress](/jetpack-compose/androidx.compose.foundation/foundation/functions/progress/api) instance compare equal.

#### Parameters

| | |
| --- | --- |
| start | starting shape of the morph |
| end | ending shape of the morph |
| progress | returns the current morph progress |

## Code Examples

### MorphPolygonShapeSample

```kotlin
@Sampled
@Composable
fun MorphPolygonShapeSample() {
    // A badge that morphs between a rounded hexagon and a star as it is toggled. No remember
    // keys are needed: the endpoints are constant and the current progress is read through the
    // lambda each time the outline is resolved.
    var selected by remember { mutableStateOf(false) }
    val progress by animateFloatAsState(if (selected) 1f else 0f)
    val shape = remember {
        MorphPolygonShape(
            start =
                PolygonShape { polygon(numVertices = 6, rounding = CornerRounding(percent = 20)) },
            end =
                PolygonShape.star(
                    numPoints = 6,
                    innerRadiusRatio = 0.6f,
                    outerRounding = CornerRounding(percent = 20),
                ),
            progress = { progress },
        )
    }
    Box(
        Modifier.size(96.dp).clip(shape).background(Color(0xFF4CAF50)).clickable {
            selected = !selected
        }
    )
}
```