I have a layout with 3 children. Is there a way to achieve this mask effect, where is something draw...

# compose

[raenardev]

I have a layout with 3 children.
Is there a way to achieve this mask effect, where is something drawn in 1st child is not clipped and can be continued in 2nd child, but is clipped out in parent?
I know i can draw it in 2 parts, in 1st and 2nd child. But the goal is to avoid that, so that nothing extra on 2nd child is needed

[ephemient]

easiest way IMO. note that I think you will need to move the item being drawn out of the first box in order for the drawing order to be correct

Demo.kt

[raenardev]

Thanks!
That almost what im looking for.
The reason that item is in first box, as this mechanism supposed to let some element to be highlighted by glow/shadow, and that glow/shadow can reflect on next boxes

[raenardev]

for the drawing order to be correct

That is the other issue im facing, yes, as box2 draws over content that overlaps from box1

[ephemient]

you could change box1's zIndex if you really need it inside box1

[raenardev]

Thanks, yeah.
But i think there is no way out of using some divider between boxes:
if that star is inside box1, then it i can't really do any mask magic to make background overlap on star, since the star is also a part of box and doing so will overlap on box also

[raenardev]

So i do not see a way to make background and boxes to be a separate "layers" while allowing boxes "layer" to have things overlapping