Skip to content

Instantly share code, notes, and snippets.

@rushiiMachine
Created January 15, 2025 05:41
Show Gist options
  • Save rushiiMachine/1311671ea7e758b2d3179aa005f72b16 to your computer and use it in GitHub Desktop.
Save rushiiMachine/1311671ea7e758b2d3179aa005f72b16 to your computer and use it in GitHub Desktop.
Jetpack compose snippet for drawing a circle with a shadow at a -45° angle
var radius by remember { mutableFloatStateOf(0f) }
Canvas(modifier = Modifier.matchParentSize()) {
// Draw background circle
drawCircle(
color = Color.White,
radius = radius,
alpha = .05f,
blendMode = BlendMode.Lighten,
)
// Draw shadow with an angle of -45deg
val sin45 = sqrt(2f) / 2f
val cos45 = sin45
val shadowLength = 15.dp.toPx()
drawPath(
color = Color.Black,
blendMode = BlendMode.Darken,
path = run {
val outer = Path().apply {
moveTo(center.x + radius * cos45, center.y - radius * sin45)
relativeLineTo(shadowLength, shadowLength)
relativeLineTo(-2 * radius * cos45, 2 * radius * sin45)
relativeLineTo(-shadowLength, -shadowLength)
close()
arcTo(
rect = Rect(center + Offset(shadowLength, shadowLength), radius),
startAngleDegrees = -45f,
sweepAngleDegrees = 180f,
forceMoveTo = false,
)
}
val mask = Path().apply {
arcTo(
rect = Rect(center, radius),
startAngleDegrees = -45f,
sweepAngleDegrees = 180f,
forceMoveTo = false,
)
}
Path().apply { op(outer, mask, PathOperation.Difference) }
}
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment