Compose Gradients

Jetpack Compose Mesh Gradient #200

Remix

Mesh Points

Point Position Preview Hex
1, 1 0f, 0f
1, 2 0.31f, 0.03f
1, 3 0.49f, 0.06f
1, 4 0.63f, 0.34f
2, 1 0f, 0.33f
2, 2 0.32f, 0.4f
2, 3 0.9f, 0.12f
2, 4 0.94f, 0.41f
3, 1 0f, 0.67f
3, 2 0.33f, 0.67f
3, 3 0.65f, 0.62f
3, 4 0.95f, 0.58f
4, 1 0f, 1f
4, 2 0.33f, 1f
4, 3 0.71f, 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(0xFFFF5D8F))
        setVertex(0, 1, Offset(0.31f, 0.03f), Color(0xFFD58D92))
        setVertex(0, 2, Offset(0.49f, 0.06f), Color(0xFFAABD96))
        setVertex(0, 3, Offset(0.63f, 0.34f), Color(0xFF80ED99))
        setVertex(1, 0, Offset(0f, 0.33f), Color(0xFFAB4E77))
        setVertex(1, 1, Offset(0.32f, 0.4f), Color(0xFFAB697D))
        setVertex(1, 2, Offset(0.9f, 0.12f), Color(0xFFAA8384),
            rightControlPoint = Offset(0.07f, 0.01f))
        setVertex(1, 3, Offset(0.94f, 0.41f), Color(0xFFAA9E8B),
            leftControlPoint = Offset(0.08f, -0.23f),
            topControlPoint = Offset(0.04f, -0.13f),
            rightControlPoint = Offset(0.09f, 0f))
        setVertex(2, 0, Offset(0f, 0.67f), Color(0xFF563F5F))
        setVertex(2, 1, Offset(0.33f, 0.67f), Color(0xFF804469))
        setVertex(2, 2, Offset(0.65f, 0.62f), Color(0xFFAB4A73))
        setVertex(2, 3, Offset(0.95f, 0.58f), Color(0xFFD54F7C))
        setVertex(3, 0, Offset(0f, 1f), Color(0xFF023047))
        setVertex(3, 1, Offset(0.33f, 1f), Color(0xFF562054))
        setVertex(3, 2, Offset(0.71f, 1f), Color(0xFFAB1061))
        setVertex(3, 3, Offset(1f, 1f), Color(0xFFFF006E))
    }
}