Compose Gradients

Jetpack Compose Mesh Gradient #206

Remix

Mesh Points

Point Position Preview Hex
1, 1 0f, 0f
1, 2 0.25f, 0f
1, 3 0.5f, 0f
1, 4 0.75f, 0f
1, 5 1f, 0f
2, 1 0f, 0.25f
2, 2 0.32f, 0.54f
2, 3 0.54f, 0.25f
2, 4 0.76f, 0.41f
2, 5 1f, 0.25f
3, 1 0f, 0.5f
3, 2 0.15f, 0.58f
3, 3 0.59f, 0.76f
3, 4 0.77f, 0.66f
3, 5 1f, 0.5f
4, 1 0f, 0.75f
4, 2 0.21f, 0.8f
4, 3 0.47f, 0.86f
4, 4 0.76f, 0.86f
4, 5 1f, 0.75f
5, 1 0f, 1f
5, 2 0.25f, 1f
5, 3 0.5f, 1f
5, 4 0.75f, 1f
5, 5 1f, 1f

Jetpack Compose Code

val meshGradient = remember {
    MeshGradientPainter(
        rows = 4,
        columns = 4,
        hasBicubicColor = false,
    ) {
        setVertex(0, 0, Offset(0f, 0f), Color(0xFFA9666F))
        setVertex(0, 1, Offset(0.25f, 0f), Color(0xFFE12A5B))
        setVertex(0, 2, Offset(0.5f, 0f), Color(0xFFE2347A))
        setVertex(0, 3, Offset(0.75f, 0f), Color(0xFFE33E97))
        setVertex(0, 4, Offset(1f, 0f), Color(0xFFE548B2))
        setVertex(1, 0, Offset(0f, 0.25f), Color(0xFFE0256B))
        setVertex(1, 1, Offset(0.32f, 0.54f), Color(0xFFE12F8A))
        setVertex(1, 2, Offset(0.54f, 0.25f), Color(0xFFE339A6))
        setVertex(1, 3, Offset(0.76f, 0.41f), Color(0xFFE443C1))
        setVertex(1, 4, Offset(1f, 0.25f), Color(0xFFE64DD8))
        setVertex(2, 0, Offset(0f, 0.5f), Color(0xFFE12B9B))
        setVertex(2, 1, Offset(0.15f, 0.58f), Color(0xFFE235B7))
        setVertex(2, 2, Offset(0.59f, 0.76f), Color(0xFFE43FD0))
        setVertex(2, 3, Offset(0.77f, 0.66f), Color(0xFFE249E5))
        setVertex(2, 4, Offset(1f, 0.5f), Color(0xFFD053E6))
        setVertex(3, 0, Offset(0f, 0.75f), Color(0xFFE231C8))
        setVertex(3, 1, Offset(0.21f, 0.8f), Color(0xFFE33BE1))
        setVertex(3, 2, Offset(0.47f, 0.86f), Color(0xFFD145E4))
        setVertex(3, 3, Offset(0.76f, 0.86f), Color(0xFFBF4FE6))
        setVertex(3, 4, Offset(1f, 0.75f), Color(0xFFAF59E7))
        setVertex(4, 0, Offset(0f, 1f), Color(0xFFD236E2))
        setVertex(4, 1, Offset(0.25f, 1f), Color(0xFFBE40E4))
        setVertex(4, 2, Offset(0.5f, 1f), Color(0xFFAD4AE5))
        setVertex(4, 3, Offset(0.75f, 1f), Color(0xFF9E54E7))
        setVertex(4, 4, Offset(1f, 1f), Color(0xFF915EE8))
    }
}