Compose Gradients

Jetpack Compose Mesh Gradient #191

Remix

Mesh Points

Point Position Preview Hex
1, 1 0f, 0f
1, 2 0.33f, 0f
1, 3 0.67f, 0f
1, 4 1f, 0f
2, 1 0f, 0.39f
2, 2 0.22f, 0.69f
2, 3 0.76f, 0.61f
2, 4 1f, 0.43f
3, 1 0f, 1f
3, 2 0.33f, 1f
3, 3 0.67f, 1f
3, 4 1f, 1f

Jetpack Compose Code

val meshGradient = remember {
    MeshGradientPainter(
        rows = 2,
        columns = 3,
        hasBicubicColor = false,
    ) {
        setVertex(0, 0, Offset(0f, 0f), Color(0xFFFF1055))
        setVertex(0, 1, Offset(0.33f, 0f), Color(0xFFFF7446))
        setVertex(0, 2, Offset(0.67f, 0f), Color(0xFFFFC1AD))
        setVertex(0, 3, Offset(1f, 0f), Color(0xFFFF1357))
        setVertex(1, 0, Offset(0f, 0.39f), Color(0xFFFF564A))
        setVertex(1, 1, Offset(0.22f, 0.69f), Color(0xFFFFAF6C),
            topControlPoint = Offset(0.22f, -0.34f))
        setVertex(1, 2, Offset(0.76f, 0.61f), Color(0xFFFF314C))
        setVertex(1, 3, Offset(1f, 0.43f), Color(0xFFFE1D5E))
        setVertex(2, 0, Offset(0f, 1f), Color(0xFFFDA828))
        setVertex(2, 1, Offset(0.33f, 1f), Color(0xFFFFCB70))
        setVertex(2, 2, Offset(0.67f, 1f), Color(0xFFFE8692))
        setVertex(2, 3, Offset(1f, 1f), Color(0xFFFFB5B2))
    }
}