Compose Gradients

Jetpack Compose Mesh Gradient #193

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.66f
2, 2 0.33f, 0.67f
2, 3 0.62f, 0.28f
2, 4 1f, 0.42f
3, 1 0f, 0.66f
3, 2 0.33f, 0.67f
3, 3 0.64f, 0.38f
3, 4 1f, 0.67f
4, 1 0f, 1f
4, 2 0.33f, 1f
4, 3 0.67f, 1f
4, 4 1f, 1f

Jetpack Compose Code

val meshGradient = remember {
    MeshGradientPainter(
        rows = 3,
        columns = 3,
        hasBicubicColor = false,
    ) {
        setVertex(0, 0, Offset(0f, 0f), Color(0xFFCBCDD4))
        setVertex(0, 1, Offset(0.33f, 0f), Color(0xFFD1D2D9))
        setVertex(0, 2, Offset(0.67f, 0f), Color(0xFFD1D2D9))
        setVertex(0, 3, Offset(1f, 0f), Color(0xFFCBCDD4))
        setVertex(1, 0, Offset(0f, 0.66f), Color(0xFF4EA4E7))
        setVertex(1, 1, Offset(0.33f, 0.67f), Color(0xFFDADBEC))
        setVertex(1, 2, Offset(0.62f, 0.28f), Color(0xFFFFECEC))
        setVertex(1, 3, Offset(1f, 0.42f), Color(0xFFFFFFFF))
        setVertex(2, 0, Offset(0f, 0.66f), Color(0xFF0B6FB8))
        setVertex(2, 1, Offset(0.33f, 0.67f), Color(0xFFDEDFF5))
        setVertex(2, 2, Offset(0.64f, 0.38f), Color(0xFFF3F4FF))
        setVertex(2, 3, Offset(1f, 0.67f), Color(0xFF0F8FF0))
        setVertex(3, 0, Offset(0f, 1f), Color(0xFFFF00C4))
        setVertex(3, 1, Offset(0.33f, 1f), Color(0xFFFF00C4))
        setVertex(3, 2, Offset(0.67f, 1f), Color(0xFFFF00C4))
        setVertex(3, 3, Offset(1f, 1f), Color(0xFFFF00C4))
    }
}