I try to create a gauche with notches in both extremities but it seem BlendMode.Clear is not working correctly. I have a grey/black triangle instead of transparent notch. I don’t understand why.

This is my code :

    @Composable
fun Gauge() {
    Box {
        val progress by remember { mutableFloatStateOf(0.6f) }
        Canvas(
            modifier = Modifier
                .fillMaxSize()
                .padding(8.dp)
        ) {
            val progressConvertedValue = progress * 300

            drawArcWithNotches(
                brush = Brush.sweepGradient(
                    0.25f to Color(0xFFDAF3F7),
                    0.30f to Color(0xFF094863),
                    0.60f to Color(0xFFD2F4FF),
                    0.75f to Color(0xFFD2F4FF),
                    0.85f to Color(0xFF94DDFD),
                    1.00f to Color(0xFFDAF3F7),
                ),
                startAngle = 120f,
                sweepAngle = progressConvertedValue,
                useCenter = false,
                style = Stroke(20f)
            )

            drawGaugeMarks()
        }

        Text(
            text = "${progress * 100}%",
            modifier = Modifier.align(Alignment.Center),
        )
    }
}

private fun DrawScope.drawArcWithNotches(
    brush: Brush,
    startAngle: Float,
    sweepAngle: Float,
    useCenter: Boolean,
    style: Stroke
) {
    val radius = size.width / 2
    val center = Offset(size.width / 2, size.height / 2)
    val notchSize = 20f

    // Draw the main arc
    drawArc(
        brush = brush,
        startAngle = startAngle,
        sweepAngle = sweepAngle,
        useCenter = useCenter,
        style = style
    )

    // Calculate the positions of the start and end of the arc
    val startAngleRadians = Math.toRadians(startAngle.toDouble())
    val endAngleRadians = Math.toRadians((startAngle + sweepAngle).toDouble())

    val startX = (center.x + radius * cos(startAngleRadians)).toFloat()
    val startY = (center.y + radius * sin(startAngleRadians)).toFloat()
    val endX = (center.x + radius * cos(endAngleRadians)).toFloat()
    val endY = (center.y + radius * sin(endAngleRadians)).toFloat()

    // Draw the notches as transparent areas using BlendMode.Clear
    val startNotchPath = Path().apply {
        moveTo(startX, startY)
        lineTo(
            startX - notchSize * cos(startAngleRadians + Math.PI / 4).toFloat(),
            startY - notchSize * sin(startAngleRadians + Math.PI / 4).toFloat()
        )
        lineTo(
            startX - notchSize * cos(startAngleRadians - Math.PI / 4).toFloat(),
            startY - notchSize * sin(startAngleRadians - Math.PI / 4).toFloat()
        )
        close()
    }

    val endNotchPath = Path().apply {
        moveTo(endX, endY)
        lineTo(
            endX - notchSize * cos(endAngleRadians - Math.PI / 4).toFloat(),
            endY - notchSize * sin(endAngleRadians - Math.PI / 4).toFloat()
        )
        lineTo(
            endX - notchSize * cos(endAngleRadians + Math.PI / 4).toFloat(),
            endY - notchSize * sin(endAngleRadians + Math.PI / 4).toFloat()
        )
        close()
    }

    // Clear the areas for the notches
    drawPath(
        path = startNotchPath,
        color = Color.Transparent,
        blendMode = BlendMode.Clear
    )

    drawPath(
        path = endNotchPath,
        color = Color.Transparent,
        blendMode = BlendMode.Clear
    )
}

The result :

This is what I want :