Formula for Cubic Bézier Curve

• \(P_0\) is the starting point.
• \(P1\) and \(P_2\) are control points, which influence the curve's direction.
• \(P_3\) is the endpoint.
• t is a value between 0 and 1 that determines the position on the curve.

How Cubic Bézier curves work:

• Start Point \(P_0): ​This is where the curve begins.
• Control Points \(P_1\) and \(P_2): These points "pull" the curve towards them, determining the direction and steepness of the curve.
• End Point \(P_3\): This is where the curve ends.
• t: The parameter that moves from 0 (start) to 1 (end), which determines the curve's progression along the line between the start and end points.

How to draw heart shapes using Jetpack Compose?

package com.cdingbihar.StaticBezierDemo

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.unit.dp

//  The Composable
@Composable
fun StaticBezierDemo() {
    Box(Modifier.fillMaxSize()) {
        // A fixed-size canvas to draw into
        Canvas(modifier = Modifier.size(320.dp)) {
            // `size` is now in scope here:
            val p0 = Offset(10f, size.height - 10f)
            val p1 = Offset(10f, 10f)
            val p2 = Offset(size.width - 10f, 10f)
            val p3 = Offset(size.width - 10f, size.height - 10f)

            // Build the path
            val path = Path().apply {
                moveTo(p0.x, p0.y)
                cubicTo(
                    p1.x, p1.y,  // first control point
                    p2.x, p2.y,  // second control point
                    p3.x, p3.y   // end point
                )
            }

            // Draw the curve
            drawPath(
                path = path,
                color = Color.Blue,
                style = Stroke(width = 5f, cap = StrokeCap.Round)
            )

            // Draw the control points
            listOf(p0, p1, p2, p3).forEach { point ->
                drawCircle(Color.Red, radius = 8f, center = point)
            }
        }
    }
}

• moveTo() jumps to the start P0
• cubicTo(cx1, cy1, cx2, cy2, x3, y3) adds your Bézier segment.
• Finally we stroke it in blue and mark the four defining points in red so you can see how control handles pull the curve.

• We use rememberInfiniteTransition() + animateFloat(...) to shuttle progress back and forth.
• p1.x and p2.x shift based on that progress, so the curve’s bend “breathes.”
• Dashed gray lines connect handle pairs (start→control1, control2→end) just like vector‐editing UIs.

package com.cdingbihar.aniimatedbezier

import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.PathEffect
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.unit.dp

@Composable
fun AnimatedBezier() {
    val modifier = Modifier.size(320.dp)
    // Animate from “flat” to “arched” control points
    val progress = rememberInfiniteTransition()
        .animateFloat(
            initialValue = 0.1f,
            targetValue  = 0.9f,
            animationSpec = infiniteRepeatable(
                animation = tween(2000, easing = FastOutSlowInEasing),
                repeatMode = RepeatMode.Reverse
            )
        ).value

    Canvas(modifier = modifier) {
        val w = size.width
        val h = size.height

        val p0 = Offset(10f, h - 10f)
        // control points slide horizontally as `progress` changes
        val p1 = Offset(10f + progress * w * 0.4f, 10f)
        val p2 = Offset(w - 10f - progress * w * 0.4f, 10f)
        val p3 = Offset(w - 10f, h - 10f)

        val path = Path().apply {
            moveTo(p0.x, p0.y)
            cubicTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y)
        }

        drawPath(path, color = Color.Magenta, style = Stroke(6f, cap = StrokeCap.Round))

        // draw handles
        drawLine(Color.Gray, p0, p1, strokeWidth = 2f, pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f,10f),0f))
        drawLine(Color.Gray, p2, p3, strokeWidth = 2f, pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f,10f),0f))
        listOf(p0, p1, p2, p3).forEach { drawCircle(Color.Green, 6f, it) }
    }
}