Chip Stack for Compose

ChipStack.kt

@Composable
fun ChipStack(modifier: Modifier = Modifier) {
    val size = 80.dp
    val sizeModifier = Modifier.size(size)
    val colors = listOf(Color.Green, Color.Yellow, Color.Cyan, Color.Magenta, Color.LightGray)
    val width = (size / 2) * (colors.size + 1)
    Box(modifier = modifier.size(width, size)
            .graphicsLayer {
                alpha = 0.99f // slight alpha to force compositing layer
            },
    ) {
        var offset = 0.dp
        for (color in colors) {
            Chip(strokeWidth = 10.0f, sizeModifier.offset(offset)) {
                Image(ColorPainter(color), contentDescription = null)
            }
            offset += size / 2
        }
    }
}

@Composable
fun Chip(
    strokeWidth: Float,
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    val stroke = remember(strokeWidth) {
        Stroke(width = strokeWidth)
    }
    Box(modifier = modifier
        .drawWithContent {
            drawContent()
            drawCircle(
                Color.Black,
                size.minDimension / 2,
                size.center,
                style = stroke,
                blendMode = BlendMode.Clear
            )
        }.graphicsLayer {
            clip = true
            shape = CircleShape
        }
    ) {
        content()
    }
}

@Composable
fun ChipStackDemo() {
    Box(modifier = Modifier.fillMaxSize().wrapContentSize()) {
        val backgroundGradient = remember {
            Brush.linearGradient(
                0.0f to Color.Red,
                1.0f to Color.Blue
            )
        }
        ChipStack(Modifier.background(backgroundGradient))
    }
}