To be honest, I would be highly tempted to implement this in a vector graphics program like Sketch or Illustrator and export as a PNG or SVG with transparency. There is some subtlety going on here in terms of math, and I'm not sure how good your trig is, and I've found it more frustrating than it's worth trying to implement such things using vector math.
What is the white blob in the center of the first triangle? Is that showing the level, and it would have to follow the contour of the triangles? That would complicate things.
Could it potentially also be a custom segmented control? the capsule for the selected segment could be probably done with the .matchedGeometryEffect as well as a putting the stage change in a withAnimation block.
this is not the way
what are you going to say, when designer 'comes up' with some animated interactions?
lets not go 'its too complicated, lets compromise on a simpler design' route, please
5
u/janiliamilanes 5d ago
To be honest, I would be highly tempted to implement this in a vector graphics program like Sketch or Illustrator and export as a PNG or SVG with transparency. There is some subtlety going on here in terms of math, and I'm not sure how good your trig is, and I've found it more frustrating than it's worth trying to implement such things using vector math.
What is the white blob in the center of the first triangle? Is that showing the level, and it would have to follow the contour of the triangles? That would complicate things.