Compose Gradients

Jetpack Compose Mesh Gradient #192

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.31f
2, 2 0.3f, 0.42f
2, 3 0.59f, 0.34f
2, 4 1f, 0.33f
3, 1 0f, 0.67f
3, 2 0.31f, 0.68f
3, 3 0.73f, 0.53f
3, 4 1f, 0.58f
4, 1 0f, 1f
4, 2 0.31f, 1f
4, 3 0.65f, 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(0xFF000000))
        setVertex(0, 1, Offset(0.33f, 0f), Color(0xFF000000))
        setVertex(0, 2, Offset(0.67f, 0f), Color(0xFF1C1B21))
        setVertex(0, 3, Offset(1f, 0f), Color(0xFF1C1B21))
        setVertex(1, 0, Offset(0f, 0.31f), Color(0xFF1D1D1D))
        setVertex(1, 1, Offset(0.3f, 0.42f), Color(0xFF1D1C25),
            leftControlPoint = Offset(-0.1f, -0.07f),
            topControlPoint = Offset(-0.05f, -0.15f),
            rightControlPoint = Offset(0.11f, 0.05f),
            bottomControlPoint = Offset(0.07f, 0.13f))
        setVertex(1, 2, Offset(0.59f, 0.34f), Color(0xFF1C1B21),
            leftControlPoint = Offset(-0.12f, -0.04f),
            topControlPoint = Offset(-0.01f, -0.16f),
            rightControlPoint = Offset(0.13f, 0.03f),
            bottomControlPoint = Offset(0.01f, 0.2f))
        setVertex(1, 3, Offset(1f, 0.33f), Color(0xFF1C1B21))
        setVertex(2, 0, Offset(0f, 0.67f), Color(0xFF2B2B2B))
        setVertex(2, 1, Offset(0.31f, 0.68f), Color(0xFF2C2A36),
            leftControlPoint = Offset(-0.14f, 0.02f),
            topControlPoint = Offset(-0.02f, -0.12f),
            rightControlPoint = Offset(0.09f, -0.01f),
            bottomControlPoint = Offset(-0.02f, 0.11f))
        setVertex(2, 2, Offset(0.73f, 0.53f), Color(0xFF33333C),
            leftControlPoint = Offset(-0.07f, -0.03f),
            topControlPoint = Offset(-0.03f, -0.09f),
            rightControlPoint = Offset(0.08f, 0.02f),
            bottomControlPoint = Offset(0.04f, 0.08f))
        setVertex(2, 3, Offset(1f, 0.58f), Color(0xFF2B2B2B))
        setVertex(3, 0, Offset(0f, 1f), Color(0xFFDDDDE3))
        setVertex(3, 1, Offset(0.31f, 1f), Color(0xFFFFFFFF),
            topControlPoint = Offset(0.1f, -0.27f),
            rightControlPoint = Offset(0.23f, 0f),
            bottomControlPoint = Offset(-0.17f, 0.57f))
        setVertex(3, 2, Offset(0.65f, 1f), Color(0xFFFFFFFF),
            leftControlPoint = Offset(-0.36f, 0.03f),
            topControlPoint = Offset(0.17f, -0.43f),
            rightControlPoint = Offset(0.36f, 0.03f),
            bottomControlPoint = Offset(-0.11f, 0.67f))
        setVertex(3, 3, Offset(1f, 1f), Color(0xFF6D6E75),
            leftControlPoint = Offset(0.02f, 0.01f),
            topControlPoint = Offset(0.04f, -0.44f))
    }
}